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

Question

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

Answer 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