在 uwp 中的 fontIcon 上添加下拉菜单答案

【问题标题】：Add a dropdown menu on a fontIcon in uwp在 uwp 中的 fontIcon 上添加下拉菜单
【发布时间】：2016-03-27 18:49:23
【问题描述】：

我目前正在处理一个具有自定义标题栏的项目，该项目是使用来自https://marcominerva.wordpress.com/2015/05/19/easily-manage-the-title-bar-in-windows-10-apps/ 的示例创建的。使用该示例，我能够创建一个类似于 http://i.stack.imgur.com/RzSFr.png 的菜单。到目前为止自定义标题条码看起来是这样的

<Border x:Name="customTitleBar" VerticalAlignment="Top" Height="32"   Background="Transparent" FlyoutBase.AttachedFlyout="{StaticResource FlyoutBase1}">
        <StackPanel Margin="12,5,5,5" Orientation="Horizontal">
            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;"
                      Foreground="Black" VerticalAlignment="Center" Margin="12,0,8,0">

            </FontIcon>
            <TextBlock Text="My app" Foreground="Black"
                       VerticalAlignment="Center" Margin="25,0"/>
        </StackPanel>

        <i:Interaction.Behaviors>
            <local:TitleBarBehavior IsChromeless="True"/>
        </i:Interaction.Behaviors>
    </Border>

注意：汉堡图标是用上面的 fontIcon 插入的。与上图类似，我想在下拉菜单中有一个共享和设置命令。我仍然是 Windows 10 uwp 的新手，有没有办法将 FontIcom 包装在 MenuFlyout 控件中，我知道这听起来不对？我还尝试在 XAML 中更改 PointerEntered 上 fontIcon 的颜色，如何在不将事件定义放在后面的代码中来实现这一点？

【问题讨论】：

标签： xaml winrt-xaml win-universal-app windows-10-universal

【解决方案1】：

>> 有没有办法将 FontIcom 包装在 MenuFlyout 控件中

你的意思是你想在 MenuFlyout 中添加 FontIcon，就像我用红色突出显示的一样？

如果是这样最好使用Flyout而不是MenuFlyout，因为默认情况下MenuFlyout会有很多带有Text属性（字符串值）的MenuFlyoutItem，这样我们就不能添加FontIcon等控件在 MenuFlyout 内。

关于如何使用Flyout来实现您的需求，请尝试参考：

  <Flyout>
         <StackPanel Orientation="Vertical">
             <StackPanel Orientation="Horizontal">
                        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE72D;" Foreground="Black"/>
                        <TextBlock Text="Share"></TextBlock>
              </StackPanel>
              <StackPanel Orientation="Horizontal">
                   <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE713;" Foreground="Black"/>
                   <TextBlock Text="Settings"></TextBlock>
              </StackPanel>
          </StackPanel>
</Flyout>

结果：

>> 我还尝试在 XAML 中更改 PointerEntered 上 fontIcon 的颜色，如何在不将事件定义放在后面的代码中的情况下实现此目的？

关于这个问题，请查看我在你另一个帖子中的回复：

Simulating a mousehover effect on a fontIcon in uwp.

谢谢。

【讨论】：

感谢@Fang，我实际上解决了这个问题并对您的代码进行了修改。根据我上面的解释，单独使用您的代码会产生错误。

【解决方案2】：

在互联网上搜索并阅读 Flyout 菜单后。方回答抛出错误“Flyout 类型的值不能添加到集合或 UIElementCollection 元素。根据https://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.flyout.aspx 只能将弹出菜单添加到 button.flyout 属性。

我已经改进了方的答案来解决我的问题。重新实现如下所示

<Button FontFamily="Segoe MDL2 Assets" Content="&#xE700;"
                      Foreground="Black" VerticalAlignment="Center" Margin="12,0,8,0" Background="Transparent">
                <Button.Flyout>
                <Flyout>
                    <StackPanel Orientation="Vertical">
                        <StackPanel Orientation="Horizontal">
                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE72D;" Foreground="Black"/>
                            <TextBlock Text="Share" Margin="5,0"></TextBlock>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <FontIcon Margin="0,5" FontFamily="Segoe MDL2 Assets" Glyph="&#xE713;" Foreground="Black"/>
                                <TextBlock Text="Settings" Margin="5,5"></TextBlock>
                        </StackPanel>
                    </StackPanel>
                </Flyout>
                </Button.Flyout>
            </Button>

【讨论】：