如何在 XAML 中创建主布局模板

Question

我是 windows 开发的新手。我正在制作一个简单的 windows 应用程序，它有几个页面，每个页面在 XAML 中都有相似的布局。像这样：

每页分为 3 个部分。 A 将有一个标题，B 是插入内容的位置，C 用于其他内容。我的问题是：构建通用布局模板以便我可以在每个页面上重复使用它的最简单方法是什么？有可能吗？

例如，我有一个具有这种布局的 MainTemplate.xaml 文件：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
</Grid>

然后我的 Page1.xaml 将加载 MainTemplate，这样我就不必将相同的布局复制并粘贴到我的每个页面中。我试过在线查找，但解决方案超出了我的理解范围。我想知道是否有一种简单的方法可以做到这一点，就像 webpages.Thanks 很多。

Answer 1

一种可行的方法是使用 UserControl 和 ContentPresenter。例如：

添加一个名为 MainTemplate 的 UserControl。在 XAML 中，使用 ContentPresenter 设置布局并将其绑定到代码隐藏中定义的 DependencyProperty。

<UserControl x:Class="UWPTest.MainTemplate"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="using:UWPTest"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             d:DesignHeight="300"
             d:DesignWidth="400"
             mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <ContentPresenter Content="{x:Bind Title}" />

        <ContentPresenter Grid.Row="1" Content="{x:Bind Main}" />

        <ContentPresenter Grid.Row="2" Content="{x:Bind Stuff}" />
    </Grid>
</UserControl>

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

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

    public static readonly DependencyProperty TitleProperty = DependencyProperty.Register("Title", typeof(object), typeof(MainTemplate), new PropertyMetadata(null));

    public object Title
    {
        get { return GetValue(TitleProperty); }
        set { SetValue(TitleProperty, value); }
    }

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

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

    public static readonly DependencyProperty StuffProperty = DependencyProperty.Register("Stuff", typeof(object), typeof(MainTemplate), new PropertyMetadata(null));

    public object Stuff
    {
        get { return GetValue(StuffProperty); }
        set { SetValue(StuffProperty, value); }
    }
}

之后，我们可以在其他页面中使用UserControl来复用通用布局。例如，在 "MainPage.xaml":

中使用它

<Page x:Class="UWPTest.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:UWPTest"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">

    <local:MainTemplate>
        <local:MainTemplate.Title>
            <Grid Background="Red">
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="60">A</TextBlock>
            </Grid>
        </local:MainTemplate.Title>
        <local:MainTemplate.Main>
            <Grid Background="Green">
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="60">B</TextBlock>
            </Grid>
        </local:MainTemplate.Main>
        <local:MainTemplate.Stuff>
            <Grid Background="Yellow">
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="60">C</TextBlock>
            </Grid>
        </local:MainTemplate.Stuff>
    </local:MainTemplate>
</Page>

然后 "MainPage" 将如下所示：

如何在 XAML 中创建主布局模板

How to create a main layout template in XAML

layout

xaml

templates

windows-10

uwp