Silverlight 按钮 - 悬停时更改前景色
Posted
技术标签:
【中文标题】Silverlight 按钮 - 悬停时更改前景色【英文标题】：Silverlight Button - Change Foreground Color on hover 【发布时间】：2012-07-13 00:21:52 【问题描述】：我已经为我的 Silverlight 按钮创建了一个样式模板，设法创建了圆角和悬停状态，可以毫无问题地更改大部分样式，但是...
我不知道如何在hover 上更改Foreground 的颜色。
请参阅下面的代码，我遇到问题的部分目前已被注释掉。
<Style TargetType="Button" >
<Setter x:Name="myFontColor" Property="Foreground" Value="#000000"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="FontStyle" Value="Normal"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Height="28">
<Border x:Name="myBorder" BorderBrush="#C4C4C4" BorderThickness="1" CornerRadius="5">
<Rectangle x:Name="BackgroundGradient" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop x:Name="GradientStop1" Color="#FDFDFD" Offset="0" />
<GradientStop x:Name="GradientStop2" Color="#D6D6D6" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Border>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommomStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="GradientStop1"
Storyboard.TargetProperty="Color"
From="#FDFDFD" To="#0A284B"
Duration="0"
/>
<ColorAnimation
Storyboard.TargetName="GradientStop2"
Storyboard.TargetProperty="Color"
From="#D6D6D6" To="#135887"
Duration="0"
/>
<ColorAnimation
Storyboard.TargetName="myBorder"
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
From="#C4C4C4" To="#000000"
Duration="0"
/>
<!--<ColorAnimation
Storyboard.TargetName="myFontColor"
Storyboard.TargetProperty="Foreground"
From="#000000" To="#FFFFFF"
Duration="0"
/>-->
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
作为 Silverlight 的新手，我希望这只是一个针对正确元素和样式的简单问题。
如何在hover 上更改Foreground 颜色？
提前致谢
【问题讨论】：
【参考方案1】：首先，将ContentPresenter 放在ContentControl 中（这具有前景属性），然后您可以像使用背景一样更改它：
<Style TargetType="Button" >
<Setter x:Name="myFontColor" Property="Foreground" Value="#000000"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="FontStyle" Value="Normal"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Height="28">
<Border x:Name="myBorder" BorderBrush="#C4C4C4" BorderThickness="1" CornerRadius="5">
<Rectangle x:Name="BackgroundGradient" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop x:Name="GradientStop1" Color="#FDFDFD" Offset="0" />
<GradientStop x:Name="GradientStop2" Color="#D6D6D6" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Border>
<!-- CONTENT CONTROL HERE -->
<ContentControl Name="content" VerticalAlignment="Center" HorizontalAlignment="Center">
<ContentPresenter />
</ContentControl>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommomStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="GradientStop1"
Storyboard.TargetProperty="Color"
From="#FDFDFD" To="#0A284B"
Duration="0"
/>
<ColorAnimation
Storyboard.TargetName="GradientStop2"
Storyboard.TargetProperty="Color"
From="#D6D6D6" To="#135887"
Duration="0"
/>
<ColorAnimation
Storyboard.TargetName="myBorder"
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
From="#C4C4C4" To="#000000"
Duration="0"
/>
<!-- ALTERNATIVE WAY
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Foreground)" Storyboard.TargetName="content">
<DiscreteObjectKeyFrame KeyTime="0" Value="White" />
</ObjectAnimationUsingKeyFrames>-->
<ColorAnimation
Storyboard.TargetName="content"
Storyboard.TargetProperty="(UIElement.Foreground).(SolidColorBrush.Color)"
From="#000000" To="#FFFFFF"
Duration="0"
/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
【讨论】：
【参考方案2】：您可以通过添加事件 MouseEnter 和 MouseLeave 并在事件中更改颜色来做到这一点
示例：
<Button x:Name="myButton"
Content="Button"
MouseEnter="myButton_MouseEnter"
MouseLeave="myButton_MouseLeave"/>
在 C# 类中你必须有方法
private void myButton_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
myButton.Foreground=new SolidColorBrush(Colors.Red);
private void myButton_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
myButton.Foreground=new SolidColorBrush(Colors.White);
希望，这就是你要找的。p>
【讨论】：
谢谢！ .. 我创建的风格是影响我的应用程序中的所有按钮。你的代码能适应这个吗？ 它适用于所有带有 MouseEnter 和 MouseLeave 调用这些方法的按钮，它不必直接完成，但可以通过调用事件处理程序来完成，如果其中一个按钮必须执行其他更改操作悬停时的颜色。要知道按钮悬停，您可以使用对象发送者参数，如果我没记错的话，实际上是按钮引用。 感谢这个，很有用，虽然不是我想要的。 +1 虽然这会起作用，但您真的不应该这样做，因为如果您希望所有按钮更改其前景色，则需要确保每个按钮都调用这些事件处理程序。根据首选答案，最好只使用一种样式。 确实如此。如果任何事情都可以通过 css 实现，那么就应该这样做。事实上，我写的答案会改变 CSS 属性（如果我错了，请纠正我）。但是，如果所需的操作不是视觉效果，而是例如业务运营，我认为我的解决方案很好。【参考方案3】：使用 Blend 来设计任何控件。使用它，您可以轻松创建任何您想要的样式
只需通过Creating a button
【讨论】：
感谢这个，很有用，虽然不是我想要的。 +1【参考方案4】：试试这个：
<Style x:Key="CustomButtonStyle" TargetType="Button">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FF474747"/> <!--change this color code if you wish-->
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FF474747"/> <!--change this color code if you wish-->
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FF474747"/> <!--change this color code if you wish-->
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FF474747"/> <!--change this color code if you wish-->
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="DarkGray"/>
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="DarkGray"/>
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="DarkGray"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="DarkGray"/>
<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="DarkGray"/>
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="DarkGray"/>
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="DarkGray"/>
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="DarkGray"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Background" CornerRadius="3" Background="White" BorderThickness="TemplateBinding BorderThickness" BorderBrush="TemplateBinding BorderBrush">
<Grid Background="TemplateBinding Background" Margin="1">
<Border Opacity="0" x:Name="BackgroundAnimation" Background="#FF448DCA" />
<Rectangle x:Name="BackgroundGradient" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#A9A9A9" Offset="0" />
<GradientStop Color="#A5A5A5" Offset="0.375" />
<GradientStop Color="#A3A3A3" Offset="0.625" />
<GradientStop Color="#A0A0A0" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
<ContentPresenter
x:Name="contentPresenter"
Content="TemplateBinding Content"
ContentTemplate="TemplateBinding ContentTemplate"
VerticalAlignment="TemplateBinding VerticalContentAlignment"
HorizontalAlignment="TemplateBinding HorizontalContentAlignment"
Margin="TemplateBinding Padding"/>
<Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#A9A9A9" Opacity="0" IsHitTestVisible="false" />
<Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
【讨论】：
以上是关于Silverlight 按钮 - 悬停时更改前景色的主要内容，如果未能解决你的问题，请参考以下文章
更改背景时如何更改 UWP 按钮前景 PointerOver 属性？
如何在 Mac OS X 上更改 Tkinter 按钮的前景色或背景色？