XAML 视觉状态管理器 UWP答案

【问题标题】：XAML VisualStateManager UWPXAML 视觉状态管理器 UWP
【发布时间】：2018-01-22 16:11:08
【问题描述】：

我想知道是否可以在单独的 .xaml 文件（与 MainPage 分开）中定义 VisualState，但当然这需要在 MainPage 中运行。我希望创建与 MainPage 分开的文件，这些文件可以处理诸如应用程序样式等内容，并且希望能够使用 VisualStateManager 来执行此操作，但到目前为止还不能。

任何帮助将不胜感激。

谢谢。

【问题讨论】：

标签： c# uwp-xaml

【解决方案1】：

我想知道是否可以在单独的 .xaml 文件（与 MainPage 分开）中定义 VisualState，但这当然需要在 MainPage 中运行。

实现此功能的最佳做法是创建UserControl。您可以在您的UserControl 中创建VisualStateGroup。

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

在您的主页中使用它

<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>

【讨论】：

谢谢，这正是我想要的。