XAML VisualStateManager UWP

Question

I wanted to know if it was possible to define a VisualState within a separate .xaml file (separate from the MainPage) but of course this would need to be run within the MainPage. I am looking to create files separate to the MainPage that can handle things such as style of the application and so on, and would like to be able to do this with the VisualStateManager but have so far not been able to.

Any help would be greatly appreciated.

Thanks.

Answer 1

I wanted to know if it was possible to define a VisualState within a separate .xaml file (separate from the MainPage) but of course this would need to be run within the MainPage.

The best practice to achieve this feature is to make UserControl. And you could create VisualStateGroup in your UserControl.

<Grid x:Name="RootLayout" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="AdaptiveVisualStateGroup">
            <VisualState x:Name="VisualStateNarrow">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="{StaticResource NarrowMinWidth}" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="RootLayout.Background" Value="Red" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="VisualStateNormal">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="{StaticResource NormalMinWidth}" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="RootLayout.Background" Value="Blue" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="VisualStateWide">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="{StaticResource WideMinWidth}" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="RootLayout.Background" Value="Green" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <ContentPresenter Grid.Row="1" Content="{x:Bind Main}" />
</Grid>

In the code-behind, set the DependencyProperty so that we can use them to set the content in other pages.

public sealed partial class PageUserControl : UserControl
{
    public PageUserControl()
    {
        this.InitializeComponent();
    }

    public static readonly DependencyProperty MainProperty = DependencyProperty.Register("Main", typeof(object), typeof(PageUserControl), new PropertyMetadata(null));

    public object Main
    {
        get { return GetValue(MainProperty); }
        set { SetValue(MainProperty, value); }
    }
}

Use it in your MainPage

<Page
    x:Class="Test.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Test"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <local:PageUserControl>
        <local:PageUserControl.Main>
            <Grid>
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="60" Text="Hello"></TextBlock>
            </Grid>
        </local:PageUserControl.Main>
    </local:PageUserControl>
</Page>