9

Windows 8スタイル（以前のメトロ）を使用してWPFボタンを作成しています。

ボタンのフォーカスされた状態を無地の背景で表示したいと思います。マウスがコントロールの上にあるとき、ボタンをクリックできる視覚的な合図を作成するために、背景を少し暗くしたいと思います。

残念ながら、以下に記述したXAMLは機能しません。フォーカスされた状態は正しく表示されますが、マウスをコントロールの上に置くと、希望どおりに背景が暗くなりません。

<Color x:Key="DoxCycleGreen">
    #FF8DC63F
</Color>

<!-- Soft Interface : DoxCycle Green --> 
<Color x:Key="DoxCycleGreenSoft">
    #FFC0DC8F
</Color>

<Style x:Key="MetroButton" TargetType="{x:Type Button}">
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="RootElement">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup Name="CommonStates">
                            <VisualState Name="Normal" />
                            <VisualState Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="BackgroundColor" Storyboard.TargetProperty="Color" To="{StaticResource DoxCycleGreen}" Duration="0:0:0.150" />
                                    <ColorAnimation Storyboard.TargetName="FontColor" Storyboard.TargetProperty="Color" To="White" Duration="0:0:0.150" />
                                </Storyboard>
                            </VisualState>
                            <VisualState Name="Focused">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="BackgroundColor" Storyboard.TargetProperty="Color" To="{StaticResource DoxCycleGreenSoft}" Duration="0:0:0.150" />
                                    <ColorAnimation Storyboard.TargetName="FontColor" Storyboard.TargetProperty="Color" To="White" Duration="0:0:0.150" />
                                </Storyboard>
                            </VisualState>
                            <VisualState Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="BackgroundColor" Storyboard.TargetProperty="Color" To="Transparent" Duration="0:0:0.150" />
                                    <ColorAnimation Storyboard.TargetName="FontColor" Storyboard.TargetProperty="Color" To="{StaticResource DoxCycleGreen}" Duration="0:0:0.150" />
                                </Storyboard>
                            </VisualState>
                            <VisualState Name="Disabled">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="BorderColor" Storyboard.TargetProperty="Color" To="DarkGray" Duration="0:0:0.1" />
                                    <ColorAnimation Storyboard.TargetName="FontColor" Storyboard.TargetProperty="Color" To="DarkGray" Duration="0:0:0.1" />                                        
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>


                    <Grid Background="Transparent" >
                        <Border BorderThickness="1,1,1,1" Padding="2">
                            <Border.BorderBrush>
                                <SolidColorBrush x:Name="BorderColor" Color="{StaticResource DoxCycleGreen}"/>
                            </Border.BorderBrush>
                            <Border.Background>
                                <SolidColorBrush x:Name="BackgroundColor" Color="White"/>
                            </Border.Background>

                            <ContentPresenter 
                                              x:Name="ContentSite" 
                                              VerticalAlignment="Center" 
                                              HorizontalAlignment="Center" 
                                              ContentSource="Content">
                                <TextBlock.Foreground>
                                    <SolidColorBrush x:Name="FontColor" Color="{StaticResource DoxCycleGreen}"/>
                                </TextBlock.Foreground>
                            </ContentPresenter>
                        </Border>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
4

2 に答える 2

24

これで、コードをテストしました。ここでは、いくつかの問題が発生しています。ただし、主な問題は、WPFコントロールが一度に特定の状態グループの1つのビジュアル状態にしか存在できないことです。 また、ここにあるように、コントロールのフォーカスとマウスオーバーの両方が可能な場合、WPFは適用する状態を選択する必要があります（同じ状態グループにあるため、両方の状態を適用することはできません）。したがって、この場合は、Focused状態を維持し、MouseOver状態には送信しません。

これらの状態のそれぞれが異なる状態グループにある場合、コントロールは複数の状態になる可能性があります。このドキュメントから：

各VisualStateGroupには、相互に排他的なVisualStateオブジェクトのコレクションが含まれています。つまり、コントロールは常に各VisualStateGroup内のの1つの状態にあります。

