Selecting TabItem in TabControl from ViewModel

问题

I have been struggling with this for a day or so, can't figure out what I'm doing wrong here. I want to be able to select any tab in my observable collection of tabs, and I want my selection to be visible in the UI. I have tried SelectedIndex and SelectedItem. I can see that my Properties are set but my tabs are not selected, nothing happens in the UI. Here is my code:

MainWindow.xaml

<Window x:Class="WpfApplication5.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:uc="clr-namespace:WpfApplication5"
    Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
    <ViewModel xmlns="clr-namespace:WpfApplication5" />
</Window.DataContext>
<StackPanel>
    <Button Content="Select Tab Index 0" Click="Button_Click_0"/>
    <Button Content="Select Tab Index 1" Click="Button_Click_1"/>
    <Label Content="{Binding SelectedIndex, UpdateSourceTrigger=PropertyChanged}" />
    <TabControl ItemsSource="{Binding Tabs}" SelectedIndex="{Binding SelectedIndex, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Header}"/>
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
                <uc:TabContent Content="{Binding Content}"/>
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>
</StackPanel>

MainWindow.xaml.cs

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void Button_Click_0(object sender, RoutedEventArgs e)
    {
        var viewModel = (ViewModel)DataContext;
        viewModel.SelectedIndex = 0;
    }

    private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        var viewModel = (ViewModel)DataContext;
        viewModel.SelectedIndex = 1;
    }
}

ViewModel.cs

class ViewModel
{
    private int _selectedIndex = 0;
    public event PropertyChangedEventHandler PropertyChanged;
    private ObservableCollection<Tab> _tabCollection = new ObservableCollection<Tab>();

    public ViewModel()
    {
        Tabs.Add(new Tab { Header = "Tab1", Content = new WpfApplication5.TabContent() });
        Tabs.Add(new Tab { Header = "Tab2", Content = new WpfApplication5.TabContent() });
    }

    public ObservableCollection<Tab> Tabs
    {
        get { return _tabCollection; }
    }

    public int SelectedIndex
    {
        get { return _selectedIndex; }
        set
        {
            _selectedIndex = value;
            NotifyPropertyChanged("SelectedIndex");
        }
    }

    private void NotifyPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

Tab.cs

class Tab
{
    public UserControl Content { get; set; }
    public string Header { get; set; }
}

TabContent.xaml

<Grid>
    <Label Content="Hello World!" />
</Grid>

回答1:

Your ViewModel class doesn't implement the INotifyPropertyChanged interface:

class ViewModel : INotifyPropertyChanged
{
    ...

That's your issue.

来源：https://stackoverflow.com/questions/45934828/selecting-tabitem-in-tabcontrol-from-viewmodel

标签

wpf

xaml

mvvm

tabcontrol