VisualStateManagerは、テンプレートコントロールの背景をHorizo​​ntalAlignment = Stretchのときに変更します

Question

私はこの優秀なCollapsibleGridSplitterを銀色のアプリケーションで使用しています。このための制御テンプレートは以下のとおりです。

私がしたいのは、スプリッターが縦または横の場合、CollapsibleGridSplitterの背景を変更することです。例えば。 VerticalAlignment = StretchのときはBackgroundをSplitterBackgroundVに設定し、Horizo​​ntalAlignment = StretchのときはSplitterBackgroundHに背景を設定します。

（デフォルトの背景<Setter Property="Background" Value="{StaticResource SplitterBackgroundV}" />を設定したスタイルの最初の行を参照）

これは私が（私はWPFがトリガーに比べて約はるかに少ないを知っている）VisualStateManagerを使用する必要がシルバーなので。

提案がありますか？

ありがとうございます！

<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」の境界線とテンプレートのためのグリッドで、それを2回を貼り付ける - 各インスタンスごとに異なる名前を付け（し、それに応じてGrid.ColumnSpanとGrid.RowSpanを設定することを忘れないでください）。新しい境界線ごとに、必要な背景を設定します。

Answer 2

私はVisualStateManagerが適切なアプローチではないと思います。代わりに、コントロールをサブクラス化し、OnApplyTemplateをオーバーライドしてから、自分でバックグラウンドプロパティを設定します。代わりに、PropertyChangedイベントをリッスンし、それに応じて背景をスワップする添付プロパティを宣言することもできます。