スタイリングコントロール：異なる 'VisualState（PointerOver、Pressed、...）のスタイルを上書きする方法

Question

ホバー状態などをどうやって扱うのですか？

一つは、ButtonためSystemControlHighlightBaseHighBrushようなブラシを上書きすることができ：

<SolidColorBrush x:Key="SystemControlHighlightBaseHighBrush" Color="White" /> 

他のコントロールは、そのブラシを使用している場合、それはまた、所望されないこの値をとります。ここで私はObjectAnimationUsingKeyFrames内の値を変更します

<!-- Default style for Windows.UI.Xaml.Controls.Button --> 
<Style TargetType="Button"> 
    <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /> 
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> 
    <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" /> 
    <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" /> 
    <Setter Property="Padding" Value="8,4,8,4" /> 
    <Setter Property="HorizontalAlignment" Value="Left" /> 
    <Setter Property="VerticalAlignment" Value="Center" /> 
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> 
    <Setter Property="FontWeight" Value="Normal" /> 
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /> 
    <Setter Property="UseSystemFocusVisuals" Value="True" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
     <ControlTemplate TargetType="Button"> 
      <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"> 
      <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup x:Name="CommonStates"> 
       <VisualState x:Name="Normal"> 
        <Storyboard> 
        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="PointerOver"> 
        <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                 Storyboard.TargetProperty="BorderBrush"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" /> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                 Storyboard.TargetProperty="Foreground"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
        </ObjectAnimationUsingKeyFrames> 
        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="Pressed"> 
        <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
                 Storyboard.TargetProperty="Background"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" /> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                 Storyboard.TargetProperty="BorderBrush"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                 Storyboard.TargetProperty="Foreground"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
        </ObjectAnimationUsingKeyFrames> 
        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="Disabled"> 
        <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
                 Storyboard.TargetProperty="Background"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                 Storyboard.TargetProperty="Foreground"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                 Storyboard.TargetProperty="BorderBrush"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" /> 
        </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
       </VisualStateGroup> 
      </VisualStateManager.VisualStateGroups> 
      <ContentPresenter x:Name="ContentPresenter" 
           BorderBrush="{TemplateBinding BorderBrush}" 
           BorderThickness="{TemplateBinding BorderThickness}" 
           Content="{TemplateBinding Content}" 
           ContentTransitions="{TemplateBinding ContentTransitions}" 
           ContentTemplate="{TemplateBinding ContentTemplate}" 
           Padding="{TemplateBinding Padding}" 
           HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
           AutomationProperties.AccessibilityView="Raw"/> 
      </Grid> 
     </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

：私が見つけた他のオプションはデフォルトのスタイルを上書きすることです。しかし、今後のバージョンのWindowsでデフォルトのスタイルが変更された場合はどうなりますか？

現在、私はデフォルトのスタイルを上書きする以外の方法はありません。おそらく、いくつかのイベントを上書きして、例えば、その国境の色。しかし、私はいつもすべてのイベントが利用可能ではないと思うし、毎回あなたのカスタムボタンを書く必要があります。

1つの値だけを変更するための完全なスタイルを上書きするのは何とか間違っています。あなたはそのようなケースをどのように扱いますか？

Answer 1

TL;はい：完全テンプレート（スタイルではない）を変更するのが最も一般的なシナリオです。

ここで考慮すべき異なる点があります。

• あなたのすべてのコントロールは、アプリケーション全体で一貫性のあるレイアウトを持っていると思います。

だから私の最初のオプションは、アプリケーションのための新しいテーマを定義し、実際にあなたの新しいブランドを達成するために必要なSystemControlHighlightBaseHighBrushや他ThemeResourceリソースを上書きすることであろう。

• レイアウトを変更するコントロールは1つだけです。いくつかの正当な理由のために、あなたの新しいテーマに変更するThemeResourceを使用して、すべてのコントロールをしたくない場合は

、テンプレートが1つのブロックとして、（完全なコントロールテンプレートを上書きする必要があるため、ます全部または何もなし）。他のすべてのプロパティ設定子（前景、背景、パディングなど）を上書きする必要はありません。

非常に運が良ければ、変更しようとしているプロパティはテンプレート付きプロパティであり、レイアウトを修正するために単一のプロパティ設定ツールを使用できます。

このアプローチの欠点は、SDKの将来のバージョンでは、特定のコントロールのテンプレートを変更できることです。その例として、Windows 8/8.1と10の間のGridView/GridViewItemスタイルがあります。これまでスタイルの下位互換性がほとんどありました。つまり、アプリケーションは動作し続けますが、最新のレイアウトガイドラインやミスいくつかのパフォーマンスの改善。そのため、に最新のテンプレート（時間が許せば）にカスタムレイアウトの変更を再適用するのがベストプラクティスです。

'ダーティ'ソリューションは、イベントに基づいて実行時にプロパティを変更するためにビジュアルツリーに「ハッキング」しています。しかしこれにより、今後のSDKアップデートでの変更の可能性が妨げられることはありませんので、これを有効なオプションとはみなしません。最終的なアプローチは、カスタムコントロールで起こっている

カスタムで行く

• を制御し、独自のテンプレート（新しいSDKのバージョンと、再び同じ問題）を定義するか、デフォルトのテンプレートを使用してOnApplyTemplateをオーバーライドして、微調整ビジュアルツリーから取得することによって変更したいプロパティです。ただし、将来のSDKバージョンではツリー内でコントロール/状態が破棄され、コードが破損する可能性があることにも同じ注意が必要です。

  結論：いずれかのオプションを選択すると、将来のSDKバージョンで実装が中断される可能性があります。