WPF tab control and MVVM selection WPF tab control and MVVM selection wpf wpf

WPF tab control and MVVM selection


If you look at the TabControl Class page on MSDN, you'll find a property called SelectedIndex which is an int. Therefore, simply add an int property into your view model and Bind it to the TabControl.SelectedIndex property and then you can select whichever tab you like at any time from the view model:

<TabControl SelectedIndex="{Binding SelectedIndex}">    ...</TabControl>

UPDATE >>>

Setting a 'startup' tab is even easier using this method:

In view model:

private int selectedIndex = 2; // Set the field to whichever tab you want to start onpublic int SelectedIndex { get; set; } // Implement INotifyPropertyChanged here


Just FYI, I gone through the same issue where I add tabs dynamically using ObservableCollection source but last added Tab do not get selected.I have done same changes what Sheridan said to select Tab as per SelectedIndex. Now last added Tab gets selected but it was not getting focused. So to focus the Tab we have to add set Binding IsAsync property True.

<TabControl ItemsSource="{Binding Workspaces}" Margin="5" SelectedIndex="{Binding TabIndex, Mode=OneWay,UpdateSourceTrigger=PropertyChanged, IsAsync=True}">


The below code sample will create a dynamic tab using MVVM.

XAML

<TabControl Margin="20" x:Name="tabCategory"                ItemsSource="{Binding tabCategory}"                SelectedItem="{Binding SelectedCategory}">    <TabControl.ItemTemplate>        <DataTemplate>            <HeaderedContentControl Header="{Binding TabHeader}"/>        </DataTemplate>    </TabControl.ItemTemplate>    <TabControl.ContentTemplate>        <DataTemplate>            <ContentControl Content="{Binding TabContent}" />        </DataTemplate>    </TabControl.ContentTemplate></TabControl>

Modal Class

TabCategoryItem represents each tab item. On two properties, TabHeader will display a tab caption and TabContent contains the content/control to fill in each tab.

Public Class TabCategoryItem    Public Property TabHeader As String    Public Property TabContent As UIElementEnd Class

VM Class

Public Class vmClass    Public Property tabCategory As ObjectModel.ObservableCollection(Of TabCategoryItem)    Public Property SelectedCategory As TabCategoryItemEnd Class

The below code will fill and bind the content. I am creating two tabs, tab1 and tab2. Both tabs will contain text boxes. You can use any UIelement instead of text boxes.

Dim vm As New vmClassvm.tabCategory = New ObjectModel.ObservableCollection(Of TabCategoryItem)'VM.tabCategory colection will create all tabsvm.tabCategory.Add(New TabCategoryItem() With {.TabHeader = "Tab1", .TabContent = new TextBlock().Text = "My first Tab control1"})vm.tabCategory.Add(New TabCategoryItem() With {.TabHeader = "Tab2", .TabContent = new TextBlock().Text = "My first Tab control2"})mywindow.DataContent = vm