Question

我正在尝试向menuflyoutitem添加一个图标，我希望我的菜单看起来与此类似：

这是我的代码：

<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

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

Answer 2

由于您使用的是自定义MenuFlyoutItem模板，因此菜单的所有行为都会丢失，并且在您的模板中，您没有处理不同的视觉状态。

默认情况下，MenuFlyoutItem有8种视觉状态，正常， PointerOver ，按下，已禁用，未选中，已选中， DefaultPadding 和 NarrowPadding 。有关详细信息，请查看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，因此它没有更改颜色。

要解决此问题，您可以为每个自定义模板添加可视状态。

或者您可以根据默认样式和模板创建自定义样式，并使用Tag property将SymbolIcon设置为：

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

添加鼠标悬停的visul状态。以下是ControlTemplate MenuFlyoutItem的完整<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>，取自此link

<?php
Class myArrayObj  {
    public $myArray ;

    function __construct(){
        $this->myArray = array( 
    0 => 'a', 
    1 => array('subA','subB',array(0 => 'subsubA', 1 => 'subsubB', 2 => array(0 => 'deepA', 1 => 'deepB'))), 
    2 => 'b', 
    3 => array('subA','subB','subC'), 
    4 => 'c'
    );
    }

    function getNumber() {
        return count($this->myArray);   
    }
}

$a = new myArrayObj();

$i = new RecursiveIteratorIterator(new RecursiveArrayIterator($a),RecursiveIteratorIterator::SELF_FIRST);

foreach($i as $key => $value) {
$type = gettype($value);
$depth = $i->getDepth();

if($i->hasChildren()) {
        echo "$depth: $key ($type) has children<br>";
        /* here is it possible to call ....->getNumber(); */
    } 
    else {
        echo "$depth: $key ($type) has no children<br>";
        /* here is it possible to call ....->getNumber(); */
    }
}

Answer 4

MenuFlyoutIconGlyphIcon

 public class MenuFlyoutIconGlyph : MenuFlyoutItem
{
    public string GlyphIcon
    {
        get { return (string)GetValue(GlyphIconProperty); }
        set { SetValue(GlyphIconProperty, value); }
    }
    public static readonly DependencyProperty GlyphIconProperty =
        DependencyProperty.Register("GlyphIcon", typeof(string), typeof(MenuFlyoutIconGlyph), new PropertyMetadata("uE10C"));
}

风格

 <!--With glyph icon-->
<ControlTemplate x:Key="MenuFlyoutItemControlTemplate2" TargetType="controlEx:MenuFlyoutIconGlyph">
    <Grid x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" 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.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextBlock">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <PointerUpThemeAnimation Storyboard.TargetName="TextBlock"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextBlock">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <PointerDownThemeAnimation Storyboard.TargetName="TextBlock"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextBlock">
                            <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.TargetProperty="Margin" Storyboard.TargetName="TextBlock">
                            <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.TargetProperty="Padding" Storyboard.TargetName="LayoutRoot">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource MenuFlyoutItemThemePaddingNarrow}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <StackPanel Margin="12,5,5,0" Orientation="Horizontal">
            <FontIcon Foreground="{TemplateBinding Foreground}"                         
                       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                       Margin="0,0,12,0" Glyph="{TemplateBinding GlyphIcon}" 
                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            <TextBlock  x:Name="TextBlock" Foreground="{TemplateBinding Foreground}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                        Text="{TemplateBinding Text}" TextTrimming="Clip" 
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </StackPanel>
    </Grid>
</ControlTemplate>
<Style x:Key="MenuFlyoutItemStyleIconGlyph" TargetType="controlEx:MenuFlyoutIconGlyph" >
    <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" Value="{StaticResource MenuFlyoutItemControlTemplate2}">
    </Setter>
</Style>

样品

<Grid x:Name="grid">
    <FlyoutBase.AttachedFlyout>
        <MenuFlyout MenuFlyoutPresenterStyle="{StaticResource MenuFlyoutPresenterStyle}">
            <controlEx:MenuFlyoutIconGlyph Style="{StaticResource MenuFlyoutItemStyleIconGlyph}" Text="Share" GlyphIcon="&#xE122;"></controlEx:MenuFlyoutIconGlyph>
        </MenuFlyout>
    </FlyoutBase.AttachedFlyout>

如何在UWP中向MenuFlyout添加图标？

4 个答案: