XAML VisualStateManager UWP

Question

我想知道是否可以在一个单独的VisualState文件(独立于MainPage)中定义一个.xaml，但是这当然需要在MainPage中运行。我希望创建独立于MainPage的文件，这些文件可以处理应用程序的样式等问题，并且希望能够使用VisualStateManager来完成这些工作，但到目前为止还无法做到这一点。

任何帮助都将不胜感激。

谢谢。

Answer 1

我想知道是否可以在一个单独的VisualState文件(独立于MainPage)中定义一个.xaml，但是这当然需要在MainPage中运行。

实现此功能的最佳实践是使UserControl。您可以在您的VisualStateGroup中创建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>

在代码隐藏中，设置DependencyProperty，以便我们可以使用它们来设置其他页面中的内容。

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); }
    }
}

在您的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>