したがって、このコードを修正するための最初のステップは、ボタンがフォーカス状態を表示してからマウスオーバー状態を表示できるようにする適切な状態グループを含めることです（他の可能性はこの変更によって修正できますが、それはあなたが気づいたものです特に、以前のアプローチでは得られなかったこと）。

これを行うには、州のグループと（特に）州の名前を正しく指定するように注意する必要があります。これは、Buttonクラスの内部コードが次のような呼び出しを行う可能性があるためですVisualStateManager.GoToState(this, "VerySpecificStateName", true);（これを確認するためにButtonクラスの実際のソースコードを検査していませんが、状態の変更を開始する必要がある場所にカスタムコントロールを記述しているので、それはそのようなものでなければなりません）。必要な状態グループと状態名のリストを取得するには、Expression Blendを使用してコントロールテンプレートの「コピーを編集」するか（必要な状態を入力します）、ここでそれらを見つけることができます。。そのドキュメントは、「FocusStates」と呼ばれる状態グループと、「Focused」および「Unfocused」と呼ばれるそのグループ内の2つの状態（他の状態グループおよび状態とともに）が必要であることを示しています。余談ですが、Buttonクラスがこれらの特定の名前付き状態によって状態変更を開始する方法を説明するために、「Focus」状態名を「MisspelledFocus」に置き換えて元のコードを変更すると、ボタンがその状態に入らないことがわかります。州。

この最初の変更を実装すると、次のようになります。

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal" />
        <VisualState x:Name="MouseOver">
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="BackgroundColor" 
                                                Storyboard.TargetProperty="Color" 
                                                To="{StaticResource DoxCycleGreen}" Duration="0:0:0.150" />
                <ColorAnimation Storyboard.TargetName="FontColor"                                           Storyboard.TargetProperty="Color" 
                                                To="White" Duration="0:0:0.150" />
            </Storyboard>
        </VisualState>
        <VisualState x:Name="Pressed">
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="BackgroundColor" 
                                                Storyboard.TargetProperty="Color" 
                                                To="Transparent" Duration="0:0:0.150" />
                <ColorAnimation Storyboard.TargetName="FontColor" 
                                                Storyboard.TargetProperty="Color" 
                                                To="{StaticResource DoxCycleGreen}" Duration="0:0:0.150" />
            </Storyboard>
          </VisualState>
          <VisualState x:Name="Disabled">
              <Storyboard>
                <ColorAnimation Storyboard.TargetName="BorderColor" 
                                                Storyboard.TargetProperty="Color" To="DarkGray" Duration="0:0:0.1" />
                <ColorAnimation Storyboard.TargetName="FontColor" 
                                                Storyboard.TargetProperty="Color" To="DarkGray" Duration="0:0:0.1" />                                        
              </Storyboard>
          </VisualState>
      </VisualStateGroup>
  <!-- Focus States -->
      <VisualStateGroup x:Name="FocusStates">
            <VisualState x:Name="Focused">
                <Storyboard>
                    <ColorAnimation Storyboard.TargetName="BackgroundColor" 
                                                Storyboard.TargetProperty="Color" 
                                                To="{StaticResource DoxCycleGreenSoft}" Duration="0:0:0.150" />
                    <ColorAnimation Storyboard.TargetName="FontColor" 
                                                Storyboard.TargetProperty="Color" 
                                                To="White" Duration="0:0:0.150" />
                  </Storyboard>
            </VisualState>
            <VisualState x:Name="Unfocused"/>
       </VisualStateGroup>
  </VisualStateManager.VisualStateGroups>

これで問題はある程度解決します。ただし、Expression Blendでこれを見ると、状態グループの見出しに警告が表示されます。

同じオブジェクトの変更に関するExpressionBlendの警告-複数の状態グループのプロパティ

