Добавить выпадающее меню на шрифтеIcon в uwp

Question

В настоящее время я работаю над проектом, который имеет настраиваемую строку заголовка, которая была создана с использованием примера с 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> 

Примечание: значок гамбургера был вставлен с шрифтомIcon выше. Как и в приведенном выше изображении, я хотел бы иметь команду share и settings в раскрывающемся списке. Я все еще новичок в Windows 10 uwp, есть ли способ обернуть FontIcom в элементе управления MenuFlyout, я знаю, что это звучит неправильно? Я также попытался изменить цвет шрифтаIcon на PointerEntered в XAML, как мне достичь этого, не помещая определение события в код позади?

Answer 1

>> есть способ, чтобы обернуть FontIcom в элементе управления MenuFlyout

Вы имеете в виду, что вы хотите добавить FontIcon внутри MenuFlyout похожи, как то, что я выделил красным цветом ?

Если так будет лучше использовать Flyout вместо MenuFlyout, потому что по умолчанию MenuFlyout будет иметь много MenuFlyoutItems с текстом свойства (строковое значение), таким образом, мы не можем добавить таких как 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> 

Результат:

>> Я также попытался изменить цвет шрифтаIcon на PointerEntered в XAML, Как мне достичь этого, не помещая определение события в код позади?

Для этого вопроса, пожалуйста, проверьте мой ответ в вашей другой теме:

Simulating a mousehover effect on a fontIcon in uwp.

Спасибо.

Answer 2

После поиска в Интернете и чтения в меню вылета. Fang отвечает на ошибку «значение типа Flyout не может быть добавлено в коллекцию или элемент UIElementCollection. Меню вылета можно добавить только в свойство button.flyout в соответствии с https://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.flyout.aspx.

Я улучшил ответ Fang на Решите мою проблему.Подробление показано ниже

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