当Horizo​​ntalAlignment = Stretch时，VisualStateManager更改模板控件的背景

Question

我在Silverlight应用程序中使用这个优秀的CollapsibleGridSplitter。此控件模板如下所示。

我想要做的是当分割器是垂直或水平时，更改CollapsibleGridSplitter的背景。例如。当VerticalAlignment = Stretch时将背景设置为SplitterBackgroundV，当Horizo​​ntalAlignment = Stretch时将背景设置为SplitterBackgroundH。

（请参阅设置默认背景<Setter Property="Background" Value="{StaticResource SplitterBackgroundV}" />）

的样式的第一行

由于这是Silverlight，我需要使用VisualStateManager（我知道的比WPF触发器少得多）。

有什么建议吗？

提前致谢！

  <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

复制“SplitterBackground”边框并将其粘贴到模板的网格中两次 - 为每个实例命名不同（并记住相应地设置Grid.ColumnSpan和Grid.RowSpan。对于每个新边框，请设置所需的背景。

Answer 2

我不认为VisualStateManager是正确的方法。相反，将控件子类化，然后重写OnApplyTemplate，然后自己设置背景属性。另一种方法是声明一个附加属性，该属性侦听PropertyChanged事件并相应地交换背景。