Rider Xamarin xaml: "Field Normal is already declared" from VisualStateManager - xaml

I'm using Xamarin Forms 4.5.0.617 and want to use a VisualStateManager (https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual-state-manager) to change the style if an element is disabled. To apply this to all my styles, I have to use the x:Name="Normal" or "Disabled" or "Focused" multiple times, but Rider (https://www.jetbrains.com/de-de/rider/) says error
The app runs correctly (style is changing) but the warning of rider is still annoying.
Am I doing something wrong?
<?xml version="1.0" encoding="utf-8"?>
<Application
x:Class="ProjectApp.App"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:components="clr-namespace:Project.Components"
xmlns:converters="clr-namespace:Project.Converters"
xmlns:helpers="clr-namespace:Project.Helpers"
xmlns:iconize="clr-namespace:Plugin.Iconize;assembly=Plugin.Iconize">
<Application.Resources>
<ResourceDictionary>
<!-- Text -->
<Style
x:Key="Label"
TargetType="Label">
<Setter
Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState
x:Name="Normal">
<VisualState.Setters>
<Setter
Property="TextColor"
Value="Black" />
</VisualState.Setters>
</VisualState>
<VisualState
x:Name="Disabled">
<VisualState.Setters>
<Setter
Property="TextColor"
Value="Gray" />
</VisualState.Setters>
</VisualState>
<VisualState
x:Name="Focused">
<VisualState.Setters>
<Setter
Property="TextColor"
Value="{StaticResource Primary}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<!-- Picker -->
<Style
x:Key="Picker"
TargetType="Picker">
<Setter
Property="FontSize"
Value="14" />
<Setter
Property="TextColor"
Value="Black" />
<Setter
Property="VerticalOptions"
Value="Center" />
<Setter
Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState
x:Name="Normal">
<VisualState.Setters>
<Setter
Property="TextColor"
Value="Black" />
</VisualState.Setters>
</VisualState>
<VisualState
x:Name="Disabled">
<VisualState.Setters>
<Setter
Property="TextColor"
Value="Gray" />
</VisualState.Setters>
</VisualState>
<VisualState
x:Name="Focused">
<VisualState.Setters>
<Setter
Property="TextColor"
Value="{StaticResource Primary}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>

You are not doing anything wrong. This is a confirmed known issue with Rider/ReSharper. I have already reported it here.
What I can suggest is that you upvote the issue and/or write a comment, so that they can escalate it and fix it quickly.

Related

How to change the background color of selected item of dropdown menu in a ComboBox (UWP/XAML)

I'm struggling to handle the styling for the ComboBox control, more specifically, from drop-down menu the selected item's background color.
Is there a specific theme key color that the selected item takes?
On the example below the background color i want to change is the lighter grey one.
If you want to change the style of the ComboBoxItem, you will need to modify the default style of the ComboBoxItem. The ComboBoxItem is using some system value as the background for different states. I've made a simple demo which you could refer to.
Xaml:
<Page.Resources>
<Style TargetType="ComboBoxItem" x:Key="MyItemStyle">
<Setter Property="Foreground" Value="{ThemeResource ComboBoxItemForeground}" />
<Setter Property="Background" Value="{ThemeResource ComboBoxItemRevealBackground}" />
<Setter Property="BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ComboBoxItemRevealBorderThemeThickness}" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="Padding" Value="{ThemeResource ComboBoxItemRevealThemePadding}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Control.IsTemplateFocusTarget="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="LayoutRoot.Background" Value="Azure" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundPointerOver}" />
</VisualState.Setters>
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundDisabled}" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushDisabled}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundDisabled}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundPressed}" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundPressed}" />
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
</VisualState.Setters>
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="Yellow" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelected}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelected}" />
</VisualState.Setters>
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundSelectedUnfocused}" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelectedUnfocused}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelectedUnfocused}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="SelectedDisabled">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundSelectedDisabled}" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelectedDisabled}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelectedDisabled}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="SelectedPointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="Red" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelectedPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelectedPointerOver}" />
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
</VisualState.Setters>
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="Green" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelectedPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelectedPressed}" />
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="InputModeStates">
<VisualState x:Name="InputModeDefault" />
<VisualState x:Name="TouchInputMode">
<VisualState.Setters>
<Setter Target="ContentPresenter.Margin" Value="{ThemeResource ComboBoxItemRevealThemeTouchPadding}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="GameControllerInputMode">
<VisualState.Setters>
<Setter Target="ContentPresenter.Margin" Value="{ThemeResource ComboBoxItemRevealThemeGameControllerPadding}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<ComboBox x:Name="FontsCombo" Header="Fonts" Height="200" Width="200"
ItemsSource="{x:Bind fonts}" DisplayMemberPath="Source" ItemContainerStyle="{StaticResource MyItemStyle}"/>
</Grid>
I changed the PointerOver color, Selected color, SelectedPointerOver color and SelectedPressed color.

