I have TabItem style in my application, I decided to use VisualStateManager instead of ordinary triggers. When I defined the states Normal and MouseOver everything worked fine. But after adding Selected , Unselected and VisualStateGroup.Transitions , when you hover the cursor on one of the TabItem s, began to receive a NullReferenceException . Tell me what am I doing wrong?

The style in question:

 <Style TargetType="{x:Type TabItem}"> <Style.Setters> <Setter Property="Background"> <Setter.Value> <SolidColorBrush Color="DimGray" Opacity="0.1"/> </Setter.Value> </Setter> <Setter Property="BorderBrush" Value="Black"/> <Setter Property="BorderThickness" Value="0.5"/> <Setter Property="Height" Value="30"/> <Setter Property="OverridesDefaultStyle" Value="True"/> <Setter Property="Width" Value="126"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabItem}"> <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0,0,6,6" Margin="0,0,6,0"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualStateGroup.States> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"> <ColorAnimation Duration="0:0:0.1" To="Black"/> </Storyboard> </VisualState> <VisualState x:Name="Selected"> <Storyboard Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.BorderThickness)"> <ThicknessAnimation Duration="0:0:0.1" To="1"/> </Storyboard> </VisualState> <VisualState x:Name="Unselected"> <Storyboard Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.BorderThickness)"> <ThicknessAnimation Duration="0:0:0.1" To="0.5"/> </Storyboard> </VisualState> </VisualStateGroup.States> <VisualStateGroup.Transitions> <VisualTransition From="MouseOver" To="Normal"> <Storyboard Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"> <ColorAnimation Duration="0:0:0.1" To="DimGray"/> </Storyboard> </VisualTransition> </VisualStateGroup.Transitions> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter ContentSource="Header" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style.Setters> </Style>

    1 answer 1

    I figured it out myself, this is how it works without errors:

     <Style TargetType="{x:Type TabItem}"> <Style.Setters> <Setter Property="Background"> <Setter.Value> <SolidColorBrush Color="DimGray" Opacity="0.1"/> </Setter.Value> </Setter> <Setter Property="BorderBrush" Value="Black"/> <Setter Property="BorderThickness" Value="0.5,0,0.5,0.5"/> <Setter Property="Height" Value="30"/> <Setter Property="OverridesDefaultStyle" Value="True"/> <Setter Property="Width" Value="126"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabItem}"> <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0,0,6,6" Margin="0,0,6,0"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualStateGroup.States> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"> <ColorAnimation Duration="0:0:0.1" To="Black"/> </Storyboard> </VisualState> </VisualStateGroup.States> </VisualStateGroup> <VisualStateGroup x:Name="SelectionStates"> <VisualStateGroup.States> <VisualState x:Name="Selected"> <Storyboard> <ThicknessAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.BorderThickness)" Duration="0:0:0.1" To="1,0,1,1"/> <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Duration="0:0:0.1" To="Black"/> </Storyboard> </VisualState> <VisualState x:Name="Unselected"/> </VisualStateGroup.States> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0:0:0.1" From="Selected" To="Unselected"> <Storyboard> <ThicknessAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.BorderThickness)" Duration="0:0:0.1" To="0.5,0,0.5,0.5"/> <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Duration="0:0:0.1" To="DimGray"/> </Storyboard> </VisualTransition> </VisualStateGroup.Transitions> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter ContentSource="Header" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style.Setters> </Style>