WPF: TabControl et dynamique TabItems

Je suis en train de créer une interface graphique pour mon projet actuel, l'utilisation de WPF en C#.
Je voudrais avoir des onglets (créé dynamiquement à l'exécution) et chaque onglet devrait ouvrir une table avec les mêmes en-têtes de colonne mais de contenu différent.

Je sais que je pourrais réaliser des onglets et des tables comme ceci:

<Grid>
    <TabControl  x:Name="tabControl"  TabStripPlacement="Left">
        <TabItem Header="Example 1" x:Name="tabItem" >
            <DataGrid ItemsSource="{Binding TagCollection.Tags}" AutoGenerateColumns="False">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Tag" Binding="{Binding Tag}" />
                    <DataGridTextColumn Header="Description" Binding="{Binding Description}" />
                    <DataGridTextColumn Header="Value" Binding="{Binding Value}" />                                              
                </DataGrid.Columns>
            </DataGrid>
        </TabItem>
        <TabItem Header="Example 2" x:Name="tabItem1" >
            <DataGrid ItemsSource="{Binding TagCollection.Tags}" AutoGenerateColumns="False">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Tag" Binding="{Binding Tag}" />
                    <DataGridTextColumn Header="Description" Binding="{Binding Description}" />
                    <DataGridTextColumn Header="Value" Binding="{Binding Value}" />
                </DataGrid.Columns>
            </DataGrid>
        </TabItem>

    </TabControl>

</Grid>

Comment puis-je produire une vue comme ça avec le code derrière? Je ne suis pas habitué à des raccourcis et de telles choses encore, alors peut-être que quelqu'un pourrait me montrer un exemple court?

Merci
KatZe

Faire un peu de googling "MVVM TabControl" ... qui devrait vous aider à aller de l'avant. MVVM fera cela très facile une fois que vous obtenez ce que ça va.

OriginalL'auteur Kat Ze | 2015-09-22

  1. 4

    J'ai créer un exemple de projet DynamicTabs.
    Quelques exemples de contexte dans le constructeur:

    var tabs = new ObservableCollection<MyTab>();
int tabsCount = 5;
for (var i = 1; i <= tabsCount; i++)
{
    var tab = new MyTab() {Header = "Tab " + i};
    tab.Data.Add(new MyTabData() {Column1 = "col1" + i, Column2 = "col2" + i, Column3 = "col3" + i});
    tabs.Add(tab);
}
DataContext = tabs;

    Classes de l'échantillon contexte:

    public class MyTab
{
    public string Header { get; set; }

    public ObservableCollection<MyTabData> Data { get; } = new ObservableCollection<MyTabData>();
}

public class MyTabData
{
    public string Column1 { get; set; }
    public string Column2 { get; set; }
    public string Column3 { get; set; }
}

    Et XAML:

    <Window x:Class="DynamicTabs.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:DynamicTabs"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<TabControl ItemsSource="{Binding}">
    <TabControl.ItemTemplate>
        <DataTemplate DataType="local:MyTab">
            <TextBlock Text="{Binding Header}"/>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate DataType="local:MyTab">
            <DataGrid ItemsSource="{Binding Data}">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Column 1" Binding="{Binding Column1}" />
                    <DataGridTextColumn Header="Column 2" Binding="{Binding Column2}" />
                    <DataGridTextColumn Header="Column 3" Binding="{Binding Column3}" />
                </DataGrid.Columns>
            </DataGrid>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

    ItemTemplate est pour partie en-Tête de l'élément tabpage et ContentTemplate pour le Contenu de chaque élément tabpage.

    merci cela fonctionne bien! le seul problème qui reste c'est qu'il y a créé toutes les colonnes 2 fois maintenant. D'abord avec des noms d'en-Tête et le deuxième avec des noms de Liaison
    Ze, l'utilisation de la propriété AutoGenerateColumns="False"

    OriginalL'auteur Spawn

  3. -1

    Avec quelques mises à jour mineures de votre code-behind, vous devriez être en mesure de le faire avec :

    <TabControl  x:Name="tabControl"  TabStripPlacement="Left" ItemsSource="{Binding Path=TableCollection}">
    <TabControl.ItemTemplate>
        <DataTemplate DataType="{x:Type YourTableType}">
          <TabItem Header={Binding TableName}>
            <DataGrid ItemsSource="{Binding Rows}" AutoGenerateColumns="False">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Tag" Binding="{Binding Tag}" />
                    <DataGridTextColumn Header="Description" Binding="{Binding Description}" />
                    <DataGridTextColumn Header="Value" Binding="{Binding Value}" />
                </DataGrid.Columns>
            </DataGrid>
          </TabItem>
        </DataTemplate>
    </TabControl.ItemTemplate>
</TabControl>

    Il suffit de remplacer les propriétés dans les liaisons en fonction de vos propres besoins.

    OriginalL'auteur xum59