Как создать основной шаблон макета в XAML

Я новичок в разработке Windows. Я делаю простое приложение для Windows, которое имеет несколько страниц, и каждая страница имеет аналогичный макет в XAML. Нравится:

введите здесь описание изображения

Каждая страница разделена на 3 раздела. A будет иметь заголовок, B — это место, где будет вставлен контент, а C — другие вещи. Мой вопрос: как проще всего создать шаблон общего макета, чтобы я мог повторно использовать его для каждой страницы? И возможно ли это?

Например, у меня есть файл MainTemplate.xaml с таким макетом:

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

И тогда мой Page1.xaml загрузит MainTemplate, поэтому мне не нужно копировать и вставлять один и тот же макет на каждую мою страницу. Я пытался искать в Интернете, но решения идут над моей головой. Мне было интересно, есть ли простой способ сделать это, например, с веб-страницами. Большое спасибо.


layout templates xaml windows-10 uwp
person Moo33    schedule 10.12.2015    source источник
comment
К сожалению, существует множество способов сделать это, каждый из которых имеет свои плюсы и минусы — взгляните, например, на Frames и Pages (поскольку они часто являются основой для приложения UWP). Или вы можете создать собственный элемент управления, в котором могут размещаться другие части.   -  person WiredPrairie    schedule 10.12.2015

Ответы (1)


arrow_upward
4
arrow_downward

Один из возможных способов сделать это — использовать 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>

Тогда «Главная страница» будет выглядеть следующим образом: введите здесь описание изображения

person Jay Zuo    schedule 11.12.2015
comment
Как это сделать без XAML (используя код C#)? - person jbyrd; 28.04.2016