Wie wird ein MenuFlyoutItem hervorgehoben, das in UWP angeklickt/ausgewählt wird?

Question

In der alten WP 8.1 wurde automatisch das ausgewählte/angeklickte Element im Flyout hervorgehoben. Im Fall eines MenuFlyout geschieht dies jedoch nicht in der neuen UWP. Wie man es in diesem Szenario erreicht.

Answer 1

Sie müssen den Stil von MenuFlyoutItem und MenuFlyoutPresenter bearbeiten. Dieser Link wird Ihnen zeigen, wie das geht. [Bearbeiten MenuFlyoutItem] [1]. Aktualisieren Hier ist der Stil für MenuFlyoutItem Für Ihren Anwendungsfall können Sie gedrückten Zustand bearbeiten. Sie können dies mit aktiviertem visuellen Status überprüfen.

<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