c# - XAML 重用标记 block

Question

假设我有多个页面，我想在每个页面中显示相同的“页眉”而无需多次复制和粘贴:这是非常难以维护的。

    <!--  #region Header  -->

    <Grid Grid.Row="0">

        <Rectangle Style="{StaticResource HeaderBackground}" />
        <TextBlock 
                   Style="{StaticResource PageTitle}"
                   Text="Page1" />
        <Button 
                Content="Settings"
                Command="{Binding GotoSettingsPage}" />

    </Grid>

    <!--  #endregion Header  -->

使这个标记 block 可重用的选项有哪些？例如，写这样的东西会很好:

<MyHeader Grid.Row="0" PageTitle="Page1" />

Answer 1

用户控件是一个选项。

MyHeader.Xaml:

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

    <Grid>
        <Rectangle Style="{StaticResource HeaderBackground}" />
        <TextBlock x:Name="Title"
                   Style="{StaticResource PageTitleStyle}"
                   Text="" />
        <Button Content="Settings"
                Command="{Binding GotoSettingsPage}"/>
    </Grid>
</UserControl>

MyHeader.Xaml.cs:

using Windows.UI.Xaml.Controls;

namespace App1
{
    public sealed partial class MyHeader : UserControl
    {
        public MyHeader()
        {
            this.InitializeComponent();
        }

        public string PageTitle
        {
            get { return Title.Text; }
            set { Title.Text = value ?? ""; }
        }
    }
}

主页.Xaml:

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <local:MyHeader PageTitle="Page 1"/>
    </Grid>
</Page>