[WPF] … Schicker Tabcontrol-Style
eilweise ist es ja echt nicht schön, wie Microsoft den Standardstyle in WPF umgesetzt hat.
Das trifft zum Beispiel auch beim Tabcontrol zu. Gefällt mir gar nicht.
Das geht besser, und zwar wie folgt:
Der eigentliche Style im Usercontrol / im WPF-Fenster:
<UserControl.Resources>
<Color x:Key="BorderColor_Base" R="113" G="107" B="119" A="255" />
<Color x:Key="Textfarbe" R="255" G="255" B="255" A="255"/>
<Color x:Key="DisabledBorder" R="81" G="77" B="84" A="255" />
<Color x:Key="HoverBorder" R="243" G="253" B="0" A="255" />
<Color x:Key="SelectedTab" R="21" G="158" B="0" A="255"/>
<!-- Margin -->
<Thickness x:Key="TabItemMargin_Selected" Left="2" Top="2" Right="2" Bottom="2" />
<Thickness x:Key="TabItemMargin_Hover_Final" Left="2" Top="2" Right="2" Bottom="2" />
<Thickness x:Key="TabItemMargin_Hover_Start" Left="2" Top="2" Right="2" Bottom="2" />
<Thickness x:Key="TabItemMargin_Base" Left="2" Top="2" Right="2" Bottom="2" />
<!-- Unselected -->
<LinearGradientBrush x:Key="TabItem_Border_Unselected" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.98" Color="Transparent"/>
<GradientStop Offset="0.99" Color="{StaticResource BorderColor_Base}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TabItem_TextBrush_Unselected" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.98" Color="Transparent"/>
<GradientStop Offset="0.99" Color="{StaticResource Textfarbe}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TabItem_BackgroundBrush_Unselected" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.98" Color="Transparent"/>
<GradientStop Offset="0.99" Color="{StaticResource BorderColor_Base}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<!-- Disabled -->
<LinearGradientBrush x:Key="TabItem_DisabledBorderBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.98" Color="Transparent"/>
<GradientStop Offset="0.99" Color="{StaticResource DisabledBorder}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TabItem_BackgroundBrush_Disabled" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.98" Color="Transparent"/>
<GradientStop Offset="0.99" Color="{StaticResource DisabledBorder}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TabItem_TextBrush_Disabled" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.98" Color="Transparent"/>
<GradientStop Offset="0.99" Color="{StaticResource Textfarbe}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<!-- MouseHover -->
<LinearGradientBrush x:Key="TabItem_TextBrush_Hover" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.98" Color="Transparent"/>
<GradientStop Offset="0.99" Color="{StaticResource Textfarbe}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TabItem_HoverBorderBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.98" Color="Transparent"/>
<GradientStop Offset="0.99" Color="{StaticResource HoverBorder}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TabItem_HoverBackgroundBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.98" Color="Transparent"/>
<GradientStop Offset="0.99" Color="{StaticResource HoverBorder}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<!-- aktive,selektiert-->
<LinearGradientBrush x:Key="TabItem_BorderBrush_Selected" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.90" Color="Transparent"/>
<GradientStop Offset="0.99" Color="{StaticResource SelectedTab}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TabItem_BackgroundBrush_Selected" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.96" Color="Transparent"/>
<GradientStop Offset="0.99" Color="{StaticResource SelectedTab}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TabItem_TextBrush_Selected" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.98" Color="Transparent"/>
<GradientStop Offset="0.99" Color="{StaticResource Textfarbe}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border" Margin="0,0,0,0" Background="Transparent" BorderBrush="Black" BorderThickness="1,1,1,1" CornerRadius="2">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True">
<ContentPresenter.LayoutTransform>
<RotateTransform Angle="0" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Border.IsMouseOver" Value="False"/>
<Condition Property="IsSelected" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Panel.ZIndex" Value="90" />
<Setter TargetName="Border" Property="Background" Value="{StaticResource TabItem_BackgroundBrush_Unselected}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource TabItem_Border_Unselected}" />
<Setter Property="Foreground" Value="{StaticResource TabItem_TextBrush_Unselected}" />
<Setter TargetName="Border" Property="Margin" Value="{StaticResource TabItemMargin_Base}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Panel.ZIndex" Value="80" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource TabItem_DisabledBorderBrush}" />
<Setter TargetName="Border" Property="Background" Value="{StaticResource TabItem_BackgroundBrush_Disabled}" />
<Setter Property="Foreground" Value="{StaticResource TabItem_TextBrush_Disabled}" />
<Setter TargetName="Border" Property="Margin" Value="{StaticResource TabItemMargin_Base}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Border.IsMouseOver" Value="True"/>
<Condition Property="IsSelected" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Panel.ZIndex" Value="99" />
<Setter Property="Foreground" Value="{StaticResource TabItem_TextBrush_Hover}" />
<Setter Property="BorderBrush" TargetName="Border" Value="{StaticResource TabItem_HoverBorderBrush}" />
<!--<Setter TargetName="Border" Property="BorderThickness" Value="2,1,1,1" />-->
<Setter Property="Background" TargetName="Border" Value="{StaticResource TabItem_HoverBackgroundBrush}"/>
<Setter TargetName="Border" Property="Margin" Value="{StaticResource TabItemMargin_Hover_Final}"/>
</MultiTrigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource TabItem_BorderBrush_Selected}" />
<Setter TargetName="Border" Property="Background" Value="{StaticResource TabItem_BackgroundBrush_Selected}" />
<!--<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />-->
<Setter Property="Foreground" Value="{StaticResource TabItem_TextBrush_Selected}"/>
<Setter TargetName="Border" Property="Margin" Value="{StaticResource TabItemMargin_Selected}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
Das Ergebnis kann sich durchaus sehen lassen 🙂
Der grün unterstrichene Tab ist aktiv, der gelbe ist der, welcher gerade mit der Maus fokussiert ist. Grau ist ein Tab, der aktiviert ist, aber momentan weder aktiv noch mit der Maus fokussiert.
