How to reuse XAML layout from a different class

Question

question

ApptacularApps-8305 asked Jun 11, '20 yanxiaodi commented Jun 12, '20

How to reuse XAML layout from a different class

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();
     }
 }

windows-uwp windows-uwp-xaml

· 1

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

yanxiaodi · Jun 11, 2020 at 11:33 AM

Can you create a UserControl?

0 ·

Answer 1 · 2020-06-11T11:53:38.527Z

RichardZhang-MSFT answered Jun 11, '20 yanxiaodi commented Jun 12, '20

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.

· 7

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

ApptacularApps-8305 · Jun 11, 2020 at 10:14 PM

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

How can I use string resources instead of hard-coding?

0 ·

RichardZhang-MSFT ApptacularApps-8305 · Jun 12, 2020 at 07:30 AM

Hello, if you need to do localization, you can check this document, which details how to use text resources. You only need to define x:Uid in the control and add the relevant attributes in the resource file (`.resw`)

1 ·

ApptacularApps-8305 RichardZhang-MSFT · Jun 12, 2020 at 11:12 AM

How can this be done dynamically? It seems easier this way.

0 ·

Show more comments

question