Search code examples
c#wpfxamlstylestabitem

Creating multiple tabitems from tabitem template in WPF C# XAML


I read many tutorials from MSDN about WPF styling and datatemplating and contenttemplating but no success. I need to make same TabItems in my TabControl and I made manually TabItem which i want to use as host for Style and ContentTemplate for other TabItems in TabControl

<TabItem Header="1.semestar">
    <Grid x:Name="GridSemestra">
        <Grid.DataContext>
            <ViewModel:PredmetVM/>
        </Grid.DataContext>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
         <ColumnDefinition MinWidth="100"/>
         <ColumnDefinition MinWidth="30"/>
    </Grid.ColumnDefinitions>


    <Grid.Children>
        <ListBox x:Name="PredmetiLW" Grid.Row="0" BorderThickness="0" Grid.Column="0" ItemsSource="{Binding Predmeti}" HorizontalAlignment="Center" VerticalAlignment="Center" >
             <ListBox.ItemTemplate>
                 <DataTemplate>
                     <TextBlock Text="{Binding Naziv}" />
                 </DataTemplate>
             </ListBox.ItemTemplate>
         </ListBox>
         <ListBox x:Name="RadioLW" Grid.Row="0" Grid.Column="1" BorderThickness="0" ItemsSource="{Binding Predmeti}" HorizontalAlignment="Center" VerticalAlignment="Center" >
             <ListBox.ItemTemplate>
                  <DataTemplate>
                       <TextBlock Text="{Binding Ocjena}"/>
                  </DataTemplate>
             </ListBox.ItemTemplate>
          </ListBox>
          <Label Content="Prosjek Semestra :" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" />
          <Label x:Name="_prosjekSemestra"  Grid.Row="1" Grid.Column="1" ContentStringFormat="F2" Content="{Binding _prosjek, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" />
          <Label Content="Ostvareni ECTS-ovi :" HorizontalAlignment="right" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0" />
          <Label x:Name="_ectsSemestra"  Grid.Row="2" Grid.Column="1" Content="{Binding _ectsovi, Mode=OneWay}"  HorizontalAlignment="Center" VerticalAlignment="Center"/>
      </Grid.Children> 
   </Grid>
</TabItem>

Solution

  • This is how you define a style for any TabItem. In the example I created a white border and a black background for the Header content of the TabItem:

    <Style TargetType="{x:Type TabItem}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type TabItem}">
    
            <Border BorderBrush="White" BorderThickness="5" Margin="2">
              <Grid Width="100" Height="100" Background="Black">
                <ContentPresenter x:Name="ContentSite"
                                  VerticalAlignment="Center"
                                  HorizontalAlignment="Center"
                                  ContentSource="Header"
                                  RecognizesAccessKey="True"/>
              </Grid>
            </Border>
    
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>