如何在XAML中创建主布局模板 [英] How to create a main layout template in XAML

问题描述

我是Windows开发的新手.我正在制作一个简单的Windows应用程序，其中包含几个页面，并且每个页面在XAML中的布局都相似.像这样:

I'm new to windows development. I'm making a simple windows app which has a few pages and each page has a similar layout in XAML. Like this:

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

Each page is separated into 3 sections. A will have a title, B is where the content will be inserted and C is for other stuff. My question is: what is the simplest way to build a general layout template so that I can reuse it for every page? And is it possible?

例如，我有一个MainTemplate.xaml文件，其布局如下:

For example, I have a MainTemplate.xaml file with this layout:

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

然后我的Page1.xaml将加载MainTemplate，因此我不必将相同的布局复制并粘贴到我的每个页面中.我尝试过在线查找，但解决方案超出了我的脑海.我想知道是否有一种简单的方法可以像网页一样做到这一点.非常感谢.

And then my Page1.xaml will load MainTemplate so I don't have to copy and paste the same layout into every page of mine. I've tried looking online but the solutions are going way over my head. I was wondering if there's a simple way to do this like with webpages.Thanks a lot.

推荐答案

一种可行的方法是将UserControl与ContentPresenter结合使用.例如:

One feasible way to do this is using UserControl with ContentPresenter. For example:

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

Add a UserControl named MainTemplate. In the XAML, set the layout with ContentPresenter and bind it to the DependencyProperty defined in code-behind.

<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，以便我们可以使用它们在其他页面中设置内容.

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

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"中使用它:

After this, we can use the UserControl in other pages to reuse the general layout. For example, using it in "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"将如下所示:

Then the "MainPage" will look like follwoing:

这篇关于如何在XAML中创建主布局模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！