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

Question

用鼠标按下按钮来设置按钮...我设法设置了按钮的样式(纯红色),但我希望它在鼠标悬停时变为纯黑色.我是XAML的新手,我可以看到它需要某种类型的故事板/动画......不确定如何做到这一点.

任何帮助将不胜感激.

Answer 1

这与WPF到Silverlight不同.在WPF中,Rob的答案是正确的.

在Silverlight中,这不起作用.Silverlight使用VisualStateManager而不是触发器.这个代码更复杂,但有些人觉得这样更好.您最终必须在您的样式中创建控件模板.(有关定义控件模板的信息,请参阅本文.创建类似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在上面所做的那样,在样式中指定默认前景色也很重要.如果您在控件上指定它,它将覆盖样式中的值.

请注意,可以从WPF Toolkit中获取VisualStateManager,以便在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,其颜色由故事板更改.

当然,这应该通过Style来完成.

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>