Styling depending on screen orientation in Xamarin forms

I am styling on phone and tablet but how can I add the option also for orientation? this is all for portrait but how can I add option for horizontal orientation?
<Style TargetType="Grid" x:Key="DocType">
<Setter Property="HeightRequest">
<Setter.Value>
<OnIdiom Phone="50" Tablet="80" />
</Setter.Value>
</Setter>
<Setter Property="BackgroundColor" Value="#F4F5F7"/>
</Style>
You can use OrientationStateTrigger with VisualStateManager here is an example:
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState
x:Name="Landscape">
<VisualState.StateTriggers>
<OrientationStateTrigger Orientation="Landscape" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Blue" />
</VisualState.Setters>
</VisualState>
<VisualState
x:Name="Portrait">
<VisualState.StateTriggers>
<OrientationStateTrigger Orientation="Portrait" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Red" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
Source
EDIT
VisualStateManager inside a style, combined with OnIdiom
<Style TargetType="Grid" x:Key="DocType">
<Setter Property="HeightRequest">
<Setter.Value>
<OnIdiom Phone="50" Tablet="80" />
</Setter.Value>
</Setter>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState x:Name="Landscape">
<VisualState.StateTriggers>
<OrientationStateTrigger Orientation="Landscape" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="BackgroundColor">
<Setter.Value>
<OnIdiom Phone="Blue" Tablet="Green" />
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Portrait">
<VisualState.StateTriggers>
<OrientationStateTrigger Orientation="Portrait" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="BackgroundColor">
<Setter.Value>
<OnIdiom Phone="Yellow" Tablet="Purple" />
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
in this example:
Mode
Tablet
Phone
Landscape
Green
Blue
Portrait
Purple
Yellow

How to add hover animations for ListViewItems similar to the oficial Windows 10 Photos app

I would like to add an animation like this to my own ListView:
As you can see, it zooms in/out the content of the ListViewItem when the mouse is hovering. This is the behavior of the oficial Windows 10 application called Microsoft Photos.
Is there an automated way to do it, preferably using a XAML-only approach?
Is there an automated way to do it, preferably using a XAML-only approach?
Sure, you could edit the default ListViewItem style and add DoubleAnimation to PointerOver state to animate ScaleTransform . I have made the complete style for this question, you could use it directly.
<Style TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="{ThemeResource ListViewItemBackground}" />
<Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="IsHoldingEnabled" Value="True" />
<Setter Property="Padding" Value="12,0,12,0" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}" />
<Setter Property="AllowDrop" Value="False" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="FocusVisualMargin" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
x:Name="Root"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
CheckBrush="{ThemeResource ListViewItemCheckBrush}"
CheckMode="{ThemeResource ListViewItemCheckMode}"
ContentMargin="{TemplateBinding Padding}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Control.IsTemplateFocusTarget="True"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackground}"
DragForeground="{ThemeResource ListViewItemDragForeground}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
RevealBackground="{ThemeResource ListViewItemRevealBackground}"
RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}"
RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"
SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}"
SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}"
SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}"
SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />
</VisualState.Setters>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" From="1" To="1.5" Duration="0:0:0.1"/>
<DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" From="1" To="1.5" Duration="0:0:0.1"/>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOverSelected">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOverPressed">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
<Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
<Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PressedSelected">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
<Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DisabledStates">
<VisualState x:Name="Enabled" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="Root.RevealBorderThickness" Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ListViewItemPresenter.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</ListViewItemPresenter.RenderTransform>
</ListViewItemPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How to modify CCSelectionButton's flyout style of MediaPlayerElement on Xbox?

