Pattern and Practices

22 Jan 20256 minutes to read

Getting Started with MVVM

Essential® WPF controls are suitable for MVVM Pattern. Since, the controls are provided with built-in commands.

The DataContext property specifies the default source for Data Binding in MVVM pattern.

<Window.DataContext>
    <local:ViewModel/>
</Window.DataContext>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = new ViewModel();
    }
}

This section explains how to perform TabControlExt’s selectionChanged event by creating a ViewModel and defining a Model collection that is used to bind with the TabControl’s ItemSource property.

<Syncfusion:TabControlExt ItemsSource="{Binding tabcollection}">
	<Syncfusion:TabControlExt.ItemTemplate>
		<DataTemplate>
			<TextBlock  Text="{Binding HeaderName}"></TextBlock>
		</DataTemplate>
	</Syncfusion:TabControlExt.ItemTemplate>
</Syncfusion:TabControlExt>
public class ViewModel:NotificationObject
{
	private ObservableCollection<model> _tabcollection;
	public ObservableCollection<model> tabcollection
	{
		get
		{
			return _tabcollection;
		}
		set
		{
			_tabcollection = value;
		}
	}
	private void Collection()
	{
		model model = new model()
		{
			HeaderName = "item1"
		};
		model model1 = new model()
		{
			HeaderName = "item2"
		};
		model model2 = new model()
		{
			HeaderName = "item3"
		};
		tabcollection.Add(model);
		tabcollection.Add(model1);
		tabcollection.Add(model2);
	}
	public ViewModel()
	{
		tabcollection=new ObservableCollection<model>();
		Collection();
	}
}

public class model:NotificationObject
{
	public model() {}
	private string _headername;
	public string HeaderName
	{
		get
		{
			return _headername;
		}
		set
		{
			_headername = value;
			this.RaisePropertyChanged("HeaderName");
		}
	}
}
Public Class ViewModel
	Inherits NotificationObject
	Private _tabcollection As ObservableCollection(Of model)
	Public Property tabcollection() As ObservableCollection(Of model)
		Get
			Return _tabcollection
		End Get
		Set(ByVal value As ObservableCollection(Of model))
			_tabcollection = value
		End Set
	End Property
	Private Sub Collection()
		Dim model As New model() With {.HeaderName = "item1"}
		Dim model1 As New model() With {.HeaderName = "item2"}
		Dim model2 As New model() With {.HeaderName = "item3"}
		tabcollection.Add(model)
		tabcollection.Add(model1)
		tabcollection.Add(model2)
	End Sub
	Public Sub New()
		tabcollection = New ObservableCollection(Of model)()
		Collection()
	End Sub
End Class

Public Class model
	Inherits NotificationObject
	Public Sub New()
	End Sub
	Private _headername As String
	Public Property HeaderName() As String
		Get
			Return _headername
		End Get
		Set(ByVal value As String)
			_headername = value
			Me.RaisePropertyChanged("HeaderName")
		End Set
	End Property
End Class

To handle the SelectionChanged event of the TabControlExt in ViewModel, use TabControlExtSelectionChangedCommand and define a SelectionChanged command using ICommand.
The TabControlExtSelectionChangedCommand command is available in Syncfusion.Tools.MVVM.WPF assembly. It also requires Syncfusion.Shared.MVVM.WPF as a dependency assembly.

<Syncfusion:TabControlExt ItemsSource="{Binding tabcollection}"
                          Syncfusion:TabControlExtSelectionChangedCommand.Command="{Binding SelectionChanged}">
	<Syncfusion:TabControlExt.ItemTemplate>
		<DataTemplate>
			<TextBlock  Text="{Binding HeaderName}"/>
		</DataTemplate>
	</Syncfusion:TabControlExt.ItemTemplate>
</Syncfusion:TabControlExt>
private ICommand selectionchanged;
public ICommand SelectionChanged
{
    get
	{
		return selectionchanged;
	}
}
public ViewModel()
{
	selectionchanged = new DelegateCommand<object>(PropertyChangedHandled);
}
private void PropertyChangedHandled (object obj)
{
	MessageBox.Show("Command Executed");
}
Private selectionchanged_Renamed As ICommand
Public ReadOnly Property SelectionChanged() As ICommand
	Get
		Return selectionchanged_Renamed
	End Get
End Property
Public Sub New()
	selectionchanged_Renamed = New DelegateCommand(Of Object)(AddressOf PropertyChangedHandled)
End Sub
Private Sub PropertyChangedHandled(ByVal obj As Object)
	MessageBox.Show("Command Executed")
End Sub

Show the message box for command execution

MVVM Commands

The following section covers how to use commands in code-behind using ViewModel.

CommandParameter

CommandParameter can easily pass an object or bind it to a property of another control. The following code example passes a string using CommandParameter.

<Syncfusion:TabControlExt ItemsSource="{Binding tabcollection}"
            Syncfusion:TabControlExtSelectionChangedCommand.Command="{Binding SelectionChanged}"
			Syncfusion:TabControlExtSelectionChangedCommand.CommandParameter="SelectedItem Command Parameter">
private void PropertyChangedHandled (object obj)
{
	MessageBox.Show(obj.ToString());
}
Private Sub PropertyChangedHandled(ByVal obj As Object)
	MessageBox.Show(obj.ToString())
End Sub

Select third tabitem and command parameter

Pass a property value through Command parameter

Any property can bind with the CommandParameter to pass it as command in ViewModel.

<Syncfusion:TabControlExt ItemsSource="{Binding tabcollection}"
            Syncfusion:TabControlExtSelectionChangedCommand.Command="{Binding SelectionChanged}"
			Syncfusion:TabControlExtSelectionChangedCommand.CommandParameter="{Binding Path=SelectedItem.HeaderName,
			RelativeSource={RelativeSource Self}}">
private void PropertyChangedHandled (object obj)
{
	MessageBox.Show("SelectedItem" +obj.ToString());
}
Private Sub PropertyChangedHandled(ByVal obj As Object)
	MessageBox.Show("SelectedItem" & obj.ToString())
End Sub

Select the second tabitem

Command target

The element where the command exists can be determined using the EventBinding’s CommandTarget property. Refer to CommandTarget Property, for more reference.