如何向 UWP 中的 MenuFlyout 添加图标？

Question

我正在尝试向 menuflyoutitem 添加一个图标，我希望我的菜单看起来与这个类似：

这是我的代码：

<AppBarButton.Flyout>
    <MenuFlyout>
        <MenuFlyoutItem Text="SMS">
            <MenuFlyoutItem.Template>
                <ControlTemplate TargetType="MenuFlyoutItem">
                    <StackPanel Margin="12,10,0,0" Orientation="Horizontal">
                        <SymbolIcon Margin="0,0,12,0" Symbol="Comment" />
                        <TextBlock Text="{TemplateBinding Text}" />
                    </StackPanel>
                </ControlTemplate>
            </MenuFlyoutItem.Template>
        </MenuFlyoutItem>
        <MenuFlyoutItem Text="Email">
            <MenuFlyoutItem.Template>
                <ControlTemplate TargetType="MenuFlyoutItem">
                    <StackPanel Margin="12,10,0,10" Orientation="Horizontal">
                        <SymbolIcon Margin="0,0,12,0" Symbol="MailForward" />
                        <TextBlock Text="{TemplateBinding Text}" />
                    </StackPanel>
                </ControlTemplate>
            </MenuFlyoutItem.Template>
        </MenuFlyoutItem>
    </MenuFlyout>
</AppBarButton.Flyout>

我一直在苦苦挣扎，我找不到关于它的正常教程，有人知道我应该改变吗？因为当我添加图标时，菜单的所有行为都会丢失，例如当我在菜单上时它不会再次更改颜色。谢谢

Answer 1

添加鼠标悬停的视觉状态。这是 MenuFlyoutItem 的完整 ControlTemplate，取自 link

<MenuFlyoutItem Text="SMS">
    <MenuFlyoutItem.Template>
        <ControlTemplate TargetType="MenuFlyoutItem">
            <Grid x:Name="LayoutRoot"
                Padding="{TemplateBinding Padding}"
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <Storyboard>
                                <PointerUpThemeAnimation Storyboard.TargetName="TextBlock" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="PointerOver">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextBlock" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <PointerUpThemeAnimation Storyboard.TargetName="TextBlock" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextBlock" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <PointerDownThemeAnimation Storyboard.TargetName="TextBlock" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextBlock" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="CheckPlaceholderStates">
                        <VisualState x:Name="NoPlaceholder" />
                        <VisualState x:Name="CheckPlaceholder">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextBlock" Storyboard.TargetProperty="Margin">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="PaddingSizeStates">
                        <VisualState x:Name="DefaultPadding" />
                        <VisualState x:Name="NarrowPadding">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Padding">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource MenuFlyoutItemThemePaddingNarrow}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <StackPanel  Margin="12,10,0,10" Orientation="Horizontal">
                    <SymbolIcon Margin="0,0,12,0" Symbol="MailForward" />
                    <TextBlock
                        x:Name="TextBlock"
                        Text="{TemplateBinding Text}"
                        TextTrimming="Clip"
                        Foreground="{TemplateBinding Foreground}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </StackPanel>
            </Grid>
        </ControlTemplate>
    </MenuFlyoutItem.Template>
</MenuFlyoutItem>

Answer 2

菜单的所有行为都丢失了，因为您使用的是自定义 MenuFlyoutItem 模板，并且在您的模板中，您没有处理不同的视觉状态。

默认情况下，MenuFlyoutItem有8种视觉状态，分别是Normal、PointerOver、Pressed、已禁用、未选中、已选中、DefaultPadding，以及 NarrowPadding。更多信息，请查看MenuFlyoutItem styles and templates.

当您在菜单上方时，它会触发 PointerOver 状态：

<VisualState x:Name="PointerOver">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextBlock" Storyboard.TargetProperty="Foreground">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <PointerUpThemeAnimation Storyboard.TargetName="TextBlock" />
    </Storyboard>
</VisualState>

并且在此状态下，它会更改背景和 TextBlock 的前景。但是在您的自定义模板中，您没有任何 VisualState，因此它没有改变颜色。

要解决此问题，您可以为每个自定义模板添加视觉状态。

或者您可以根据默认样式和模板创建自定义样式并使用 Tag property 设置 SymbolIcon 如：

