title: VisualStateManager change background of templated control when HorizontalAlignment = Stretch
body: <p>I am using this excellent <a href="http://shemesh.wordpress.com/2010/07/10/silverlight-gridsplitter-with-a-collapse%C2%A0button-%E2%80%93-best/" rel="nofollow noreferrer">CollapsibleGridSplitter</a> in a silverlight application. The control template for this is below. </p>
  
  <p>What I would like to do is when the splitter is vertical or horizontal, change the background of the CollapsibleGridSplitter. E.g. set Background to SplitterBackgroundV when VerticalAlignment=Stretch and Background to SplitterBackgroundH when HorizontalAlignment=Stretch. </p>
  
  <p><img src="https://i.stack.imgur.com/7pZQH.png" alt="enter image description here"></p>
  
  <p>(see the first line of the style which sets the default background <code>&lt;Setter Property="Background" Value="{StaticResource SplitterBackgroundV}" /&gt;</code>)</p>
  
  <p>Since this is Silverlight I need to use the VisualStateManager (which I know a lot less about than WPF triggers). </p>
  
  <p>Any suggestions? </p>
  
  <p>Thanks in advance!</p>
  
  <pre><code>  &lt;LinearGradientBrush x:Key="SplitterBackgroundV" StartPoint="0,0" EndPoint="1,0"&gt;
      &lt;GradientStop Color="#FFC3C3C3"/&gt;
      &lt;GradientStop Color="#FFDDDDDD" Offset="0.4"/&gt;
      &lt;GradientStop Color="#FFDDDDDD" Offset="0.6"/&gt;
      &lt;GradientStop Color="#FFC3C3C3" Offset="1"/&gt;
    &lt;/LinearGradientBrush&gt;
  
    &lt;LinearGradientBrush x:Key="SplitterBackgroundH" StartPoint="0,0" EndPoint="0,1"&gt;
      &lt;GradientStop Color="#FFC3C3C3"/&gt;
      &lt;GradientStop Color="#FFDDDDDD" Offset="0.4"/&gt;
      &lt;GradientStop Color="#FFDDDDDD" Offset="0.6"/&gt;
      &lt;GradientStop Color="#FFC3C3C3" Offset="1"/&gt;
    &lt;/LinearGradientBrush&gt;
  
    &lt;Style TargetType="Controls:CollapsibleGridSplitter"&gt;
      &lt;Setter Property="Background" Value="{StaticResource SplitterBackgroundV}" /&gt;
      &lt;Setter Property="IsTabStop" Value="False" /&gt;
      &lt;Setter Property="PreviewStyle" Value="{StaticResource GridSplitterPreviewStyle}" /&gt;
      &lt;Setter Property="VerticalHandleStyle" Value="{StaticResource VerticalGridSplitterHandleStyle}" /&gt;
      &lt;Setter Property="HorizontalHandleStyle" Value="{StaticResource HorizontalGridSplitterHandleStyle}" /&gt;
      &lt;Setter Property="HorizontalAlignment" Value="Center" /&gt;
      &lt;Setter Property="Template"&gt;
        &lt;Setter.Value&gt;
          &lt;ControlTemplate TargetType="Controls:CollapsibleGridSplitter"&gt;
            &lt;Grid x:Name="Root" IsHitTestVisible="{TemplateBinding IsEnabled}"&gt;
              &lt;VisualStateManager.VisualStateGroups&gt;
                &lt;VisualStateGroup x:Name="CommonStates"&gt;
                  &lt;VisualState x:Name="Normal" /&gt;
                  &lt;VisualState x:Name="MouseOver" /&gt;
                  &lt;VisualState x:Name="Disabled"/&gt;
                &lt;/VisualStateGroup&gt;
                &lt;VisualStateGroup x:Name="FocusStates"&gt;
                  &lt;VisualStateGroup.Transitions&gt;
                    &lt;VisualTransition GeneratedDuration="0" /&gt;
                  &lt;/VisualStateGroup.Transitions&gt;
                  &lt;VisualState x:Name="Unfocused" /&gt;
                  &lt;VisualState x:Name="Focused"&gt;
                    &lt;Storyboard&gt;
                      &lt;DoubleAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" /&gt;
                    &lt;/Storyboard&gt;
                  &lt;/VisualState&gt;
                &lt;/VisualStateGroup&gt;
              &lt;/VisualStateManager.VisualStateGroups&gt;
              &lt;Border x:Name="SplitterBackground" BorderThickness="1,0,1,0" BorderBrush="#FF999999" 
                      DataContext="{TemplateBinding IsCollapsed}"
                      IsHitTestVisible="{Binding Converter={StaticResource InverseBooleanConverter}}"
                      Opacity="{Binding Converter={StaticResource BooleanToValueConverter}}"
                      Background="{TemplateBinding Background}"&gt;
              &lt;/Border&gt;
              &lt;Grid x:Name="HorizontalTemplate"&gt;
                &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="*" /&gt;
                  &lt;ColumnDefinition Width="50" /&gt;
                  &lt;ColumnDefinition Width="*" /&gt;
                &lt;/Grid.ColumnDefinitions&gt;
                &lt;ToggleButton x:Name="HorizontalGridSplitterHandle" Grid.Column="1" IsHitTestVisible="True" Style="{TemplateBinding HorizontalHandleStyle}" RenderTransformOrigin="0.5,0.5" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsCollapsed, Mode=TwoWay}"&gt;
                  &lt;ToggleButton.RenderTransform&gt;
                    &lt;ScaleTransform ScaleY="1" /&gt;
                  &lt;/ToggleButton.RenderTransform&gt;
                &lt;/ToggleButton&gt;
              &lt;/Grid&gt;
              &lt;Grid x:Name="VerticalTemplate" Visibility="Collapsed"&gt;
                &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="*" /&gt;
                  &lt;RowDefinition Height="50" /&gt;
                  &lt;RowDefinition Height="*" /&gt;
                &lt;/Grid.RowDefinitions&gt;
                &lt;ToggleButton x:Name="VerticalGridSplitterHandle" Grid.Row="1" IsHitTestVisible="True" Style="{TemplateBinding VerticalHandleStyle}" RenderTransformOrigin="0.5,0.5" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsCollapsed, Mode=TwoWay}"&gt;
                  &lt;ToggleButton.RenderTransform&gt;
                    &lt;ScaleTransform ScaleX="1" /&gt;
                  &lt;/ToggleButton.RenderTransform&gt;
                &lt;/ToggleButton&gt;
              &lt;/Grid&gt;
              &lt;Rectangle x:Name="FocusVisual" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" /&gt;
            &lt;/Grid&gt;
          &lt;/ControlTemplate&gt;
        &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
    &lt;/Style&gt;
  </code></pre>