如何在UWP中向MenuFlyout添加图标？
我正在尝试向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>
我一直在努力，我找不到关于它的正常教程，有人知道我应该改变吗？因为当我添加图标时，菜单的所有行为都会丢失，例如，当我在菜单上时，它不会再次改变颜色。感谢。
4 个答案:
答案 0 :(得分：8)
感谢Windows 10 Creators Update (introduced v10.0.15063.0) MenuFlyoutItem现在拥有了一个属性Icon。
<MenuFlyout>
<MenuFlyoutItem Text="Share" >
<MenuFlyoutItem.Icon>
<FontIcon Glyph="" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
</MenuFlyout>
有关详情，请务必查看：MenuFlyoutItem documentation
答案 1 :(得分：5)
由于您使用的是自定义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>
我使用的风格只是例如，您可能需要对其进行编辑以满足您的需求。
答案 2 :(得分：1)
添加鼠标悬停的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(); */
}
}
答案 3 :(得分：1)
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=""></controlEx:MenuFlyoutIconGlyph>
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？