<Style x:Key="MyMenuFlyoutItem" TargetType="MenuFlyoutItem">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
    <Setter Property="Padding" Value="{ThemeResource MenuFlyoutItemThemePadding}" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="MenuFlyoutItem">
                <Grid x:Name="LayoutRoot"
                      Background="{TemplateBinding Background}"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}"
                      Padding="{TemplateBinding Padding}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="TextBlock" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Backgroun
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextBlock" Storyboard.TargetProperty="Foreground
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerUpThemeAnimation Storyboard.TargetName="TextBlock" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Backgroun
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" 
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextBlock" Storyboard.TargetProperty="Foreground
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerDownThemeAnimation Storyboard.TargetName="TextBlock" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextBlock" Storyboard.TargetProperty="Foreground
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckPlaceholderStates">
                            <VisualState x:Name="NoPlaceholder" />
                            <VisualState x:Name="CheckPlaceholder">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextBlock" Storyboard.TargetProperty="Margin">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="PaddingSizeStates">
                            <VisualState x:Name="DefaultPadding" />
                            <VisualState x:Name="NarrowPadding">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Padding">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource MenuFlyoutItemThemePaddingNarrow}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <StackPanel Orientation="Horizontal">
                        <SymbolIcon Margin="0,0,12,0" Symbol="{Binding Tag, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                        <TextBlock x:Name="TextBlock"
                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                   Foreground="{TemplateBinding Foreground}"
                                   Text="{TemplateBinding Text}"
                                   TextTrimming="Clip" />
                    </StackPanel>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后，在您的 MenuFlyoutItem:

中使用此样式

<AppBarButton.Flyout>
    <MenuFlyout>
        <MenuFlyoutItem Style="{StaticResource MyMenuFlyoutItem}" Tag="Comment" Text="SMS" />
        <MenuFlyoutItem Style="{StaticResource MyMenuFlyoutItem}" Tag="MailForward" Text="Email" />
    </MenuFlyout>
</AppBarButton.Flyout>

我使用的样式只是示例，您可能需要对其进行编辑以满足您的需要。

Answer 3

感谢Windows 10 Creators Update (introduced v10.0.15063.0)MenuFlyoutItem现在有了属性Icon.

来自 Microsoft documentation :

<MenuFlyout>
    <MenuFlyoutItem Text="Share" >
        <MenuFlyoutItem.Icon>
            <FontIcon Glyph="&#xE72D;" />
        </MenuFlyoutItem.Icon>
    </MenuFlyoutItem>
</MenuFlyout>

有关更多信息，请务必查看：MenuFlyoutItem documentation

Answer 4

MenuFlyoutIconGlyphIcon

 public class MenuFlyoutIconGlyph : MenuFlyoutItem
{
    public string GlyphIcon
    {
        get { return (string)GetValue(GlyphIconProperty); }
        set { SetValue(GlyphIconProperty, value); }
    }
    public static readonly DependencyProperty GlyphIconProperty =
        DependencyProperty.Register("GlyphIcon", typeof(string), typeof(MenuFlyoutIconGlyph), new PropertyMetadata("uE10C"));
}

风格

 <!--With glyph icon-->
<ControlTemplate x:Key="MenuFlyoutItemControlTemplate2" TargetType="controlEx:MenuFlyoutIconGlyph">
    <Grid x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <Storyboard>
                        <PointerUpThemeAnimation Storyboard.TargetName="TextBlock"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="PointerOver">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextBlock">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <PointerUpThemeAnimation Storyboard.TargetName="TextBlock"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextBlock">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <PointerDownThemeAnimation Storyboard.TargetName="TextBlock"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextBlock">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="CheckPlaceholderStates">
                <VisualState x:Name="NoPlaceholder"/>
                <VisualState x:Name="CheckPlaceholder">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TextBlock">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="PaddingSizeStates">
                <VisualState x:Name="DefaultPadding"/>
                <VisualState x:Name="NarrowPadding">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Padding" Storyboard.TargetName="LayoutRoot">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource MenuFlyoutItemThemePaddingNarrow}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <StackPanel Margin="12,5,5,0" Orientation="Horizontal">
            <FontIcon Foreground="{TemplateBinding Foreground}"                         
                       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                       Margin="0,0,12,0" Glyph="{TemplateBinding GlyphIcon}" 
                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            <TextBlock  x:Name="TextBlock" Foreground="{TemplateBinding Foreground}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                        Text="{TemplateBinding Text}" TextTrimming="Clip" 
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </StackPanel>
    </Grid>
</ControlTemplate>
<Style x:Key="MenuFlyoutItemStyleIconGlyph" TargetType="controlEx:MenuFlyoutIconGlyph" >
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
    <Setter Property="Padding" Value="{ThemeResource MenuFlyoutItemThemePadding}"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="UseSystemFocusVisuals" Value="True"/>
    <Setter Property="Template" Value="{StaticResource MenuFlyoutItemControlTemplate2}">
    </Setter>
</Style>

样本

<Grid x:Name="grid">
    <FlyoutBase.AttachedFlyout>
        <MenuFlyout MenuFlyoutPresenterStyle="{StaticResource MenuFlyoutPresenterStyle}">
            <controlEx:MenuFlyoutIconGlyph Style="{StaticResource MenuFlyoutItemStyleIconGlyph}" Text="Share" GlyphIcon="&#xE122;"></controlEx:MenuFlyoutIconGlyph>
        </MenuFlyout>
    </FlyoutBase.AttachedFlyout>

如何向 UWP 中的 MenuFlyout 添加图标？

How to add an icon to a MenuFlyout in UWP?

xaml

win-universal-app

windows-10

uwp

uwp-xaml