如何在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：