Loreno Loreno - 2 months ago 22
C# Question

TabItem DataTemplate with binding

I have a

TabControl
in my app. I'd like to have as many
TabItems
as many entries are in my dictionary.

Here's my dictionary:

public Dictionary<string , ObservableCollection<PerformanceCounter>> Counters
{
get { return _Counters; }
}
Dictionary<string, ObservableCollection<PerformanceCounter>> _Counters = new Dictionary<string , ObservableCollection<PerformanceCounter>>();


Every entry has a string key and ObservableCollection of PerformanceCounter objects. Important thing is the fact that every PerformanceCounter object has properties: CounterName and InstanceName - I'll need these two to display them.

Now, to my XAML:

<TabItem Header="Memory">
<Grid Name="RAMGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListBox Name="RAMListBox" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" ItemsSource="{Binding Memory, Mode=OneWay}" SelectionMode="Multiple" BorderThickness="1" BorderBrush="#FF8B8B8B" SelectionChanged="RAMListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock>
<Run Text="{Binding CounterName, Mode=OneWay}" />
<Run Text="{Binding InstanceName, Mode=OneWay}" />
</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Name="RAMSelectAllButton" Margin="0,10,0,0" Grid.Column="0" Grid.Row="1" Click="RAMSelectAllButton_Click" >
<TextBlock Text="SELECT ALL"/>
</Button>
<Button Name="RAMUnSelectAllButton" Margin="0,10,0,0" Grid.Column="1" Grid.Row="1" Click="RAMUnSelectAllButton_Click" >
<TextBlock Text="UNSELECT ALL"/>
</Button>
</Grid>
</TabItem>


That's what I did and, as you might already know, it does not work. The above code is only for one entry of my dictionary, where the key is "Memory".

In my code I set DataContext:

this.DataContext = appData.Counters;


appData.Counters is that dictionary I presented at the beginning.

Here's what I'd like to achieve:
No matter how many entries there are in my dictionary, my TabControl would display TabItem for each of them.
Each TabItem has a ListBox and 2 buttons. I'll need too be able to access those (in order to clear the list and to have click event for each button).

I really don't know how to do it, I hope you can help me out.

Answer

Binding TabControl to items in Dictionary:

<Window.Resources>

    <DataTemplate x:Key="templateForTheContent" >
        <StackPanel>
            <ListBox Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" 
                     ItemsSource="{Binding Value, Mode=OneWay}"
                     SelectionMode="Multiple"
                         BorderThickness="1" BorderBrush="#FF8B8B8B">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock>
                                    <Run Text="{Binding CounterName, Mode=OneWay}" />
                                    <Run Text="{Binding InstanceName, Mode=OneWay}" />
                        </TextBlock>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>
    </DataTemplate>

    <DataTemplate x:Key="templateForTheHeader" >
        <TextBlock Text="{Binding Key}"/>
    </DataTemplate>

</Window.Resources>
<Grid>
    <TabControl TabStripPlacement="Left"  VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch"
        ItemsSource="{Binding Counters}"
        ContentTemplate="{StaticResource templateForTheContent}"
        ItemTemplate="{StaticResource templateForTheHeader}">
    </TabControl>
</Grid>

Now, Dictionary is not observable so if items will be added/removed during runtime, you may consider using something like ObservableDictionary instead

Comments