在 uwp 中模拟 fontIcon 上的鼠标悬停效果
Posted
技术标签:
【中文标题】在 uwp 中模拟 fontIcon 上的鼠标悬停效果【英文标题】：Simulating a mousehover effect on a fontIcon in uwp 【发布时间】：2016-07-15 03:28:36 【问题描述】：我目前正在从事一个涉及使用汉堡菜单的 uwp 项目。到目前为止，我使用此代码生成了菜单
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph=""
Foreground="Black" VerticalAlignment="Center" Margin="12,0,8,0">
我真正要实现的是，当鼠标悬停在图标上时，预计汉堡菜单的背景颜色会发生变化。这类似于 Windows 应用程序中的最小化按钮。在搜索 API 之后，我意识到没有任何 mousehover 事件，我认为最接近它的是 PointerEnetered 事件。如何使用 XAML 中的 PointerEntered 事件实现这一点？
【问题讨论】：
检查这个汉堡菜单video可能对我有帮助。 【参考方案1】：除了@Archana已经发布的改变FontIcon的前景色的解决方案，为了改变汉堡菜单的背景色，让它类似于windows应用程序中的最小化按钮，我们可以尝试将 FontIcon xaml 添加到 Button 的内容中并更改 Button 的背景颜色，使其看起来就像我们更改了汉堡菜单的背景颜色。
为了处理鼠标悬停事件，正如您所说，我们需要使用PointerEnetered 事件。 但是请不要忘记处理PointerExited事件，让我们没有将鼠标移到汉堡菜单上后，让汉堡菜单的背景颜色恢复正常。
更多信息，请查看我的示例：
XAML 代码：
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Height="auto">
<Button BorderThickness="0" Background="Transparent" PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited">
<Button.Content>
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph=""
Foreground="Black" VerticalAlignment="Center" Margin="12,0,8,0"/>
</Button.Content>
</Button>
</StackPanel>
<StackPanel Grid.Row="1">
//add other icon
</StackPanel>
</Grid>
</SplitView.Pane>
CS 代码：
private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
Button test = sender as Button;
test.Background = new SolidColorBrush(Colors.Red);
private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
Button test = sender as Button;
test.Background = new SolidColorBrush(Colors.Transparent);
如果你只想用XAML实现，请右击Button编辑Button样式，改变PointerOver VisualState里面的Button背景颜色如下：
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
完整的XAML代码请查看：
<Page.Resources>
<Style x:Key="ButtonStyle1" TargetType="Button">
<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.TargetProperty="Background" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlHighlightBaseMediumLowBrush"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlHighlightBaseHighBrush"/>
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlBackgroundBaseMediumLowBrush"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlHighlightTransparentBrush"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlHighlightBaseHighBrush"/>
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlBackgroundBaseLowBrush"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlDisabledBaseMediumLowBrush"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlDisabledTransparentBrush"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness" ContentTemplate="TemplateBinding ContentTemplate" ContentTransitions="TemplateBinding ContentTransitions" Content="TemplateBinding Content" HorizontalContentAlignment="TemplateBinding HorizontalContentAlignment" Padding="TemplateBinding Padding" VerticalContentAlignment="TemplateBinding VerticalContentAlignment"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="ThemeResource ApplicationPageBackgroundThemeBrush">
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Height="auto">
<Button BorderThickness="0" Background="Transparent" Style="StaticResource ButtonStyle1" PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited">
<Button.Content>
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph=""
Foreground="Black" VerticalAlignment="Center" Margin="12,0,8,0"/>
</Button.Content>
</Button>
</StackPanel>
<StackPanel Grid.Row="1">
//add other icon
</StackPanel>
</Grid>
</SplitView.Pane>
</Grid>
</Grid>
结果：
谢谢。
【讨论】：
【参考方案2】：更新 你不能在 XAMl 中做到这一点。如果你想在 XAMl 中使用按钮并编辑按钮的视觉状态
<Button Foreground="Black" Style="StaticResource ButtonStyle1">
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph=""
VerticalAlignment="Center" Margin="12,0,8,0"/>
</Button>
<Style x:Key="ButtonStyle1" TargetType="Button">
<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.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlHighlightBaseMediumLowBrush"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlBackgroundBaseMediumLowBrush"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlHighlightTransparentBrush"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlHighlightBaseHighBrush"/>
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlBackgroundBaseLowBrush"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlDisabledBaseLowBrush"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlDisabledTransparentBrush"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness" ContentTemplate="TemplateBinding ContentTemplate" ContentTransitions="TemplateBinding ContentTransitions" Content="TemplateBinding Content" HorizontalContentAlignment="TemplateBinding HorizontalContentAlignment" Padding="TemplateBinding Padding" VerticalContentAlignment="TemplateBinding VerticalContentAlignment"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
你可以这样做
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" PointerPressed="FontIcon_PointerPressed" PointerEntered="FontIcon_PointerEntered"
PointerExited="FontIcon_PointerExited" Foreground="Black" VerticalAlignment="Center" Margin="12,0,8,0"/>
private void FontIcon_PointerPressed(object sender, PointerRoutedEventArgs e)
(sender as FontIcon).Foreground = new SolidColorBrush(Colors.White);
private void FontIcon_PointerEntered(object sender, PointerRoutedEventArgs e)
(sender as FontIcon).Foreground = new SolidColorBrush(Colors.White);
private void FontIcon_PointerExited(object sender, PointerRoutedEventArgs e)
(sender as FontIcon).Foreground = new SolidColorBrush(Colors.Black);
【讨论】：
以上是关于在 uwp 中模拟 fontIcon 上的鼠标悬停效果的主要内容，如果未能解决你的问题，请参考以下文章
Xamarin UWP - 如何摆脱悬停在按钮上时出现的边框
[UWP] [VisualState]自定义ListViewItem悬停演示文稿