如何突出显示在 UWP 中单击/选择的 MenuFlyoutItem？答案

【问题标题】：How to highlight a MenuFlyoutItem which is clicked/selected in UWP?如何突出显示在 UWP 中单击/选择的 MenuFlyoutItem？
【发布时间】：2016-03-25 20:33:44
【问题描述】：

在旧的 wp 8.1 中，它用于自动突出显示浮出控件中选择/单击的项目。但是在 MenuFlyout 的情况下，这不会在新的 UWP 中发生。在这种情况下如何实现。

【问题讨论】：

标签： c# xaml win-universal-app

【解决方案1】：

您需要编辑 MenuFlyoutItem 和 MenuFlyoutPresenter 的样式。此链接将指导您如何做到这一点。 [编辑 MenuFlyoutItem ][1]。更新这是 MenuFlyoutItem 的样式对于您的用例，您可以编辑按下状态。您可以使用 Checked 视觉状态进行检查。

<Style 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"
              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>
          <TextBlock
              x:Name="TextBlock"
              Text="{TemplateBinding Text}"
              TextTrimming="Clip"
              Foreground="{TemplateBinding Foreground}"
              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>




  [1]: http://stackoverflow.com/questions/35763131/visualstatemanager-on-flyout-not-highlighting-entire-area

【讨论】：

我不确定，因为这似乎会在鼠标悬停时突出显示 MenuFlyoutItem，并且他们希望增加突出显示的大小。但是我需要的是，当单击一个项目并且下次我看到 MenuFlyout 时，无论我是否进行鼠标悬停操作，都会突出显示先前选择/单击的 MenuFlyoutItem。
是的，但它主要用于鼠标悬停事件。是否就像选择 MenuFlyoutItem 然后在 C# 中手动编辑其样式以显示其突出显示？这个可行，我试试看
是的，行得通！可悲的是，虽然它不是一个完美的解决方案！再次感谢 Archana！
MenuFlyoutItem 没有选择视觉状态？如果不是，您可以编写自定义状态并在后面的代码中告诉控件进入该状态。
是的，现在做后者