複数の状態グループ（この場合は「BackgroundColor」という名前のオブジェクトの「Color」プロパティ）で同一のプロパティ/オブジェクトペアの値を変更しているため、この警告が表示されます。なぜこれが問題になるのでしょうか？私が以前に言ったことのために-それらの状態が異なる状態グループにある場合、コントロールが一度に複数の状態にある可能性があるという事実。したがって、ユーザーがボタンフォーカスを指定し、ユーザーがボタンの上にマウスを置いた場合、どちらの状態も同じ正確なプロパティを異なる方法でアニメーション化すると言うため、どのアニメーションを適用するかについてWPFがあいまいになる可能性があります。

また、この最初の変更では、私たちが望むものを完全に得ることはできません。ボタンにフォーカスを合わせてからカーソルを合わせると、「通常」から「フォーカス」、「マウスオーバー」に正しく移動します。ただし、ホバリングを中止すると、ボタンが「フォーカス済み」状態に戻らないことがわかります。

この問題を解決し、必要なものに似たものを実現するために使用できるアプローチはいくつかありますが、例として、このようなことを行うことができます。（これはこのための最もクリーンな実装ではないかもしれませんが、一般的なオブジェクト/プロパティの問題を修正します。）：

<Color x:Key="DoxCycleGreen">
    #FF8DC63F
</Color>

<SolidColorBrush x:Key="DoxCycleGreenBrush" Color="{StaticResource DoxCycleGreen}" />

<!-- Soft Interface : DoxCycle Green --> 
<Color x:Key="DoxCycleGreenSoft">
    #FFC0DC8F
</Color>

<SolidColorBrush x:Key="DoxCycleGreenSoftBrush" Color="{StaticResource DoxCycleGreenSoft}" />

<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="RootElement">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="BackgroundColor" 
                                                    Storyboard.TargetProperty="Color" 
                                                    To="{StaticResource DoxCycleGreen}" Duration="0:0:0.150" />
                                    <ColorAnimation Storyboard.TargetName="FontColor" 
                                                    Storyboard.TargetProperty="Color" 
                                                    To="White" Duration="0:0:0.150" />
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverBorder">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="BackgroundColor" 
                                                    Storyboard.TargetProperty="Color" 
                                                    To="Transparent" Duration="0:0:0.150" />
                                    <ColorAnimation Storyboard.TargetName="FontColor" 
                                                    Storyboard.TargetProperty="Color" 
                                                    To="{StaticResource DoxCycleGreen}" Duration="0:0:0.150" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="BorderColor" 
                                                    Storyboard.TargetProperty="Color" To="DarkGray" Duration="0:0:0.1" />
                                    <ColorAnimation Storyboard.TargetName="FontColor" 
                                                    Storyboard.TargetProperty="Color" To="DarkGray" Duration="0:0:0.1" />                                        
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <!-- Focus States -->
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.15"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Focused">
                                <Storyboard>

                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 
                                                                   Storyboard.TargetName="FocusBorder">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ContentSiteWhiteForeground">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>


                    <Grid Background="Transparent" >
                        <Border x:Name="BaseBorder" BorderThickness="1,1,1,1">
                            <Border.BorderBrush>
                                <SolidColorBrush x:Name="BorderColor" Color="{StaticResource DoxCycleGreen}"/>
                            </Border.BorderBrush>
                            <Border.Background>
                                <SolidColorBrush x:Name="BackgroundColor" Color="White"/>
                            </Border.Background>
                        </Border>
                        <Border x:Name="FocusBorder" 
                                BorderThickness="1,1,1,1" 
                                Background="{DynamicResource DoxCycleGreenSoftBrush}" 
                                Opacity="0" />

                        <Border x:Name="MouseOverBorder" 
                                BorderThickness="1,1,1,1"
                                Background="{DynamicResource DoxCycleGreenBrush}" 
                                Opacity="0" />

                        <ContentPresenter 
                            x:Name="ContentSite" 
                            VerticalAlignment="Center" 
                            HorizontalAlignment="Center" 
                            ContentSource="Content" Margin="2">
                            <TextBlock.Foreground>
                                <SolidColorBrush x:Name="FontColor" Color="{StaticResource DoxCycleGreen}"/>
                            </TextBlock.Foreground>
                        </ContentPresenter>

                        <ContentPresenter 
                            x:Name="ContentSiteWhiteForeground"

                            VerticalAlignment="Center" 
                            HorizontalAlignment="Center" 
                            ContentSource="Content" Margin="2" Opacity="0">
                            <TextBlock.Foreground>
                                <SolidColorBrush Color="White" />
                            </TextBlock.Foreground>
                        </ContentPresenter>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

