How to reuse XAML layout from a different class

Question

How can I reuse an existing XAML layout without create the same layout several times and increasing overall app size? I want to access each TextBlock and add different text in each one.

Resuable XAML

<Grid>
    <StackPanel>
        <TextBlock x:Name="txtPlantTitle" Style="{StaticResource HeaderTextBlockStyle}" />
        <TextBlock x:Name="txtPlantSubtitle" Style="{StaticResource SubheaderTextBlockStyle}"/>
        <TextBlock x:Name="txtPlantDetails" Style="{StaticResource NormalTextBlockStyle}"/>
    </StackPanel>
</Grid>

Resuable XAML's C#

public sealed partial class PlantChosen: Page
{
    public PlantChosen()
    {
        this.InitializeComponent();
    }
}

Sunflower XAML

<Grid>

</Grid>

Resuable XAML's C#

public sealed partial class Sunflower: Page
{
    public Sunflower()
    {
        this.InitializeComponent();
    }
}

Answer 1

Hello,

Welcome to Microsoft Q&A!

As @yanxiaodi said, you can reuse your component by creating UserControl.

If we want to create a UserControl with three dependency properties Title, Subtitle and Detail, we can write:

MyReuseControl.xaml

 <Grid>
      <StackPanel>
          <TextBlock x:Name="txtPlantTitle" Text="{x:Bind Title,Mode=OneWay}" Style="{StaticResource HeaderTextBlockStyle}" />
          <TextBlock x:Name="txtPlantSubtitle" Text="{x:Bind Subtitle,Mode=OneWay}" Style="{StaticResource SubheaderTextBlockStyle}"/>
          <TextBlock x:Name="txtPlantDetails" Text="{x:Bind Detail,Mode=OneWay}" Style="{StaticResource NormalTextBlockStyle}"/>
      </StackPanel>
  </Grid>

MyReuseControl.xaml.cs

 public sealed partial class MyReuseControl : UserControl
  {
      public MyReuseControl()
      {
          this.InitializeComponent();
      }
  
      public string Title
      {
          get { return (string)GetValue(TitleProperty); }
          set { SetValue(TitleProperty, value); }
      }
      public string Subtitle
      {
          get { return (string)GetValue(SubtitleProperty); }
          set { SetValue(SubtitleProperty, value); }
      }
      public string Detail
      {
          get { return (string)GetValue(DetailProperty); }
          set { SetValue(DetailProperty, value); }
      }
  
      public static readonly DependencyProperty TitleProperty =
          DependencyProperty.Register("Title", typeof(string), typeof(MyReuseControl), new PropertyMetadata(""));
      public static readonly DependencyProperty SubtitleProperty =
          DependencyProperty.Register("Subtitle", typeof(string), typeof(MyReuseControl), new PropertyMetadata(""));
      public static readonly DependencyProperty DetailProperty =
          DependencyProperty.Register("Detail", typeof(string), typeof(MyReuseControl), new PropertyMetadata(""));
  
  }

How to use

 <MyReuseControl Title="Here is Title" 
                           Subtitle="Here is Subtitle"
                           Detail="Here is Details"
                           />

In the process of creating a control, the control needs to provide an external interface for custom settings. This interface is a dependency property. In the process of defining the control, you can use the code snippet propdp and press the Tab key twice to quickly generate a dependent property template.

If you want to know more about it, you can refer to the following documents:

• UserControl
• Dependency properties overview

Thanks.