VisualStateManager change background of templated control when HorizontalAlignment = Stretch

Question

I am using this excellent CollapsibleGridSplitter in a silverlight application. The control template for this is below.

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.

(see the first line of the style which sets the default background <Setter Property="Background" Value="{StaticResource SplitterBackgroundV}" />)

Since this is Silverlight I need to use the VisualStateManager (which I know a lot less about than WPF triggers).

Any suggestions?

Thanks in advance!

  <LinearGradientBrush x:Key="SplitterBackgroundV" StartPoint="0,0" EndPoint="1,0">
    <GradientStop Color="#FFC3C3C3"/>
    <GradientStop Color="#FFDDDDDD" Offset="0.4"/>
    <GradientStop Color="#FFDDDDDD" Offset="0.6"/>
    <GradientStop Color="#FFC3C3C3" Offset="1"/>
  </LinearGradientBrush>

  <LinearGradientBrush x:Key="SplitterBackgroundH" StartPoint="0,0" EndPoint="0,1">
    <GradientStop Color="#FFC3C3C3"/>
    <GradientStop Color="#FFDDDDDD" Offset="0.4"/>
    <GradientStop Color="#FFDDDDDD" Offset="0.6"/>
    <GradientStop Color="#FFC3C3C3" Offset="1"/>
  </LinearGradientBrush>

  <Style TargetType="Controls:CollapsibleGridSplitter">
    <Setter Property="Background" Value="{StaticResource SplitterBackgroundV}" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="PreviewStyle" Value="{StaticResource GridSplitterPreviewStyle}" />
    <Setter Property="VerticalHandleStyle" Value="{StaticResource VerticalGridSplitterHandleStyle}" />
    <Setter Property="HorizontalHandleStyle" Value="{StaticResource HorizontalGridSplitterHandleStyle}" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="Controls:CollapsibleGridSplitter">
          <Grid x:Name="Root" IsHitTestVisible="{TemplateBinding IsEnabled}">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="MouseOver" />
                <VisualState x:Name="Disabled"/>
              </VisualStateGroup>
              <VisualStateGroup x:Name="FocusStates">
                <VisualStateGroup.Transitions>
                  <VisualTransition GeneratedDuration="0" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Unfocused" />
                <VisualState x:Name="Focused">
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <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}">
            </Border>
            <Grid x:Name="HorizontalTemplate">
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="50" />
                <ColumnDefinition Width="*" />
              </Grid.ColumnDefinitions>
              <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}">
                <ToggleButton.RenderTransform>
                  <ScaleTransform ScaleY="1" />
                </ToggleButton.RenderTransform>
              </ToggleButton>
            </Grid>
            <Grid x:Name="VerticalTemplate" Visibility="Collapsed">
              <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="50" />
                <RowDefinition Height="*" />
              </Grid.RowDefinitions>
              <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}">
                <ToggleButton.RenderTransform>
                  <ScaleTransform ScaleX="1" />
                </ToggleButton.RenderTransform>
              </ToggleButton>
            </Grid>
            <Rectangle x:Name="FocusVisual" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

Answer 1

Copy the "SplitterBackground" border and paste it two times in the grids for of the template - naming it differently for each instance (and remember to set Grid.ColumnSpan and Grid.RowSpan accordingly). For each new border, set the background that you need.

Answer 2

I don't think VisualStateManager is the right approach. Instead, subclass the control, then override OnApplyTemplate and then set the background property yourself. An alternative is to declare an attached property that listens to PropertyChanged events and swaps the background accordingly.