question

ApptacularApps-8305 avatar image
ApptacularApps-8305 asked ·

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-uwpwindows-uwp-xaml
1 comment
10 |1000 characters needed characters left characters exceeded

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

Can you create a UserControl?

0 Votes 0 · ·

1 Answer

RichardZhang-MSFT avatar image
RichardZhang-MSFT answered ·

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 comments Share
10 |1000 characters needed characters left characters exceeded

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

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

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

0 Votes 0 · ·

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 Vote 1 · ·

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

0 Votes 0 · ·
Show more comments