As the picture shows, MediaPlayerElement has no friendly UI on XBox, it's so ugly comparing to Apple TV and Android TV. Now I want the change the Flyout of CCSelectionButton.
Change the selected item's background and foreground.
Remove the default select style.
I have followed the advice of https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/custom-transport-controls, but found no idea.
I didn't find the relevant style code in the default MediaTransportControls style. It should be due to the variability of the subtitle file (different subtitles for each video). It is a MenuFlyout generated by C # code, so we can only rewrite it by means of resource coverage.
Try adding the following code in App.xaml:
<Application.Resources>
<Style TargetType="MenuFlyoutItem">
<Setter Property="Background" Value="Red" />
<Setter Property="BorderBrush" Value="{ThemeResource MenuFlyoutItemRevealBorderBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource MenuFlyoutItemRevealBorderThickness}" />
<Setter Property="Foreground" Value="White" />
<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="False" />
<Setter Property="KeyboardAcceleratorPlacementMode" Value="Hidden" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuFlyoutItem">
<Grid x:Name="LayoutRoot"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="LayoutRoot.Background" Value="{ThemeResource MenuFlyoutItemRevealBackgroundPointerOver}" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource MenuFlyoutItemRevealBorderBrushPointerOver}" />
<Setter Target="IconContent.Foreground" Value="{ThemeResource MenuFlyoutItemForegroundPointerOver}" />
<Setter Target="TextBlock.Foreground" Value="{ThemeResource MenuFlyoutItemForegroundPointerOver}" />
<Setter Target="KeyboardAcceleratorTextBlock.Foreground" Value="{ThemeResource MenuFlyoutItemKeyboardAcceleratorTextForegroundPointerOver}" />
</VisualState.Setters>
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
<Setter Target="LayoutRoot.Background" Value="{ThemeResource MenuFlyoutItemRevealBackgroundPressed}" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource MenuFlyoutItemRevealBorderBrushPressed}" />
<Setter Target="IconContent.Foreground" Value="{ThemeResource MenuFlyoutItemForegroundPressed}" />
<Setter Target="TextBlock.Foreground" Value="{ThemeResource MenuFlyoutItemForegroundPressed}" />
<Setter Target="KeyboardAcceleratorTextBlock.Foreground" Value="{ThemeResource MenuFlyoutItemKeyboardAcceleratorTextForegroundPressed}" />
</VisualState.Setters>
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource MenuFlyoutItemRevealBackgroundDisabled}" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource MenuFlyoutItemRevealBorderBrushDisabled}" />
<Setter Target="IconContent.Foreground" Value="{ThemeResource MenuFlyoutItemForegroundDisabled}" />
<Setter Target="TextBlock.Foreground" Value="{ThemeResource MenuFlyoutItemForegroundDisabled}" />
<Setter Target="KeyboardAcceleratorTextBlock.Foreground" Value="{ThemeResource MenuFlyoutItemKeyboardAcceleratorTextForegroundDisabled}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckPlaceholderStates">
<VisualState x:Name="NoPlaceholder" />
<VisualState x:Name="CheckPlaceholder">
<VisualState.Setters>
<Setter Target="TextBlock.Margin" Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="IconPlaceholder">
<VisualState.Setters>
<Setter Target="TextBlock.Margin" Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />
<Setter Target="IconRoot.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CheckAndIconPlaceholder">
<VisualState.Setters>
<Setter Target="TextBlock.Margin" Value="{ThemeResource MenuFlyoutItemDoublePlaceholderThemeThickness}" />
<Setter Target="IconRoot.Margin" Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />
<Setter Target="IconRoot.Visibility" Value="Visible" />
</VisualState.Setters>
</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>
<VisualStateGroup x:Name="KeyboardAcceleratorTextVisibility">
<VisualState x:Name="KeyboardAcceleratorTextCollapsed" />
<VisualState x:Name="KeyboardAcceleratorTextVisible">
<VisualState.Setters>
<Setter Target="KeyboardAcceleratorTextBlock.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Viewbox x:Name="IconRoot"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Width="16"
Height="16"
Visibility="Collapsed">
<ContentPresenter x:Name="IconContent"
Content="{TemplateBinding Icon}"/>
</Viewbox>
<TextBlock x:Name="TextBlock"
Text="{TemplateBinding Text}"
TextTrimming="Clip"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<TextBlock x:Name="KeyboardAcceleratorTextBlock"
Grid.Column="1"
Style="{ThemeResource CaptionTextBlockStyle}"
Text="{TemplateBinding KeyboardAcceleratorTextOverride}"
MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KeyboardAcceleratorTextMinWidth}"
Margin="24,0,0,0"
Foreground="{ThemeResource MenuFlyoutItemKeyboardAcceleratorTextForeground}"
HorizontalAlignment="Right"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Visibility="Collapsed"
AutomationProperties.AccessibilityView="Raw" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
It overwrites the default MenuFlyoutItem style at the application level, and affects other MenuFlyoutItems.
Effect picture:
If you don't want to affect other MenuFlyoutItem, you can create a default MenuFlyoutItem style and assign it to other MenuFlyoutItem that you need to keep the default style.
Best regards.

