How to highlight a MenuFlyoutItem which is clicked/selected in UWP?

Question

In the old wp 8.1 it used to automatically highlight the selected/clicked item in the flyout. But in the case of a MenuFlyout this is not happening in the new UWP. How to achieve it in this scenario.

Answer 1

You need to edit the style of MenuFlyoutItem and MenuFlyoutPresenter. This link will guide you how to do that. [Edit MenuFlyoutItem ][1]. Update Here is the style for MenuFlyoutItem For your usecase you can edit pressed state. You can check with Checked visual state.

<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