XAML VisualStateManager UWP

Question

我想知道是否有可能在單獨的.xaml文件（與MainPage分開）中定義VisualState，但是當然這需要在MainPage中運行。 我正在尋找創建與MainPage分開的文件，這些文件可以處理諸如應用程序樣式之類的事情，並且希望能夠使用VisualStateManager做到這一點，但到目前為止還無法做到。

任何幫助將不勝感激。

謝謝。

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