Wpf VisualStateManager--当控件处于焦点时显示鼠标悬停状态

我正在使用Windows8样式（以前是metro）创建一个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>

#FF8DC63F
#FFC0DC8F

我现在已经测试了您的代码。你这里有几个问题。但是，主要的问题是WPF控件一次只能处于特定状态组的一个可视状态。在这里的情况下，控件可以被聚焦和鼠标移动，WPF必须选择要应用的状态（它不能应用两个状态，因为它们处于同一状态组）。因此，在本例中，它只是将其保持在聚焦状态，而不是将其发送到鼠标悬停状态

如果控件的每个状态都位于不同的状态组中，则控件可以处于多个状态。发件人：

每个VisualStateGroup包含一组互斥的VisualState对象。也就是说，控件在每个VisualState组中始终恰好处于一种状态

因此，我们更正此代码的第一步是包含适当的状态组，这些状态组将允许按钮能够显示其聚焦状态，然后显示其鼠标悬停状态（其他可能的情况可以通过此更改更正，但这是您特别注意到的，您以前的方法没有得到的）

要做到这一点，我们需要小心地正确命名我们的州组和（特别是）我们的州名称。这是因为Button类内部的代码可能会发出类似于

VisualStateManager.goState的调用（这是“verysSpecificStateName”，true）（我没有检查Button类的实际源代码来验证这一点，但是在编写了需要启动状态更改的自定义控件之后，我知道它一定是这样的）。为了获得所需状态组和状态名称的列表，我们可以使用Expression Blend来“编辑”控件模板的副本（这将为我们填充所需的状态），或者找到它们。这些文件向我们表明，我们需要一个名为“焦点国家”的国家小组，以及该小组中的两个名为“焦点”和“非焦点”的国家（以及其他国家小组和国家）。另一方面，为了说明Button类是如何通过这些特定的命名状态启动其状态更改的，如果您通过将“焦点”状态名称替换为“拼写错误的焦点”来更改原始代码，您将看到您的按钮从未进入该状态

实施这第一个变更，我们可能会得到如下结果：

<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中查看此项，您会在状态组标题中注意到一条警告：


我们之所以收到此警告，是因为我们正在更改多个状态组中相同属性/对象对的值—在本例中是名为“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>

<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>