在 Silverlight/WPF 按钮上设置 MouseOver 样式

Question

正在努力为按钮设置鼠标样式...我已经设法设置了按钮的样式（纯红色），但我希望它在鼠标悬停时变为纯黑色。我是 XAML 的新手，我可以看到它需要某种类型的故事板/动画......不知道到底该怎么做。

任何帮助将不胜感激。

Answer 1

这与 WPF 和 Silverlight 不同。在 WPF 中，Rob 的回答是正确的。

在 Silverlight 中，这不起作用。 Silverlight 使用 VisualStateManager 而不是触发器。这个的代码比较复杂，但是有些人觉得这样更好。你最终不得不以你的风格创建一个控制模板。 （有关定义控件模板的信息，请参阅This Article。创建类似 ControlTemplate 的最简单方法是使用 Expression Blend，它具有为您完整提取现有模板的功能。）

在控件模板中，定义你关心的 VisualState 和你想要发生的事情。

<VisualStateGroup x:Name="CommonStateGroup">
    <VisualState x:Name="MouseOverState">
        <Storyboard>
            <ColorAnimation Storyboard.TargetName="TopmostElementOfTheTemplate" 
                                       Storyboard.TargetProperty="Foreground" 
                                       To="Black"
                                       Duration="00:00:00" >
            </ColorAnimation>
        </Storyboard>
    </VisualState>
</VisualStateGroup>
...

在样式中指定默认前景色也很重要，就像上面 Rob 所做的那样。如果您在控件上指定它，它将覆盖样式中的值。

请注意，可以将 VisualStateManager 从 WPF 工具包中取出，以便在 WPF 中获得类似的解决方案。

Answer 2

在 WPF 中，除非需要动画，否则不需要故事板：

    <Button Content="Hover me">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Background" Value="Red"/>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Black"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>

Answer 3

在 WPF 中：

在您的资源中定义故事板（可通过按钮或其样式访问的任何位置）：

  <Window.Resources>
    <Storyboard x:Key="buttonAnim">
      <ColorAnimation Storyboard.TargetName="_back" Storyboard.TargetProperty="Color" To="Red" />
    </Storyboard>
  </Window.Resources>

在按钮中，创建一个启动动画的事件触发器：

<Button>
   <Button.Background>
      <SolidColorBrush Color="Blue" x:Name="_back" />
   </Button.Background>
   <Button.Triggers>
      <EventTrigger RoutedEvent="Button.MouseEnter">
          <BeginStoryboard Storyboard="{StaticResource buttonAnim}" />
      </EventTrigger>
   </Button.Triggers>
   Button Text
</Button>

您要制作动画的内容必须明确存在。这就是为什么背景显式设置为 SolidColorBrush，其颜色由情节提要更改。

当然，这应该通过样式来完成。

Silverlight 仅支持触发器上的 Loaded 事件，因此您需要将真实事件处理程序附加到按钮并以编程方式启动情节提要。

Answer 4

是的，视觉状态管理器是这里的关键。我刚刚将一个免费的 Silverlight 主题上传到我的博客 http://www.blackspike.com/site/silverlight/free-silverlight-4-beta-skin - 你可以在那里自行设置样式，这里是样式按钮的 xaml

    <SolidColorBrush x:Key="Brush_WindowBackground" Color="#FF333333"/>

<SolidColorBrush x:Key="Brush_Foreground" Color="#FFE5E5E5"/>

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

<LinearGradientBrush x:Key="Brush_BackgroundGrad" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF3F3F3F" Offset="0"/>
    <GradientStop Color="#FF353535" Offset="0.3"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="Brush_BackgroundGrad_Over" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF474747" Offset="0"/>
    <GradientStop Color="#FF2F2F2F" Offset="0.3"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="Brush_BackgroundGrad_Down" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF1D1D1D" Offset="0"/>
    <GradientStop Color="#FF181818" Offset="0.3"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="Brush_BorderInner" Color="Black"/>

<SolidColorBrush x:Key="Brush_BorderOuter" Color="#FF434343"/>


<Style TargetType="Button">
    <Setter Property="Foreground" Value="{StaticResource Brush_Foreground}"/>
    <Setter Property="FontFamily" Value="Arial"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="Padding" Value="15,10"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.2"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="background_over" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="background_down" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="0.2" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Rectangle x:Name="blackframe" Stroke="{StaticResource Brush_BorderOuter}" Fill="{StaticResource Brush_BorderInner}"/>
                    <Rectangle x:Name="background" Margin="2" Fill="{StaticResource Brush_BackgroundGrad}"/>
                    <Rectangle x:Name="background_over" Margin="2" Opacity="0" Fill="{StaticResource Brush_BackgroundGrad_Over}"/>
                    <Rectangle x:Name="background_down" Margin="2" Opacity="0" Fill="{StaticResource Brush_BackgroundGrad_Down}"/>
                    <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{TemplateBinding Padding}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>