8

私のWPFWindowsには、さまざまなタブにコンテンツを表示するTabControlが含まれています。下のボタンをクリックすると、ICommandインターフェイス/バインディングを介してメソッドが実行されます。呼び出されたメソッドは、2番目のタブに表示されることを目的としたテキストを生成します。

アプリケーションモックアップ

MVVMパターンに違反せずに、ボタンクリックで2番目のタブに切り替えるにはどうすればよいですか？

TabItem.IsSelectedプロパティをViewModelの何かにバインドしようとしましたが、他のタブ（tab1）も使用したいと思いました。

何かご意見は？

4

5 に答える 5

15

自分で見つけました。

重要なのは双方向のバインディングです。ボタンをクリックすると、プロパティがDisplayXamlTabtrueに設定されます。属性はこのIsSelected変数にバインドされています。別のタブがクリックされると、バインディングによってDisplayXamlTabプロパティがfalseに設定されます。

注：UpdateSourceTrigger=PropertyChangedこれも非常に重要です

コードは以下のとおりです。

XAML：

        <TabItem Header="XAML" IsSelected="{Binding DisplayXamlTab, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
            <Grid Background="#FFE5E5E5">
                <TextBox x:Name="TxtXamlOutput" IsReadOnly="True" Text="{Binding XamlText, Mode=TwoWay, NotifyOnTargetUpdated=True, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}" AcceptsReturn="True" TextWrapping="Wrap" VerticalScrollBarVisibility="Visible"/>
            </Grid>
        </TabItem>

C＃プロパティ：

private bool displayXamlTab;
public bool DisplayXamlTab
{
    get { return this.displayXamlTab; }
    set
    {
        this.displayXamlTab = value;
        this.RaisePropertyChanged("DisplayXamlTab");
    }
}
于 2013-03-06T17:05:48.623 に答える
12

MVVMの方法を使用する場合は、コードビハインドで2つの依存関係プロパティを作成します。

  • ObservableCollection<ItemType> Items;
  • ItemType MySelectedItem;

次に、TabControl ItemsSourceプロパティをItemsにバインドし、SelectedItemプロパティをMySelectedItemにバインドします

    <TabControl ItemsSource="{Binding Items}"
        SelectedItem="{Binding MySelectedItem, Mode=TwoWay}">
<TabControl.ItemTemplate>
    <DataTemplate>
        <... here goes the UI to display ItemType ... >
    </DataTemplate>
  </TabControl.ItemTemplate>
</TabControl>

選択したタブを変更する場合は、MySelectedItemのdependecyプロパティを更新するだけです。

于 2013-03-06T17:00:23.467 に答える
2

この質問はかなり古く、すでに十分に回答されていますが、で選択したものを変更する別の方法を示すために、この追加の回答を追加すると思いTabItemましたTabControl。それぞれのビューモデルがある場合は、プロパティを含めて、それが選択されているかどうかを判断するTabItemと便利です。このプロパティを使用して、このプロパティをプロパティIsSelectedにデータバインドすることができます。IsSelectedTabItem.IsSelectedItemContainerStyle

<TabControl ItemsSource="{Binding MenuItems}" TabStripPlacement="Top">
    <TabControl.ItemTemplate>
        <DataTemplate DataType="{x:Type ControlViewModels:MenuItemViewModel}"> 
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding ImageSource}" Margin="0,0,10,0" />
                <TextBlock Text="{Binding HeaderText}" FontSize="16" />
            </StackPanel>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate DataType="{x:Type ControlViewModels:MenuItemViewModel}">
            <ContentControl Content="{Binding ViewModel}" />
        </DataTemplate>
    </TabControl.ContentTemplate>
    <TabControl.ItemContainerStyle>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="IsSelected" Value="{Binding IsSelected}" />
        </Style>
    </TabControl.ItemContainerStyle>
</TabControl>

TabItemこれで、親ビューモデルから選択したものを次のように変更できます。

MenuItems[0].IsSelected = true;

このプロパティはTabItem.IsSelectedプロパティにバインドされたデータであるため、これを呼び出すことに注意してください...：

MenuItems[1].IsSelected = true;

MenuItems[0].IsSelected...実際には、プロパティも自動的にに設定されますfalse。したがって、使用しているビューモデルのIsSelectedプロパティがtrueに設定されている場合は、関連するビューがで選択されていることを確認できますTabControl。

于 2014-11-06T21:11:45.207 に答える
1

ビューモデルとTabControl.SelectedIndexプロパティの間にバインディングを作成できます。つまり、0は最初のものを選択しTabItem、1は2番目のものを選択します。

<TabControl DataContext="..." SelectedIndex="{Binding SomeVmProperty}" ...

（または、設定方法によっては、バインドすることもできますSelectedItem...）

于 2013-03-06T16:55:03.427 に答える
0

ある種の「イベントアグリゲーター」パターン（つまり、MVVM LightのMessengerクラス）を使用して、ある種の「ナビゲーション」メッセージをブロードキャストすることをお勧めします。ビュー（TabControl）は、特定のメッセージをリッスンし、メッセージを受信したときにTab2に移動できます。

または、 TabControlの「SelectedItemCurrentTab = MySecondTabViewModel 」プロパティをViewModelにバインドし、 VM内から呼び出すこともできます。これは、OPへのコメントで@HighPointが推奨するアプローチですが、私はファンではありません。下記参照。このアプローチのもう1つの注意点は、表示する各ViewModelにビューをマップする必要があるため、DataTemplatesに精通している必要があることです。

私は最初のアプローチが個人的に好きです。なぜなら、それがタブナビゲーションを処理するためのViewModelの「責任」であるとは考えていないからです。ViewModelでデータが変更されたときにビューにアラートを送信するだけで、ビューがタブを変更するかどうかを決定できるようになります。

于 2013-03-06T16:53:09.507 に答える