如何在UWP中向MenuFlyout添加图标?

费德里科·纳瓦雷特(Federico Navarrete)

我正在尝试向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>

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

周杰伦

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

By default, MenuFlyoutItem has 8 visual states which are Normal, PointerOver, Pressed, Disabled, Unchecked, Checked, DefaultPadding, and NarrowPadding. For more info, please check MenuFlyoutItem styles and templates.

When you are over the menu, it triggers PointerOver state:

<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>

And in this state, it changes the background and the TextBlock's foreground. However in your custom template, you didn't have any VisualState, so it didn't change the color.

To fix this issue, you can add visual states for each of your custom template.

或者,您可以基于默认样式和模板创建自定义样式,并使用Tag属性设置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>

我使用的样式仅作为示例,您可能需要对其进行编辑以适合您的需求。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在引导选项卡中添加关闭图标?

来自分类Dev

在Eclipse的WindowBuilder中向按钮添加图标

来自分类Dev

如何在Windows Phone中更改MenuFlyout的外观?

来自分类Dev

如何在ClusterItem中添加标题,摘要和图标?

来自分类Dev

如何在输入搜索中添加图标?

来自分类Dev

如何在jQuery中添加可拖动的“添加图像”图标

来自分类Dev

如何在TabbedActivity Android中的操作栏中向每个选项卡添加图标

来自分类Dev

我如何在引导下拉菜单中添加图标

来自分类Dev

如何在nuget包中添加图标?

来自分类Dev

如何在UWP中设置TitleBar图标?

来自分类Dev

如何在c ++ winrt UWP应用中从后面的代码向RichTextBlock添加文本,

来自分类Dev

如何在Material UI自动完成功能中向清除按钮图标添加/编辑功能?

来自分类Dev

如何在UWP中向Datagrid动态添加行?

来自分类Dev

向Angular Material输入中添加图标

来自分类Dev

在Wordpress中向CPT添加图标

来自分类Dev

如何在片段中向列表视图添加图标

来自分类Dev

Swift:如何在App委托中向UItabBar添加图标图像和图像背景?

来自分类Dev

如何在SharpDevelop中向Windows窗体添加图标?

来自分类Dev

如何在Outllook中向电子邮件添加图标?

来自分类Dev

如何在nuget包中添加图标?

来自分类Dev

如何向Tree.TreeNode添加图标

来自分类Dev

如何在stimulsoft工具中向工具栏添加自定义图标

来自分类Dev

如何在占位符中添加图标

来自分类Dev

如何在 UWP 中获得这个箭头图标?

来自分类Dev

如何在标签中添加图标?

来自分类Dev

如何在 Reactjs 中向 HTML 表格行元素添加文本 + 图标

来自分类Dev

如何在应用程序菜单上向模块添加图标?

来自分类Dev

如何在Android中动态添加图标?

来自分类Dev

如何向菜单中的图标添加超链接?

Related 相关文章

  1. 1

    如何在引导选项卡中添加关闭图标?

  2. 2

    在Eclipse的WindowBuilder中向按钮添加图标

  3. 3

    如何在Windows Phone中更改MenuFlyout的外观?

  4. 4

    如何在ClusterItem中添加标题,摘要和图标?

  5. 5

    如何在输入搜索中添加图标?

  6. 6

    如何在jQuery中添加可拖动的“添加图像”图标

  7. 7

    如何在TabbedActivity Android中的操作栏中向每个选项卡添加图标

  8. 8

    我如何在引导下拉菜单中添加图标

  9. 9

    如何在nuget包中添加图标?

  10. 10

    如何在UWP中设置TitleBar图标?

  11. 11

    如何在c ++ winrt UWP应用中从后面的代码向RichTextBlock添加文本,

  12. 12

    如何在Material UI自动完成功能中向清除按钮图标添加/编辑功能?

  13. 13

    如何在UWP中向Datagrid动态添加行?

  14. 14

    向Angular Material输入中添加图标

  15. 15

    在Wordpress中向CPT添加图标

  16. 16

    如何在片段中向列表视图添加图标

  17. 17

    Swift:如何在App委托中向UItabBar添加图标图像和图像背景?

  18. 18

    如何在SharpDevelop中向Windows窗体添加图标?

  19. 19

    如何在Outllook中向电子邮件添加图标?

  20. 20

    如何在nuget包中添加图标?

  21. 21

    如何向Tree.TreeNode添加图标

  22. 22

    如何在stimulsoft工具中向工具栏添加自定义图标

  23. 23

    如何在占位符中添加图标

  24. 24

    如何在 UWP 中获得这个箭头图标?

  25. 25

    如何在标签中添加图标?

  26. 26

    如何在 Reactjs 中向 HTML 表格行元素添加文本 + 图标

  27. 27

    如何在应用程序菜单上向模块添加图标?

  28. 28

    如何在Android中动态添加图标?

  29. 29

    如何向菜单中的图标添加超链接?

热门标签

归档