UWP Development, Template Binding

In UWP (Universal Windows Platform) development, template binding is an important technique that allows for more flexible configuration of user interface (UI) elements. By using template binding, the visual representation of a control can be dynamically changed according to the end-user environment. In this article, we will specifically explain the concept of template binding, how to use it, and provide practical examples.

1. Concept of Template Binding

Template binding is a form of data binding used in WPF (Windows Presentation Foundation) and UWP, which allows for dynamically linking properties of UI controls. The difference from regular binding is that template binding is not limited to specific controls but is mainly used to set the relationship between the control and its styles or control templates.

Using template binding allows multiple controls to share the same visual style, providing a consistent user experience. Additionally, it reduces the amount of code required to dynamically change or adjust the UI.

2. Use Cases for Template Binding

Template binding is particularly useful in the following situations:

  • When you want to reuse the control style
  • When you want to change the UI based on dynamic data
  • When you want to make the code cleaner and easier to maintain during development

3. Implementing Template Binding

To implement template binding, you need to define the style of the control using XAML (XML Application Markup Language) and apply the template binding syntax within that style. Below is a simple example of using template binding.

3.1. Example 1: Custom Button Control

First, let’s create a custom button control. This button can dynamically change its color property through template binding. 


<Button x:Class="MyApp.CustomButton"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Template="{StaticResource MyCustomButtonTemplate}" />

<Page.Resources>
    <ControlTemplate x:Key="MyCustomButtonTemplate" TargetType="Button">
        <Grid Background="{TemplateBinding Background}">
            <ContentPresenter HorizontalAlignment="Center"
                              VerticalAlignment="Center" />
        </Grid>
    </ControlTemplate>
</Page.Resources>

In the XAML above, a new button class named CustomButton is defined, and a ControlTemplate is specified for CustomButton instead of the standard XAML button appearance. At this point, the Background property is set with TemplateBinding within the ControlTemplate, allowing the button’s background color to be bound to an externally specified value.

3.2. Example 2: Combining Data Binding and Template Binding

In the next example, we will combine data binding and template binding to make the UI elements dynamically respond to data changes. We will define a data model and connect it to the UWP UI. 


<Page.DataContext>
    <local:MyViewModel />
</Page.DataContext>

<ListView ItemsSource="{Binding Items}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <TextBlock Text="{Binding Name}" FontSize="{Binding FontSize}"
                           Foreground="{TemplateBinding Foreground}" />
                <Button Content="Click" Command="{Binding ClickCommand}" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

In the example above, the ListView is bound to the Items collection of the ViewModel, and each item has a GUI associated with its name. The ListView items have the capability to dynamically set the Foreground property through template binding.

4. Advantages of Template Binding

Using template binding offers the following advantages:

  • Reusability: By reusing styles and templates, you can reduce code duplication.
  • Ease of Maintenance: When changes are needed for UI elements, it provides the simplicity of only having to modify styles or templates.
  • Flexibility in Data Binding: It allows for more flexible composition of relationships between the UI and data, making it easy to change for various situations.

5. Conclusion

In UWP development, template binding is an essential feature for efficiently managing and dynamically changing the user interface. Through this article, we explored the concept and applications of template binding, along with a few examples. We hope these methods will help you build stronger and more flexible UIs in your UWP applications.

If you have any questions about template binding or need a deeper discussion, please feel free to leave a comment!