UWPのMenuFlyoutにアイコンを追加するには？

Question

私はmenuflyoutitemにアイコンを追加しようとしている、私は私のメニューはこの1つのようになりますことを希望：私は「

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

：

これは私のコードです私はそれについての通常のチュートリアルを見つけることができません、誰かが私は変更する必要があることを知っていますか？アイコンを追加すると、メニューのすべての動作が失われます。たとえば、メニューを表示しているときに色が変わることはありません。ありがとう。

Answer 1

すべての行動から取られMenuFlyoutItemの完全なControlTemplateが失われていると、あなたのテンプレートで、あなたは異なる視覚的状態に対処していませんでした。デフォルトでは

、MenuFlyoutItemはノーマル、PointerOver、プレス、無効、未確認、をDefaultPaddingチェック、、そしてNarrowPaddingある8つの視覚的な状態を持っています。詳細はMenuFlyoutItem styles and templatesをご確認ください。

メニューの上にある場合、それはPointerOver状態トリガー：

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

をそして、この状態では、それは背景とのTextBlockのフォアグラウンドを変更します。ただし、カスタムテンプレートでは、VisualStateはありませんでしたので、色は変更されませんでした。

この問題を解決するには、各カスタムテンプレートのビジュアル状態を追加できます。

それともSymbolIconのように既定のスタイルおよびテンプレートに基づくカスタムスタイルを作成して設定するTag propertyを使用することができます。

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

私が使用したスタイルはちょうど例です。あなたのニーズに合わせて編集する必要があるかもしれません。

Answer 2

マウスのホバーのvisul状態を追加します。ここでは、あなたのカスタムMenuFlyoutItemテンプレートを使用しているので、メニューのこのlink

<MenuFlyoutItem Text="SMS"> 
    <MenuFlyoutItem.Template> 
     <ControlTemplate TargetType="MenuFlyoutItem"> 
      <Grid x:Name="LayoutRoot" 
       Padding="{TemplateBinding Padding}" 
       Background="{TemplateBinding Background}" 
       BorderBrush="{TemplateBinding BorderBrush}" 
       BorderThickness="{TemplateBinding BorderThickness}"> 
       <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="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> 
         <VisualState x:Name="Pressed"> 
          <Storyboard> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background"> 
            <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 Margin="12,10,0,10" Orientation="Horizontal"> 
        <SymbolIcon Margin="0,0,12,0" Symbol="MailForward" /> 
        <TextBlock 
         x:Name="TextBlock" 
         Text="{TemplateBinding Text}" 
         TextTrimming="Clip" 
         Foreground="{TemplateBinding Foreground}" 
         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
         VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
       </StackPanel> 
      </Grid> 
     </ControlTemplate> 
    </MenuFlyoutItem.Template> 
</MenuFlyoutItem> 

Answer 3

ありがとうございましたWindows 10 Creators Update (introduced v10.0.15063.0)MenuFlyoutItemは今やIconです。Microsoft documentationから

：

<MenuFlyout> 
    <MenuFlyoutItem Text="Share" > 
     <MenuFlyoutItem.Icon> 
      <FontIcon Glyph="&#xE72D;" /> 
     </MenuFlyoutItem.Icon> 
    </MenuFlyoutItem> 
</MenuFlyout> 

詳細については、必ず確認してください：MenuFlyoutItem documentation