Home > Metro, Windows 8 > Using UserControls in Windows Store Apps

Using UserControls in Windows Store Apps

 

When having the need for the same UI in multiple places inside an app, it probably makes sense to exctract that UI to a single place and reuse UI and code behind in multiple places.

In this sample we have multiple pages with this content:

    <Grid Grid.Row="1" Margin="120,0,0,0">
        <StackPanel Width="300" HorizontalAlignment="Left">
            <TextBlock Text="Edit item" Style="{StaticResource SubheaderTextStyle}" />
            <TextBlock Text="Title:" />
            <TextBox Text="{Binding Title, Mode=TwoWay}" />

            <TextBlock Text="Text:" />
            <TextBox Text="{Binding Text, Mode=TwoWay}" />
        </StackPanel>
    </Grid>
<

 

The only difference for the multiple instances of this UI template code is the caption text, which should be a variable.

To create a variable we need to follow this steps:

  1. Add a new item of type “UserControl” to the project, place it into a directory Controls
  2. Move the <Grid> into this usercontrol
  3. Create the variable parts with binding to a property in the code behind, here CaptionText
  4. Instead of using the DataContext, which is inherited from the host page, we set the target to the control itself by using the syntax ElementName=<NameOfTheControl>, here “MyUserControl”
  5. The usercontrol will then look like this:

<UserControl
    x:Class="SimpleApp.Controls.EditControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SimpleApp.Controls"
    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="600"
    x:Name="MyUserControl">

    <Grid Grid.Row="1" Margin="120,0,0,0">
        <StackPanel Width="300" HorizontalAlignment="Left">
            <TextBlock Text="{Binding CaptionText, ElementName=MyUserControl}" Style="{StaticResource SubheaderTextStyle}" />
            <TextBlock Text="Title:" />
            <TextBox Text="{Binding Title, Mode=TwoWay}" />

            <TextBlock Text="Text:" />
            <TextBox Text="{Binding Text, Mode=TwoWay}" />
        </StackPanel>
    </Grid>
</UserControl>

  1. In the usercontrol code behind create a property, in this example named CaptionText
  2. In the ctor register a DependencyProperty with optional change handlers
        public sealed partial class EditControl : UserControl
        {
            public EditControl()
            {
                this.InitializeComponent();
                CaptionTextProperty = DependencyProperty.Register("CaptionText", typeof(string),
                typeof(EditControl), new PropertyMetadata("", OnTextChanged));
            }
    
            public static DependencyProperty CaptionTextProperty { private set; get; }
    
            public string CaptionText
            {
                set { SetValue(CaptionTextProperty, value); }
                get { return (string)GetValue(CaptionTextProperty); }
            }
    
            static void OnTextChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
            {
                (obj as EditControl).OnTextChanged(args);
            } 
    
            void OnTextChanged(DependencyPropertyChangedEventArgs args)
            {
            }
        }
  3. Now use the usercontrol in any page
  4. Add a xmlns:uc=”using MyApp.Controls” statement to all the pages, where this new usercontrol should be used.

    MyApp.Controls must match the namespace used in the usercontrol

     <uc:EditControl Grid.Row="1" CaptionText="Add new item"/>
Categories: Metro, Windows 8
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: