13

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

任何帮助将不胜感激。

4

4 回答 4

17

这与 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 工具包中获取 VisualStateManager，以便在 WPF 中获得类似的解决方案。

于 2010-03-08T14:34:35.807 回答
13

在 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>
于 2010-03-08T14:00:43.897 回答
7

在 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 事件，因此您需要将真实事件处理程序附加到按钮并以编程方式启动情节提要。

于 2010-03-08T13:54:48.927 回答
5

是的，Visual State Manager 是这里的关键。我刚刚上传了一个免费的 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>
于 2010-03-08T17:02:22.067 回答