これで、WPFのあいまいさが解消されたことがわかります。また、状態が「Normal」から「Focus」、「MouseOver」に変更され、「Focus」に戻った場合も正しく処理されるようになりました。

于 2013-02-01T19:23:16.710 に答える
1

これはジェイソンの答えを少し編集したものです。2 つの ContentPresenter を使用する彼のアプローチは、ショートカット キーの操作を壊すことが判明しました。小さな調整を行いました...ショートカットキーは機能するようになりましたが、トランジションアニメーションはあまり良くありません...

<Style x:Key="MetroButton" TargetType="{x:Type Button}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="MinHeight" Value="23"/>
    <Setter Property="MinWidth" Value="75"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="RootElement">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="BackgroundColor" 
                                                    Storyboard.TargetProperty="Color" 
                                                    To="{StaticResource DoxCycleGreen}" Duration="0:0:0.150" />
                                    <ColorAnimation Storyboard.TargetName="FontColor" 
                                                    Storyboard.TargetProperty="Color" 
                                                    To="White" Duration="0:0:0.150" />
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverBorder">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="BackgroundColor" 
                                                    Storyboard.TargetProperty="Color" 
                                                    To="Transparent" Duration="0:0:0.150" />
                                    <ColorAnimation Storyboard.TargetName="FontColor" 
                                                    Storyboard.TargetProperty="Color" 
                                                    To="{StaticResource DoxCycleGreen}" Duration="0:0:0.150" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="BorderColor" 
                                                    Storyboard.TargetProperty="Color" To="DarkGray" Duration="0:0:0.1" />
                                    <ColorAnimation Storyboard.TargetName="FontColor" 
                                                    Storyboard.TargetProperty="Color" To="DarkGray" Duration="0:0:0.1" />                                        
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <!-- Focus States -->
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.15"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 
                                                                   Storyboard.TargetName="FocusBorder">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="FontColor" Storyboard.TargetProperty="Color">
                                        <EasingColorKeyFrame KeyTime="0" Value="White"/>
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Grid Background="Transparent" >
                        <Border x:Name="BaseBorder" BorderThickness="1,1,1,1">
                            <Border.BorderBrush>
                                <SolidColorBrush x:Name="BorderColor" Color="{StaticResource DoxCycleGreen}"/>
                            </Border.BorderBrush>
                            <Border.Background>
                                <SolidColorBrush x:Name="BackgroundColor" Color="White"/>
                            </Border.Background>
                        </Border>
                        <Border x:Name="FocusBorder" 
                                BorderThickness="1" 
                                Background="{DynamicResource DoxCycleGreenSoftBrush}" 
                                Opacity="0" />

                        <Border x:Name="MouseOverBorder" 
                                BorderThickness="1"
                                Background="{DynamicResource DoxCycleGreenBrush}" 
                                Opacity="0" />

                        <ContentPresenter x:Name="ContentSite" 
                                          VerticalAlignment="Center" 
                                          HorizontalAlignment="Center" 
                                          RecognizesAccessKey="True"
                                          ContentSource="Content" Margin="8,4">
                            <TextBlock.Foreground>
                                <SolidColorBrush x:Name="FontColor" Color="{StaticResource DoxCycleGreen}"/>
                            </TextBlock.Foreground>
                        </ContentPresenter>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
于 2013-02-07T23:47:42.967 に答える