Add a dropdown menu on a fontIcon in uwp

Question

Am currently working on a project that has a custom title bar, which was created using the example from 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 https://i.stack.imgur.com/RzSFr.png . So far the custom title bar code looks like this

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

Note : the Hamburger icon was inserted with the fontIcon above. Similar to the picture above, I would like to have a share and settings command in the dropdown. I am still a newbie to windows 10 uwp, is there a way to wrap the FontIcom in a MenuFlyout control, I know this doesn't sound right? I also attempted to change the colour of the fontIcon on PointerEntered in XAML, How do I achieve this without putting a definition of the event in the code behind?

score 1 · Accepted Answer · edited May 23 '17 at 11:58

>> is there a way to wrap the FontIcom in a MenuFlyout control

Do you mean that you want to add the FontIcon inside the MenuFlyout as similar as what I have highlighted with the Red color?

If so it will be better to use the Flyout instead of the MenuFlyout, because by default the MenuFlyout will have many MenuFlyoutItems with the Text properties(string value), in this way we can not add the control such as FontIcon inside the MenuFlyout.

For how to use the Flyout to implement your requirement, please try to refer to:

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

The result:

>> I also attempted to change the colour of the fontIcon on PointerEntered in XAML, How do I achieve this without putting a definition of the event in the code behind?

For this question, please check my reply in your another thread:

Simulating a mousehover effect on a fontIcon in uwp .

Thanks.

Thanks @Fang, I actually solved the problem and made a modification to your code. Using your code alone generated an error from my explanation above. — Tolani, Mar 29 '16 at 23:52

score 1 · Answer 2 · answered Mar 29 '16 at 23:50

After searching the internet and reading up on Flyout menu. Fang answer throws an error "the value of type Flyout can not be added to a collection or UIElementCollection element. The flyout menu can only be added to a button.flyout property according to https://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.flyout.aspx.

I have improved on Fang answer to solve my problem. A reimplementation is shown below

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

Add a dropdown menu on a fontIcon in uwp

2 Answers2