Override VisualStateManager behavior defined in ControlTemplate

39 Views Asked by At

For my project styles I'm currently using Material Design library. With all the things that it provides I'm totally fine, except the style of the ListBoxItem on MouseOver, Selected and etc. I looked at the source code of the component that I use.

<Style x:Key="MaterialDesignNavigationListBoxItem" TargetType="{x:Type ListBoxItem}">
    <Setter Property="Background" Value="{DynamicResource MaterialDesignBody}" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="FontWeight" Value="Medium" />
    <Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}" />
    <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
    <Setter Property="Margin" Value="4,2,4,2" />
    <Setter Property="Padding" Value="8" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListBoxItem}">
          <Border x:Name="border"
                  Margin="{TemplateBinding Margin}"
                  ClipToBounds="{TemplateBinding ClipToBounds}"
                  CornerRadius="{Binding Path=(wpf:ListBoxItemAssist.CornerRadius), RelativeSource={RelativeSource TemplatedParent}}">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup Name="CommonStates">
                <VisualStateGroup.Transitions>
                  <VisualTransition GeneratedDuration="0:0:0.3" To="Normal">
                    <VisualTransition.GeneratedEasingFunction>
                      <CircleEase EasingMode="EaseOut" />
                    </VisualTransition.GeneratedEasingFunction>
                  </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState Name="Normal" />
                <VisualState Name="MouseOver">
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="MouseOverBorder"
                                     Storyboard.TargetProperty="Opacity"
                                     To="0.1"
                                     Duration="0" />
                  </Storyboard>
                </VisualState>
                <VisualState Name="Disabled" />
              </VisualStateGroup>
              <VisualStateGroup Name="SelectionStates">
                <VisualStateGroup.Transitions>
                  <VisualTransition GeneratedDuration="0:0:0.6" />
                </VisualStateGroup.Transitions>
                <VisualState Name="Selected">
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="SelectedBorder"
                                     Storyboard.TargetProperty="Opacity"
                                     To="0.12"
                                     Duration="0" />
                  </Storyboard>
                </VisualState>
                <VisualState Name="Unselected" />
                <VisualState Name="SelectedUnfocused">
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="SelectedBorder"
                                     Storyboard.TargetProperty="Opacity"
                                     To="0.12"
                                     Duration="0" />
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid>
              <Grid.Clip>
                <MultiBinding Converter="{StaticResource BorderClipConverter}">
                  <Binding ElementName="border" Path="ActualWidth" />
                  <Binding ElementName="border" Path="ActualHeight" />
                  <Binding ElementName="border" Path="CornerRadius" />
                  <Binding ElementName="border" Path="BorderThickness" />
                </MultiBinding>
              </Grid.Clip>
              <Border x:Name="MouseOverBorder"
                      Background="{TemplateBinding Foreground, Converter={StaticResource BrushRoundConverter}}"
                      Opacity="0" />

              <Border x:Name="SelectedBorder"
                      Background="{TemplateBinding Background}"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}"
                      Opacity="0" />
              <wpf:Ripple Padding="{TemplateBinding Padding}"
                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                          Content="{TemplateBinding Content}"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                          Feedback="{TemplateBinding Foreground, Converter={StaticResource BrushRoundConverter}}"
                          Focusable="False"
                          RecognizesAccessKey="False"
                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
            </Grid>
          </Border>
          <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="False">
              <Setter Property="Opacity" Value=".56" />
            </Trigger>

            <Trigger Property="IsSelected" Value="False">
              <Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}" />
            </Trigger>

          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
    <Setter Property="wpf:ListBoxItemAssist.CornerRadius" Value="4" />

    <Setter Property="wpf:ThemeAssist.TriggerBrush" Value="{DynamicResource MaterialDesignPaper}" />
  </Style>

As you can see, the behavior of MouseOver and other states defined in VisualStateManager of ControlTemplate. If I try to make my custom ListBoxItem based on this one I still cannot override Template property because then the entire component will become erased. I thought I could try to do this with Style.Triggers but haven't come up with idea how to do this exactly.

Can anyone explain me please is it even possible to do something in the situation? Thanks

0

There are 0 best solutions below