Contrôle d'onglet WPF et sélection MVVM

J'ai un TabControl dans un MVVM WPF application. Elle est définie comme suit.

<TabControl Style="{StaticResource PortfolioSelectionTabControl}" SelectedItem="{Binding SelectedParameterTab}" >
    <TabItem Header="Trades" Style="{StaticResource PortfolioSelectionTabItem}">
        <ContentControl Margin="0,10,0,5" Name="NSDetailTradeRegion" cal:RegionManager.RegionName="NSDetailTradeRegion" />
    </TabItem>
    <TabItem Header="Ccy Rates" Style="{StaticResource PortfolioSelectionTabItem}">
        <ContentControl Margin="0,10,0,5" Name="NSDetailCcyRegion" cal:RegionManager.RegionName="NSDetailCcyRegion" />
    </TabItem>
    <TabItem Header="Correlations /Shocks" Style="{StaticResource PortfolioSelectionTabItem}">
        <ContentControl Name="NSDetailCorrelationRegion" cal:RegionManager.RegionName="NSDetailCorrelationRegion" />
    </TabItem>
    <TabItem Header="Facility Overrides" Style="{StaticResource PortfolioSelectionTabItem}" IsEnabled="False">
        <ContentControl Name="NSDetailFacilityOverrides" cal:RegionManager.RegionName="NSDetailFacilityOverrides" />
    </TabItem>
</TabControl>

De sorte que chaque onglet contenu de l'élément a son propre point de vue associée. Chacun de ces points de vue a la MEF [Export] attribut et est associée à la région par le biais de vue de la découverte, de sorte que le code ci-dessus est tout ce que je besoin d'avoir l'onglet contrôle de la charge et de basculer entre eux. Ils ont tous référence à la même partagé ViewModel objet derrière eux et donc d'interagir de façon transparente.

Mon problème est que lorsque l'utilisateur accède à la fenêtre parent, je veux le contrôle onglet par défaut pour la deuxième onglet de l'élément. C'est assez facile de le faire lorsque la fenêtre est chargée pour la première fois, en spécifiant dans le code XAML IsSelected="True" dans TabItem numéro 2. Il est moins facile à faire lorsque l'utilisateur quitte l'écran et revient vers elle.

J'ai pensé avoir un SelectedItem={Binding SelectedTabItem} de propriété sur l'onglet contrôle, afin que je puisse définir par programmation l'onglet sélectionné dans le ViewModel, mais le problème est que je n'ai aucune connaissance de la TabItem objets dans le ViewModel ils sont déclarées ci-dessus dans le code XAML seulement, donc je n'ai pas TabItem objet de passer pour le setter de la propriété.

Une idée que j'avais était de faire de l'enfant Vues (qui forment le contenu de chaque onglet éléments ci-dessus) ont un style sur le UserControl niveau de leur XAML, quelque chose le long de la suivante.

<Style TargetType={x:Type UserControl}>
    <Style.Triggers>
        <DataTrigger Property="IsSelected" Value="True">
             <Setter Property="{ElementName={FindAncestor, Parent, typeof(TabItem)}, Path=IsSelected", Value="True" />
        </DataTrigger>
    </Style.Triggers>
</Style>

Je sais que le findancestor bits n'est pas correct; j'ai juste mis là pour préciser mon intention, mais je ne suis pas sûr de la syntaxe exacte. En gros pour chaque UserControl pour avoir un déclencheur qui est à l'écoute d'un bien sur le ViewModel (pas sûr de savoir comment je pourrait distinguer chaque UserControl que, évidemment, ils ne peuvent pas tous d'écouter la même propriété ou ils seraient tous sélectionner simultanément lorsque la propriété est définie à Vrai, mais ayant une propriété pour chaque usercontrol semble laid) et puis trouve son parent TabItem conteneur et définit la IsSelected de la valeur à true.

Suis-je sur la bonne voie avec une solution ici? Est-il possible de faire ce que je suis en méditant? Est-il une solution plus propre?

source d'informationauteur NZJames

40

Si vous regardez la TabControl de la Classe page sur MSDN, vous trouverez une propriété appelée SelectedIndex qui est un int. Par conséquent, il suffit d'ajouter une int bien dans votre modèle de vue et Bind à la TabControl.SelectedIndex bien et puis vous pouvez sélectionner n'importe quel onglet que vous souhaitez à tout moment à partir de la vue modèle:
```
<TabControl SelectedIndex="{Binding SelectedIndex}">
    ...
</TabControl>
```
Mise à JOUR >>>

Définition d'un "démarrage", onglet est même plus facile en utilisant cette méthode:

Dans le modèle de vue:
```
private int selectedIndex = 2; //Set the field to whichever tab you want to start on

public int SelectedIndex { get; set; } //Implement INotifyPropertyChanged here
```

L'exemple de code ci-dessous permettra de créer une dynamique de tabulation à l'aide de 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>

Classe Modale

TabCategoryItem représente chaque onglet de l'élément. Sur les deux propriétés, TabHeader affiche une légende de l'onglet et TabContent contient le contenu/de contrôle à remplir dans chaque onglet.

Public Class TabCategoryItem

    Public Property TabHeader As String
    Public Property TabContent As UIElement
End Class

De la Classe VM

Public Class vmClass

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

Le code ci-dessous va remplir et de lier le contenu. Je suis la création de deux onglets, tab1 et tab2. Les deux onglets contiennent des zones de texte. Vous pouvez utiliser n'importe quel UIelement à la place de zones de texte.

Dim vm As New vmClass

vm.tabCategory = New ObjectModel.ObservableCollection(Of TabCategoryItem)

'VM.tabCategory colection will create all tabs

vm.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

8

Juste pour info,
J'ai connu le même problème lorsque j'ai ajouter des onglets de manière dynamique à l'aide de ObservableCollection source mais le dernier Onglet de ne pas être sélectionnée.
J'ai fait les mêmes changements que Sheridan a dit pour sélectionner l'Onglet comme par SelectedIndex. Maintenant, le dernier ajout de l'Onglet est sélectionné, mais il n'était pas concentré.
Afin de se concentrer sur l'Onglet nous devons ajouter un jeu de Liaison IsAsync bien Vrai.
```
<TabControl ItemsSource="{Binding Workspaces}" Margin="5" SelectedIndex="{Binding TabIndex, Mode=OneWay,UpdateSourceTrigger=PropertyChanged, IsAsync=True}">
```

Vous devez vous connecter pour publier un commentaire.