Style the DockTabItem header

Style the DockTabItem header

Posted by: rambabu on 12 September 2023, 6:42 am EST

• 

  rambabu

  • Post Options:
  • Link
    Copy

  Posted 12 September 2023, 6:42 am EST - Updated 12 September 2023, 6:47 am EST

  Hello, I am looking to style the DockTabItem header.
  
  I saw an example from the component one demos where the style is applied for the selected tab.
  
  

  I am looking to apply a different color to all the tabs in the DockTabControl, not just the selected tab. can you please let me know where can I update that.

  Thanks & Regards

• 

  nitin.sharma

  

  • Post Options:
  • Link
    Copy

  Posted 12 September 2023, 3:38 pm EST

  Hi,

  Thanks for reaching out to us with your query.
  
  In order to achieve your requirement, you need to set DockTabHeaderStyle and SelectedDockTabHeaderStyle to have different styles on Unselected Tabs and Selected Tab respectively.
  
  Style:

  
   <Style x:Key="CustomSelectedStyle" TargetType="c1:C1TabItemPresenter">
              <Setter Property="Background" Value="BlueViolet" />
              <Setter Property="Foreground" Value="White" />
              <Setter Property="TabShape" Value="Sloped" />
              <Setter Property="CornerRadius" Value="4"/>
              <Setter Property="Padding" Value="{Binding Padding, RelativeSource={RelativeSource AncestorType=c1:C1TabItem}}"/>
              <Setter Property="BorderBrush" Value="{Binding BorderBrush, RelativeSource={RelativeSource AncestorType=c1:C1TabItem}}"/>
              <Setter Property="MouseOverBrush" Value="{Binding MouseOverBrush, RelativeSource={RelativeSource AncestorType=c1:C1TabItem}}"/>
              <Setter Property="PressedBrush" Value="{Binding PressedBrush, RelativeSource={RelativeSource AncestorType=c1:C1TabItem}}"/>
          </Style>
          <Style x:Key="CustomHeaderStyle" TargetType="c1:C1TabItemPresenter">
              <Setter Property="Background" Value="Red" />
              <Setter Property="Foreground" Value="White" />
              <Setter Property="TabShape" Value="Sloped" />
              <Setter Property="CornerRadius" Value="4"/>
              <Setter Property="Padding" Value="{Binding Padding, RelativeSource={RelativeSource AncestorType=c1:C1TabItem}}"/>
              <Setter Property="BorderBrush" Value="{Binding BorderBrush, RelativeSource={RelativeSource AncestorType=c1:C1TabItem}}"/>
              <Setter Property="MouseOverBrush" Value="{Binding MouseOverBrush, RelativeSource={RelativeSource AncestorType=c1:C1TabItem}}"/>
              <Setter Property="PressedBrush" Value="{Binding PressedBrush, RelativeSource={RelativeSource AncestorType=c1:C1TabItem}}"/>
          </Style>

  Set SelectedDockTabHeaderStyle and DockTabHeaderStyle:

  <c1:C1DockControl SelectedDockTabHeaderStyle="{StaticResource CustomSelectedStyle}" DockTabHeaderStyle="{StaticResource CustomHeaderStyle}" >
  ..............
  ..............
  </c1:C1DockControl>

  Please refer to the attached sample for full implementation: DockControlDemoNet6.zip

  Best Regards,
  
  Nitin