如何在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所以我没有相同的布局复制并粘贴到每个页面我的。我试着在网上寻找，但解决方案正在我的头上。我想知道是否有一个简单的方法来做到这一点，像网页。感谢很多。

Answer 1

一个可行的方法是使用UserControl与ContentPresenter。例如：

添加UserControl名为MainTemplate。在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”看起来就像follwoing：