Apply reveal effect to an InkToolbar [UWP]

I'm trying to apply the reveal effect to the buttons of an InkToolbar but the code that the documentation reccomends for custom controls doesn't work, here's what I added to the XAML code of the InkToolbar:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="RootGrid.(RevealBrushHelper.State)" Value="PointerOver" />
<Setter Target="RootGrid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}"/>
<Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ButtonRevealBorderBrushPointerOver}"/>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="RootGrid.(RevealBrushHelper.State)" Value="Pressed" />
<Setter Target="RootGrid.Background" Value="{ThemeResource ButtonRevealBackgroundPressed}"/>
<Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ButtonRevealBorderBrushPressed}"/>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPressed}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
You cannot simply apply the Reveal effect on the entire InkToolbar. Instead, you should do it on each of the toolbar buttons.
Because each button uses a different style, this makes applying the effect a lot difficult than I thought. I had to grab a lot of resources from
C:\Program Files (x86)\Windows
Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.16xxx.0\Generic\generic.xaml
and manually put them in my App.xaml. For example, the following style will be applied to the first button on the InkToolbar only.
<Style x:Key="InkToolbarCommonButtonStyle"
TargetType="ToggleButton">
<Setter Property="MinWidth"
Value="{ThemeResource InkToolbarButtonWidth}" />
<Setter Property="MinHeight"
Value="{ThemeResource InkToolbarButtonHeight}" />
<Setter Property="MaxWidth"
Value="{ThemeResource InkToolbarButtonWidth}" />
<Setter Property="MaxHeight"
Value="{ThemeResource InkToolbarButtonHeight}" />
<Setter Property="BorderThickness"
Value="{ThemeResource ButtonRevealBorderThemeThickness}" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Foreground"
Value="{ThemeResource InkToolbarButtonForegroundThemeBrush}" />
<Setter Property="BorderBrush"
Value="{ThemeResource ButtonRevealBorderBrush}"/>
<Setter Property="FocusVisualMargin"
Value="-3" />
</Style>
<Style TargetType="InkToolbarBallpointPenButton"
BasedOn="{StaticResource InkToolbarCommonButtonStyle}">
<Setter Property="AutomationProperties.AutomationId"
Value="InkToolbarBallpointPenButton" />
<Setter Property="MinStrokeWidth"
Value="1" />
<Setter Property="MaxStrokeWidth"
Value="24" />
<Setter Property="SelectedStrokeWidth"
Value="4" />
<Setter Property="UseSystemFocusVisuals"
Value="True" />
<Setter Property="SelectedBrushIndex"
Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="InkToolbarBallpointPenButton">
<Grid x:Name="RootElement"
Background="{TemplateBinding Background}"
Width="{ThemeResource InkToolbarButtonWidth}"
Height="{ThemeResource InkToolbarButtonHeight}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="RootElement.(RevealBrush.State)"
Value="PointerOver" />
<Setter Target="RootElement.Background"
Value="{ThemeResource ButtonRevealBackgroundPointerOver}" />
<Setter Target="RootElement.BorderBrush"
Value="{ThemeResource ButtonRevealBorderBrushPointerOver}" />
<Setter Target="Content.Foreground"
Value="{ThemeResource ButtonForegroundPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="RootElement.(RevealBrush.State)"
Value="Pressed" />
<Setter Target="RootElement.Background"
Value="{ThemeResource ButtonRevealBackgroundPressed}" />
<Setter Target="RootElement.BorderBrush"
Value="{ThemeResource ButtonRevealBorderBrushPressed}" />
<Setter Target="Content.Foreground"
Value="{ThemeResource ButtonForegroundPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="ContentBackground.Fill"
Value="{ThemeResource InkToolbarDisabledBackgroundThemeBrush}" />
<Setter Target="Content.Foreground"
Value="{ThemeResource InkToolbarDisabledForegroundThemeBrush}" />
<Setter Target="CheckedContent.Foreground"
Value="{ThemeResource InkToolbarDisabledForegroundThemeBrush}" />
<Setter Target="ExtensionGlyph.Foreground"
Value="{ThemeResource InkToolbarDisabledForegroundThemeBrush}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="Content.Opacity"
Value="0" />
<Setter Target="CheckedContent.Opacity"
Value="1" />
<Setter Target="SelectionAccent.Opacity"
Value="1" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
<VisualStateGroup x:Name="GlyphVisualStates">
<VisualState x:Name="ShowExtensionGlyph">
<VisualState.Setters>
<Setter Target="ExtensionGlyph.Opacity"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="HideExtensionGlyph" />
</VisualStateGroup>
<VisualStateGroup x:Name="FlowDirectionStates">
<VisualState x:Name="LeftToRight" />
<VisualState x:Name="RightToLeft">
<VisualState.Setters>
<Setter Target="ContentTransform.ScaleX"
Value="-1" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ButtonFlyoutDirectionStates">
<VisualState x:Name="BottomDirection" />
<VisualState x:Name="TopDirection">
<VisualState.Setters>
<Setter Target="SelectionAccent.VerticalAlignment"
Value="Bottom" />
<Setter Target="ExtensionGlyph.HorizontalAlignment"
Value="Center" />
<Setter Target="ExtensionGlyph.VerticalAlignment"
Value="Top" />
<Setter Target="ExtensionGlyph.Margin"
Value="0,4,0,0" />
<Setter Target="ExtensionGlyph.Text"
Value="" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="RightDirection">
<VisualState.Setters>
<Setter Target="SelectionAccent.HorizontalAlignment"
Value="Right" />
<Setter Target="SelectionAccent.VerticalAlignment"
Value="Stretch" />
<Setter Target="SelectionAccent.Height"
Value="auto" />
<Setter Target="SelectionAccent.Width"
Value="2" />
<Setter Target="ExtensionGlyph.HorizontalAlignment"
Value="Right" />
<Setter Target="ExtensionGlyph.VerticalAlignment"
Value="Center" />
<Setter Target="ExtensionGlyph.Margin"
Value="0,0,4,0" />
<Setter Target="ExtensionGlyph.Text"
Value="" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="LeftDirection">
<VisualState.Setters>
<Setter Target="SelectionAccent.HorizontalAlignment"
Value="Left" />
<Setter Target="SelectionAccent.VerticalAlignment"
Value="Stretch" />
<Setter Target="SelectionAccent.Height"
Value="auto" />
<Setter Target="SelectionAccent.Width"
Value="2" />
<Setter Target="ExtensionGlyph.HorizontalAlignment"
Value="Left" />
<Setter Target="ExtensionGlyph.VerticalAlignment"
Value="Center" />
<Setter Target="ExtensionGlyph.Margin"
Value="4,0,0,0" />
<Setter Target="ExtensionGlyph.Text"
Value="" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="RightDirectionRTL">
<VisualState.Setters>
<Setter Target="SelectionAccent.HorizontalAlignment"
Value="Right" />
<Setter Target="SelectionAccent.VerticalAlignment"
Value="Stretch" />
<Setter Target="SelectionAccent.Height"
Value="auto" />
<Setter Target="SelectionAccent.Width"
Value="2" />
<Setter Target="ExtensionGlyph.HorizontalAlignment"
Value="Right" />
<Setter Target="ExtensionGlyph.VerticalAlignment"
Value="Center" />
<Setter Target="ExtensionGlyph.Margin"
Value="0,0,4,0" />
<Setter Target="ExtensionGlyph.Text"
Value="" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="LeftDirectionRTL">
<VisualState.Setters>
<Setter Target="SelectionAccent.HorizontalAlignment"
Value="Left" />
<Setter Target="SelectionAccent.VerticalAlignment"
Value="Stretch" />
<Setter Target="SelectionAccent.Height"
Value="auto" />
<Setter Target="SelectionAccent.Width"
Value="2" />
<Setter Target="ExtensionGlyph.HorizontalAlignment"
Value="Left" />
<Setter Target="ExtensionGlyph.VerticalAlignment"
Value="Center" />
<Setter Target="ExtensionGlyph.Margin"
Value="4,0,0,0" />
<Setter Target="ExtensionGlyph.Text"
Value="" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="ContentBackground"
Fill="Transparent" />
<TextBlock x:Name="ExtensionGlyph"
Style="{StaticResource InkToolbarExtensionGlyphStyle}"
AutomationProperties.AccessibilityView="Raw" />
<Grid RenderTransformOrigin="0.5, 0.5">
<Grid.RenderTransform>
<ScaleTransform x:Name="ContentTransform" />
</Grid.RenderTransform>
<TextBlock x:Name="Content"
Style="{StaticResource InkToolbarGlyphFontStyle}"
Text=""
AutomationProperties.AccessibilityView="Raw"
Canvas.ZIndex="1"
Foreground="{ThemeResource InkToolbarButtonForegroundThemeBrush}" />
<TextBlock x:Name="CheckedContent"
Style="{StaticResource InkToolbarGlyphFontStyle}"
Text=""
AutomationProperties.AccessibilityView="Raw"
Canvas.ZIndex="1"
Foreground="{ThemeResource InkToolbarButtonSelectedForegroundThemeBrush}"
Opacity="0" />
<TextBlock x:Name="ContentFillGlyph"
Text=""
Style="{StaticResource InkToolbarGlyphFillFontStyle}"
TextAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
Opacity="1"
Canvas.ZIndex="0"
Foreground="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedBrush, Mode=OneWay}" />
</Grid>
<Rectangle x:Name="SelectionAccent"
Style="{StaticResource InkToolbarSelectionAccentStyle}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Please note that I had to replace RevealBrushHelper with RevealBrush. The Microsoft doc is using the former though. It could be that I am using an older version of Windows 10 SDK (16232) or the doc is not up-to-date. So pick whatever that doesn't break. :)
Also, in order for the light to show, you will have to put your InkToolbar on a darker background.
<Border Background="{ThemeResource SystemControlBackgroundBaseLowBrush}" Grid.Row="1">
<InkToolbar Margin="24" />
</Border>
I have created a sample here with all the reveal lighting enabled button styles and below is a working demo. Enjoy! :)