UWP按钮在鼠标悬停时更改颜色
UWP按钮在鼠标悬停时更改颜色
提问于 2016-08-05 07:04:43
我正在尝试创建一个UWP按钮，当鼠标指针悬停在它上面时，它将改变背景颜色。我遇到的问题是，在默认情况下，它似乎已经这样做了，但不是我想要的颜色。当我将鼠标悬停在我的红色按钮上时，它会变成默认的灰色，然后在我鼠标移出时又会变成灰色。我用C#编写了代码，当我将鼠标悬停在它上面时，它会变成蓝色
private void button_PointerEntered_1(object sender, PointerRoutedEventArgs e)
{
button.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 0, 0, 255));
}
private void button_PointerExited_1(object sender, PointerRoutedEventArgs e)
{
button.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 255, 0, 0));
}下面是该按钮的XAML代码
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button x:Name="button"
Content="Button"
HorizontalAlignment="Left"
Margin="417,188,0,0"
VerticalAlignment="Top"
Height="230"
Width="461"
FontSize="72"
ManipulationMode="None"
PointerEntered="button_PointerEntered_1"
PointerExited="button_PointerExited_1">
<Button.Foreground>
<SolidColorBrush Color="Black"/>
</Button.Foreground>
<Button.Background>
<SolidColorBrush Color="Red"/>
</Button.Background>
</Button>
</Grid>回答 3
Stack Overflow用户
发布于 2018-07-17 20:39:35
2018年更新答案
实现它的最简单的方法是覆盖按钮字典中的资源(对于你想要的主题)
您可以更改名为Button<Property>PointerOver的资源键的值，以使效果生效：
<Button Background="Red" Foreground="Black"> <!-- These are only applied when your button is not being hovered-->
<Button.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Dark">
<SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="Red"/>
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Black"/>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="Red"/>
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Black"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Button.Resources>
</Button>微软官方文档中的Here is an example on how this is done，以获取以下结果：
Stack Overflow用户
发布于 2016-08-05 07:18:57
一种可能但更复杂的方法是覆盖Button样式：
<Page.Resources>
<Style TargetType="Button" x:Key="CustomButtonStyle">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
<Setter Property="Padding" Value="8,4,8,4" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Orange" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" Padding="{TemplateBinding Padding}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" AutomationProperties.AccessibilityView="Raw"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="gridRoot">
<Button Content="stackoverflow" Style="{StaticResource CustomButtonStyle}"/>
</Grid>查看PointerOver状态以及如何设置Background属性。
Stack Overflow用户
发布于 2016-08-05 11:49:43
您可以将一个按钮拖到您的网格上，然后左键单击它，选择编辑项目.And，然后您将看到样式默认值为@Andrii answer.If您想要更改鼠标经过的颜色，您可以更改代码<VisualState x:Name="Pressed">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="The new Color" />您可以将The new Color更改为您的颜色。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38778715
复制相关文章
相似问题
腾讯云开发者
