MyToolkit
MyToolkit copied to clipboard
RicoSuter
MtPage and VisualState
Visual state does not work when using MtPage but work with standard Page.
In this example border is always but should be green or blue depending on screen size.
<paging:MtPage
xmlns:paging="using:MyToolkit.Paging"
x:Class="someproject.Views.TestPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:someproject.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
RequestedTheme="Light">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState
x:Name="Normal">
<VisualState.Setters>
<Setter
Target="SomeControl.Background"
Value="Green"></Setter>
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger
MinWindowWidth="400"></AdaptiveTrigger>
</VisualState.StateTriggers>
</VisualState>
<VisualState
x:Name="Mobile">
<VisualState.Setters>
<Setter
Target="SomeControl.Background"
Value="Blue"></Setter>
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger
MinWindowWidth="0"></AdaptiveTrigger>
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border
x:Name="SomeControl"
Width="100"
Height="100"
Background="Red" />
</Grid>
</paging:MtPage>
But using ContentControl everything is ok. I use this as a workaround.
In this example left square is green/blue and right is always red.
<paging:MtPage
xmlns:paging="using:MyToolkit.Paging"
x:Class="someproject.Views.TestPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:someproject.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<paging:MtPage.Resources>
<Style
x:Key="TestStatesStyle"
TargetType="ContentControl">
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="ContentControl">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState
x:Name="Normal">
<VisualState.Setters>
<Setter
Target="SomeControl2.Background"
Value="Green"></Setter>
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger
MinWindowWidth="400"></AdaptiveTrigger>
</VisualState.StateTriggers>
</VisualState>
<VisualState
x:Name="Mobile">
<VisualState.Setters>
<Setter
Target="SomeControl2.Background"
Value="Blue"></Setter>
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger
MinWindowWidth="0"></AdaptiveTrigger>
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border
VerticalAlignment="Top"
HorizontalAlignment="Left"
x:Name="SomeControl2"
Width="100"
Height="100"
Background="Red" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</paging:MtPage.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ContentControl
Style="{StaticResource TestStatesStyle}">
</ContentControl>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState
x:Name="Normal">
<VisualState.Setters>
<Setter
Target="SomeControl.Background"
Value="Green"></Setter>
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger
MinWindowWidth="400"></AdaptiveTrigger>
</VisualState.StateTriggers>
</VisualState>
<VisualState
x:Name="Mobile">
<VisualState.Setters>
<Setter
Target="SomeControl.Background"
Value="Blue"></Setter>
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger
MinWindowWidth="0"></AdaptiveTrigger>
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border
VerticalAlignment="Top"
HorizontalAlignment="Right"
x:Name="SomeControl"
Width="100"
Height="100"
Background="Red" />
</Grid>
</Grid>
</paging:MtPage>
@rsuter @adamkalicinscy can you tell what is the work around if I have to make adaptive trigger work in MtPage? You mean it will work only in case of putting in style of content control?
@rsuter I think that I meet a similar case when I try to reproduce the code from a Master/Details plus Selection sample (https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlListView
In this sample, some VisualStateGroup and VisualState are defined: `<paging:MtPage xmlns:paging="using:MyToolkit.Paging" x:Class="someproject.Views.TestPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:someproject.Views" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PageSizeStatesGroup"
CurrentStateChanged="OnCurrentStateChanged">
<VisualState x:Name="WideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MasterListView.Visibility" Value="Visible" />
<Setter Target="DetailContentPresenter.Visibility" Value="Visible" />
<Setter Target="MasterColumn.Width" Value="320" />
<Setter Target="DetailColumn.Width" Value="*"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MasterListView.Visibility" Value="Visible" />
<Setter Target="DetailContentPresenter.Visibility" Value="Collapsed" />
<Setter Target="MasterColumn.Width" Value="*" />
<Setter Target="DetailColumn.Width" Value="0"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="MasterDetailsStatesGroup">
<VisualState x:Name="MasterState">
<VisualState.Setters>
<Setter Target="MasterListView.SelectionMode" Value="None" />
<Setter Target="MasterListView.IsItemClickEnabled" Value="True" />
<!--#region App Bar Commands-->
<Setter Target="SelectItmesBtn.Visibility" Value="Visible" />
<Setter Target="AddItemBtn.Visibility" Value="Visible" />
<Setter Target="DeleteItemBtn.Visibility" Value="Collapsed" />
<Setter Target="DeleteItemsBtn.Visibility" Value="Collapsed" />
<Setter Target="CancelSelectionBtn.Visibility" Value="Collapsed" />
<!--#endregion-->
</VisualState.Setters>
</VisualState>
<VisualState x:Name="MasterDetailsState">
<VisualState.Setters>
<Setter Target="MasterListView.SelectionMode" Value="Extended" />
<Setter Target="MasterListView.IsItemClickEnabled" Value="False" />
<!--#region App Bar Commands-->
<Setter Target="SelectItmesBtn.Visibility" Value="Visible" />
<Setter Target="AddItemBtn.Visibility" Value="Visible" />
<Setter Target="DeleteItemBtn.Visibility" Value="Visible" />
<Setter Target="DeleteItemsBtn.Visibility" Value="Collapsed" />
<Setter Target="CancelSelectionBtn.Visibility" Value="Collapsed" />
<!--#endregion-->
</VisualState.Setters>
</VisualState>
<VisualState x:Name="ExtendedSelectionState">
<VisualState.Setters>
<!--#region App Bar Commands-->
<Setter Target="SelectItmesBtn.Visibility" Value="Collapsed" />
<Setter Target="AddItemBtn.Visibility" Value="Collapsed" />
<Setter Target="DeleteItemBtn.Visibility" Value="Collapsed" />
<Setter Target="DeleteItemsBtn.Visibility" Value="Visible" />
<Setter Target="CancelSelectionBtn.Visibility" Value="Collapsed" />
<!--#endregion-->
</VisualState.Setters>
</VisualState>
<VisualState x:Name="MultipleSelectionState">
<VisualState.Setters>
<Setter Target="MasterListView.SelectionMode" Value="Multiple" />
<Setter Target="MasterListView.IsItemClickEnabled" Value="False" />
<!--#region App Bar Commands-->
<Setter Target="SelectItmesBtn.Visibility" Value="Collapsed" />
<Setter Target="AddItemBtn.Visibility" Value="Collapsed" />
<Setter Target="DeleteItemBtn.Visibility" Value="Collapsed" />
<Setter Target="DeleteItemsBtn.Visibility" Value="Visible" />
<Setter Target="CancelSelectionBtn.Visibility" Value="Visible" />
<!--#endregion-->
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!--
...
-->
</Grid>
/paging:MtPage`
But it seems that there are not recognized, as the code-behind doesn't work: the CurrentState is always setted to null...
if (PageSizeStatesGroup.CurrentState == WideState)
Is there a way to fix it?
