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

Question

我目前正在开发一个具有自定义标题栏的项目，该标题栏是使用 https://marcominerva.wordpress.com/2015/05/19/easily-manage-the-title-bar-in-windows-10-apps/. Using that example, I was able to create a menu similar to that 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 的颜色，如何在不在代码后面放置事件定义的情况下实现此目的？

Answer 1

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

您的意思是要在 MenuFlyout 中添加 FontIcon，就像我用红色突出显示的那样？

如果是这样，最好使用 Flyout 而不是 MenuFlyout，因为默认情况下，MenuFlyout 将有许多具有 Text 属性（字符串值）的 MenuFlyoutItem，这样我们就无法添加MenuFlyout 中的 FontIcon 等控件。

如何使用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 的颜色，如果不在隐藏代码？

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

.

谢谢。

Answer 2

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

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

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

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

Add a dropdown menu on a fontIcon in uwp

xaml

winrt-xaml

win-universal-app

windows-10-universal