I have created an adaptive triggers with two different views. All Setters works fine when program is started independently from the resolution, but after resizing when we reach a breakpiont there is a problem with a proper arrangement. This confuse me.
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SmallScreen">
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ImgPanel.(Grid.Row)" Value="0"/>
<Setter Target="ImgPanel.(Grid.Column)" Value="0"/>
<Setter Target="TextPanel.(Grid.Row)" Value="1"/>
<Setter Target="TextPanel.(Grid.Column)" Value="0"/>
<Setter Target="ImgPanel.(Grid.ColumnSpan)" Value="2"/>
<Setter Target="TextPanel.(Grid.ColumnSpan)" Value="2"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BigScreen">
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ImgPanel.(Grid.Row)" Value="0"/>
<Setter Target="ImgPanel.(Grid.Column)" Value="0"/>
<Setter Target="TextPanel.(Grid.Row)" Value="0"/>
<Setter Target="TextPanel.(Grid.Column)" Value="1"/>
<Setter Target="ImgPanel.(Grid.ColumnSpan)" Value="1"/>
<Setter Target="TextPanel.(Grid.ColumnSpan)" Value="1"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Pivot Title="Pivot">
<PivotItem Header="Head">
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel x:Name="ImgPanel">
<Image x:Name="Image" Source="/Assets/someImage.jpg" Width="200" />
<TextBlock x:Name="TitleTxt" Text="Title" FontWeight="Bold" FontSize="18.667" HorizontalAlignment="Center"/>
</StackPanel>
<StackPanel x:Name="TextPanel">
<Rectangle Height="32" Fill="#C33D27" />
<TextBlock x:Name="Text" Text="Place for long text" TextTrimming="WordEllipsis" TextWrapping="Wrap" />
</StackPanel>
</Grid>
</ScrollViewer>
</PivotItem>
That's because those two VisualStates are in two different VisualStateGroups. Each VisualStateGroup can have one VisualState active, so this means that in your case both VisualStates get active at the same time.
At first, only the MinWindowWidth VisualState is active. When you resize the window, that activates the second VisualState. To fix it, make sure that those VisualStates are in the same VisualStateGroup.
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SmallScreen">
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ImgPanel.(Grid.Row)" Value="0"/>
<Setter Target="ImgPanel.(Grid.Column)" Value="0"/>
<Setter Target="TextPanel.(Grid.Row)" Value="1"/>
<Setter Target="TextPanel.(Grid.Column)" Value="0"/>
<Setter Target="ImgPanel.(Grid.ColumnSpan)" Value="2"/>
<Setter Target="TextPanel.(Grid.ColumnSpan)" Value="2"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ImgPanel.(Grid.Row)" Value="0"/>
<Setter Target="ImgPanel.(Grid.Column)" Value="0"/>
<Setter Target="TextPanel.(Grid.Row)" Value="0"/>
<Setter Target="TextPanel.(Grid.Column)" Value="1"/>
<Setter Target="ImgPanel.(Grid.ColumnSpan)" Value="1"/>
<Setter Target="TextPanel.(Grid.ColumnSpan)" Value="1"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Related
I am new to Xamarin and I wanted to try changing the radio button's appearance. But with my current codes I get the error Cannot resolve property type "TextColor" on type "Grid".
Here are my codes:
<ContentPage.Resources>
<ControlTemplate x:Key="RadioButtonTemplate">
<Grid RowSpacing="0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter TargetName="checkBorderTop"
Property="BackgroundColor"
Value="{x:StaticResource PrimaryColor}"/>
<Setter TargetName="checkBorderBot"
Property="BackgroundColor"
Value="{x:StaticResource PrimaryColor}"/>
<Setter TargetName="check"
Property="BackgroundColor"
Value="{x:StaticResource PrimaryShade}"/>
<Setter TargetName="checkIcon"
Property="TextColor"
Value="{x:StaticResource PrimaryColor}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter TargetName="checkBorderTop"
Property="BackgroundColor"
Value="Transparent"/>
<Setter TargetName="checkBorderBot"
Property="BackgroundColor"
Value="Transparent"/>
<Setter TargetName="check"
Property="BackgroundColor"
Value="Transparent"/>
<Setter TargetName="checkIcon"
Property="TextColor"
Value="Black"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="2"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="2"/>
</Grid.RowDefinitions>
<BoxView x:Name="checkBorderTop"
Grid.Row="0"/>
<Frame x:Name="check"
BorderColor="Transparent"
Margin="0"
Padding="20, 10"
Grid.Row="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Label x:Name="checkIcon"
Text="{x:Static icon:FontAwesomeIcons.Paw}"
FontFamily="IconSolid"
HorizontalOptions="Start"
FontSize="20"
VerticalTextAlignment="Center"/>
<ContentPresenter Grid.Column="1"/>
</Grid>
</Frame>
<BoxView x:Name="checkBorderBot"
Grid.Row="2"
Margin="0"/>
</Grid>
</ControlTemplate>
<Style TargetType="RadioButton">
<Setter Property="ControlTemplate"
Value="{StaticResource RadioButtonTemplate}" />
</Style>
</ContentPage.Resources>
Here is my expected output:
The code works well on changing the background color and border. But when I add
<Setter TargetName="checkIcon"
Property="TextColor"
Value="{x:StaticResource PrimaryColor}"/>
the error shows. I can't manage to change the Paw icon color when checked and unchecked.
I think its on the hierarchy between the parent and child elements since the label is on the most inner child, idk.
Need help from those who know the answer :(
Thank you in advance
You can check Visual State Manager.
It's often necessary to share the same Visual State Manager markup among two or more views.
That is to say you can use Style for the Grid elements in the View page:
<Style TargetType="Grid">
<Setter Property="RowSpacing" Value="0" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter TargetName="checkBorderTop"
Property="BackgroundColor"
Value="{x:StaticResource PrimaryColor}"/>
<Setter TargetName="checkBorderBot"
Property="BackgroundColor"
Value="{x:StaticResource PrimaryColor}"/>
<Setter TargetName="check"
Property="BackgroundColor"
Value="{x:StaticResource PrimaryShade}"/>
<Setter TargetName="checkIcon"
Property="TextColor"
Value="{x:StaticResource PrimaryColor}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter TargetName="checkBorderTop"
Property="BackgroundColor"
Value="Transparent"/>
<Setter TargetName="checkBorderBot"
Property="BackgroundColor"
Value="Transparent"/>
<Setter TargetName="check"
Property="BackgroundColor"
Value="Transparent"/>
<Setter TargetName="checkIcon"
Property="TextColor"
Value="Black"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
Wish it could be helpful to you.
I have set a background color and text color and some other color properties like disable and unselected colors, but none seem to change the selected item background color.
Which if the properties below will I have to change to make it look the way I want? Or else what do I need to add on my code?
I have the following:
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="Example"
x:Class="TrackBus.AppShell"
FlyoutHeaderBehavior="CollapseOnScroll"
FlyoutBackgroundColor="{StaticResource Primary}">
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.ForegroundColor" Value="White" />
<!--Foreground is the menu icon color-->
<Setter Property="Shell.TitleColor" Value="White" />
<Setter Property="Shell.DisabledColor" Value="Magenta" />
<Setter Property="Shell.UnselectedColor" Value="Cyan" />
</Style>
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
<Style Class="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="Cyan"></Setter>
</Style>
<Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="Magenta"></Setter>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource Secondary}" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Blue"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource SecondaryLight}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource SecondaryLight}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ResourceDictionary>
</Shell.Resources>
<Shell.ItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="60,Auto">
<Image Source="{Binding FlyoutIcon}"
Margin="5"
HeightRequest="35" />
<Label Grid.Column="1"
Text="{Binding Title}"
VerticalTextAlignment="Center"
FontSize="Title"
TextColor="{StaticResource SecondaryLight}" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
<Shell.MenuItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="60,Auto">
<Image Source="{Binding Icon}"
Margin="5"
HeightRequest="35" />
<Label Grid.Column="1"
Text="{Binding Text}"
VerticalTextAlignment="Center"
FontSize="Title"
TextColor="{StaticResource SecondaryLight}"/>
</Grid>
</DataTemplate>
</Shell.MenuItemTemplate>
Primary is dark blue and
SecondaryLight is yellow
Currently I have this:
I want it to look like this:
We need to override the FlyoutItemLayoutStyle ,MenuItemLayoutStyle and modify the value in CommonStates and Selected .
<Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Orange" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Orange" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Black" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<!--
Custom Style you can apply to any Flyout Item
-->
<Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Orange" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Orange" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Black" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
What worked for me was to make a custom FloutItemStyle template, just as you did inside your ResourceDictionary, like this:
<Style x:Key="FloutItemStyle" TargetType="Grid">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Orange"/>
<Setter TargetName="_label" Property="Label.TextColor" Value="Black" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
Then, with that template, I changed the flyout item appearance similar to what we can find in the official documentation:
<Shell.ItemTemplate>
<DataTemplate>
<Grid Style="{StaticResource FloutItemStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<Image Source="{Binding FlyoutIcon}"
Margin="10"
HeightRequest="50"
HorizontalOptions="EndAndExpand" />
<Label Grid.Column="1"
Text="{Binding Title}"
TextColor="{StaticResource LightTextColor}"
FontSize="Body"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
x:Name="_label">
</Label>
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
But the most critical part is to assign a name to the Label with the x:Name="_label" property to be able to find it with the selected target item (TargetName="_label").
Finally I just added my menu item (Even with some FontAwesome icons in my case):
<FlyoutItem Title="MyMenuItem">
<FlyoutItem.Icon>
<FontImageSource
FontFamily="{StaticResource FontAwesomeSolid}"
Size="Large"
Glyph="{x:Static fontawesome:FontAwesomeIcons.User}"
Color="{StaticResource LightTextColor}">
</FontImageSource>
</FlyoutItem.Icon>
<ShellContent ContentTemplate="{DataTemplate local:Index}" />
</FlyoutItem>
Hope this answer helps anyone trying to customize every part of their menus, including label colors.
I can use VisualStateManager to change individual properties of controls. Something like this:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<!--small window-->
<AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Control1.FontSize" Value="13"/>
<Setter Target="Control2.FontSize" Value="13"/>
<Setter Target="Control3.FontSize" Value="13"/>
<Setter Target="Control4.FontSize" Value="13"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<!--large window-->
<AdaptiveTrigger MinWindowHeight="665" MinWindowWidth="1000"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Control1.FontSize" Value="24"/>
<Setter Target="Control2.FontSize" Value="24"/>
<Setter Target="Control3.FontSize" Value="24"/>
<Setter Target="Control4.FontSize" Value="24"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
This works but is soooo much typing!
Is it possible to use VisualStateManager to set a value for the font and than refer to this variable in XAML?
Something like this:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<!--small window-->
<AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="#MyFontSize" Value="13"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<!--large window-->
<AdaptiveTrigger MinWindowHeight="665" MinWindowWidth="1000"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="#MyFontSize" Value="24"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
I could then use #MyFontSize variable in XAML when designing controls and I could change it in one place.
<TextBlock x:Name="Control1" FontSize="#MyFontSize"/>
<TextBlock x:Name="Control2" FontSize="#MyFontSize"/>
<TextBlock x:Name="Control3" FontSize="#MyFontSize"/>
Is it possible to do something like this with UWP VisualStateManager?
Is it possible to use VisualStateManager to set a value for the font and than refer to this variable in XAML
I'm afraid you can't set variable within VisualStateManager, But for your scenario, we have a workaround that use Setting class as medium and effect other TextControl with MVVM bind.
For example
public class Setting : INotifyPropertyChanged
{
private double _fontSize = 10;
public double CFontSize
{
get { return _fontSize; }
set { _fontSize = value; OnPropertyChanged(); }
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Usage
<Page.Resources>
<local:Setting x:Key="Setting" />
</Page.Resources>
<StackPanel>
<TextBlock
x:Name="BaseControl"
VerticalAlignment="Center"
FontSize="{Binding CFontSize, Source={StaticResource Setting}, Mode=TwoWay}"
Text="Hello" />
<TextBlock
x:Name="Control1"
VerticalAlignment="Center"
FontSize="{Binding CFontSize, Source={StaticResource Setting}, Mode=TwoWay}"
Text="How are you" />
<TextBlock
x:Name="Control2"
VerticalAlignment="Center"
FontSize="{Binding CFontSize, Source={StaticResource Setting}, Mode=TwoWay}"
Text="Fine thank you, and you?" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<!-- small window -->
<AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="BaseControl.FontSize" Value="13" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<!-- large window -->
<AdaptiveTrigger MinWindowHeight="665" MinWindowWidth="1000" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="BaseControl.FontSize" Value="24" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</StackPanel>
Found a similar but simpler way to do this inspired by #Nico Zhu's approach. Sharing here in case someone else finds it useful.
My approach is to use one control as a template and bind all other controls of that type to it.
The VisualStateManager sets the property for the "master" controls:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<!--VisualState to be triggered when window width is <665 effective pixels.-->
<AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="txtHeader.FontSize" Value="13"/>
<Setter Target="txtRegular.FontSize" Value="10"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowHeight="665" MinWindowWidth="1000"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="txtHeader.FontSize" Value="20"/>
<Setter Target="txtRegular.FontSize" Value="16"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
All other controls can bind to "master" controls.
<TextBlock Text="My Header 1" FontSize="{Binding ElementName=txtHeader, Path=FontSize}" />
<TextBlock Text="My Header 2" FontSize="{Binding ElementName=txtHeader, Path=FontSize}" />
<TextBlock Text="My regular text 1" FontSize="{Binding ElementName=txtRegular, Path=FontSize}" />
<TextBlock Text="My regular text 2" FontSize="{Binding ElementName=txtRegular, Path=FontSize}" />
When a user resizes page, VisualStateManager will change the master controls, all others will get it through binding.
If you want to, you can create hidden controls just to server as templates.
Animation is pretty simple! In idle state -- the highlighter rectangle sits in one of the selected rows. But as soon as another row is selected, the rectangle grows in length(almost like its made of elastic) and ends up in another row.
For detailed animation, check out the XAML control gallery app!
The NavigationView new control provides a collapsible navigation menu for top-level navigation in your app and it contain highlighter rectangle sits animation. Please note it only works in Windows 10 Fall Creators Update. You could use it to realize hamburg menu with highlight animation directly like following.
Usage
<NavigationView Loaded="NavigationView_Loaded" Margin="0,12,0,0" Grid.Row="1" SelectionChanged="NavigationView_SelectionChanged"
x:Name="nvSample"
IsSettingsVisible="{Binding ElementName=settingsCheck,Path=IsChecked}" IsTabStop="False"
Header="This is header text.">
<NavigationView.MenuItems>
<NavigationViewItem Icon="Play" Content="Menu Item1" Tag="SamplePage1" />
<NavigationViewItemSeparator/>
<NavigationViewItem Icon="Save" Content="Menu Item2" Tag="SamplePage2" />
<NavigationViewItem Icon="Refresh" Content="Menu Item3" Tag="SamplePage3" />
</NavigationView.MenuItems>
<Frame x:Name="contentFrame">
</Frame>
</NavigationView>
For more you could refer Navigation view official document.
I have found SelectionIndicator in the NavigationViewItem stlye. You could find detail about SelectionIndicator. Unfortunately, The implementation of the animation is not in this style.
<Style x:Key="NavigationViewItemStyle1" TargetType="NavigationViewItem">
<Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}" />
<Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
<Setter Property="BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrush}" />
<Setter Property="BorderThickness" Value="{StaticResource NavigationViewItemBorderThickness}" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="NavigationViewItem">
<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" Height="40" Control.IsTemplateFocusTarget="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PointerStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundPointerOver}" />
<Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
<Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundPressed}" />
<Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="Red" />
<Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelected}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelected}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOverSelected">
<VisualState.Setters>
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelectedPointerOver}" />
<Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelectedPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PressedSelected">
<VisualState.Setters>
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
<Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelectedPressed}" />
<Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelectedPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPressed}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DisabledStates">
<VisualState x:Name="Enabled" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="LayoutRoot.Opacity" Value="{ThemeResource ListViewItemDisabledThemeOpacity}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="PaneStates">
<VisualState x:Name="NotClosedCompact" />
<VisualState x:Name="ClosedCompact">
<VisualState.Setters>
<Setter Target="RevealBorder.HorizontalAlignment" Value="Left" />
<Setter Target="RevealBorder.Width" Value="{Binding CompactPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="IconStates">
<VisualState x:Name="IconVisible" />
<VisualState x:Name="IconCollapsed">
<VisualState.Setters>
<Setter Target="IconBox.Visibility" Value="Collapsed" />
<Setter Target="IconColumn.Width" Value="16" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid HorizontalAlignment="Left" VerticalAlignment="Center">
<Rectangle x:Name="SelectionIndicator" Fill="{ThemeResource NavigationViewSelectionIndicatorForeground}" Height="24" Opacity="0.0" Width="3" />
</Grid>
<Border x:Name="RevealBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" />
<Grid HorizontalAlignment="Left" Height="40">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="IconColumn" Width="48" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Viewbox x:Name="IconBox" Child="{TemplateBinding Icon}" Margin="16,12" />
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Update
For SelectionIndicator animation, you could split it into multiple parts Vertical translation, Height transformation Collapsed Scale and Visible. So you could create a animation storyboard to describe both of them and bind the storyboard with different VisualState.
And #Vijay Nirmal also provide inspiration from Continuity Tab that you could refer.
I want to have a custom rounded button, when focused it should change the color inside the border control.
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="Margin" Value="0" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="{TemplateBinding Background}" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Target="BorderRadius.BorderBrush" Value="Green" />
<Setter Target="BorderRadius.Background" Value="Transparent" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="BorderRadius.BorderBrush" Value="White" />
<Setter Target="BorderRadius.Background" Value="Blue" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="BorderRadius.BorderBrush" Value="White" />
<Setter Target="BorderRadius.Background" Value="Blue" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Focus" >
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderRadius" Storyboard.TargetProperty="BorderBrush" To="Blue"/>
</Storyboard>
<!--<VisualState.Setters>
<Setter Target="BorderRadius.BorderBrush" Value="White"/>
<Setter Target="BorderRadius.Background" Value="Blue"/>
</VisualState.Setters>-->
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel>
<Border
x:Name="BorderRadius"
BorderThickness="1"
CornerRadius="22"
VerticalAlignment="Center"
HorizontalAlignment="Left"
>
<TextBlock
x:Name="MyText"
Text="{TemplateBinding Content}"
FontFamily="{TemplateBinding FontFamily}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="{TemplateBinding FontSize}"
/>
</Border>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
On xbox the 'normal', 'pressed' visualstates work fine, but i can't use the 'focus' visual state, meaning i cant make it change it's color when using the gamepad. When i use the left stick to the button, the button default black border appears but the 'focus' visual state is not triggered.