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
Related
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'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.
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.
How can I use AdaptiveTrigger in Templated Control in Windows 10 (I use Windows 10 Pro Insider Preview Build 10074). Window.Current.SizeChanged event do not fire up when window size change. What is proper way to make fluid control? Here is what I try to do, but nothing happens when change size of screen:
XAML template:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1">
<Style TargetType="local:CustomControl1" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomControl1">
<Border>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualSizeStates">
<VisualState x:Name="Small">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Rect.Fill" Value="Green"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Big">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowHeight="1000" MinWindowWidth="1000" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Rect.Fill" Value="Blue"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="Rect" Fill="Red" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
The trick is that you have to put VisualStateManager with AdaptiveTrigger-s into root control of ControlTemplate otherwise it will not work.
Here is example:
Generic.xaml -->
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AdaptiveLayoutExample">
<Style TargetType="local:CustomControl1" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomControl1">
<Grid x:Name="RootGrid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="RootGrid.Background" Value="Yellow"/>
<Setter Target="MyGrid.Background" Value="White"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="RootGrid.Background" Value="Gray"></Setter>
<Setter Target="MyGrid.Background" Value="Red"></Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="MyGrid" Width="50" Height="50" Background="Black"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
MainPage.xaml -->
<Page
x:Class="AdaptiveLayoutExample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AdaptiveLayoutExample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<local:CustomControl1 Width="100" Height="100"/>
</Grid>
</Page>
I don't think AdaptiveTriggers works in a style like that. The only place I've got it to work is directly in a UserControl or a Grid inside a Page. I know for sure they don't work in a DataTemplate. The VisualStateManager must be before the controls content too I believe. Try a different approach like this:
<!--in app.xaml or something-->
<ControlTemplate x:Key="controlTemplate1" TargetType="MyControl">
<Border Background="Green"/>
</ControlTemplate>
<ControlTemplate x:Key="controlTemplate2" TargetType="MyControl">
<Border Background="Blue"/>
</ControlTemplate>
<!--in your page-->
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="visualStateGroup" >
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="control.Template" Value="{StaticResource controlTemplate1}"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="control.Template" Value="{StaticResource controlTemplate2}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<MyControl x:Name="control" Template="{StaticResource controlTemplate1}"/>
</Grid>
Not tested but let me know how that works out.
Please note that when you don't have a "Big" VisualState to trigger the default settings you will keep having the overwritten ones from the other VisualStates. Might be obvious, but it took some time for me to grasp it.