UWP Development, Named Style

In UWP (Universal Windows Platform) development, styles are an essential part of the visual elements experienced by users within the application.
Named Style, which refers to explicit styles, is one way to define the visual properties of UI controls in XAML (XAML is an XML-based markup language used to define the UI of UWP applications).
By using Named Styles, it becomes easy to apply and reuse a consistent style for specific UI elements.
This article will explain the concept of Named Styles in UWP development and explore their usage through concrete examples.

1. Concept of Named Style

Named Style is a set of reusable visual properties that can be applied to specific UI elements, defined within XAML files.
The main purpose of Named Style is to reduce code duplication and provide a consistent user interface.
Named Styles are specified using the Style tag, which allows you to define styles.
Using Named Styles makes it easy to change styles later and helps apply the same style to multiple UI elements.

2. Defining Named Style

Defining a Named Style is simple.
You define the Style tag within Page.Resources in XAML and connect it to the Style property of specific UI elements.
A key point here is to use the x:Key attribute to assign a name to the style, allowing it to be identified when defining styles.

2.1 Example of Style Definition

<Page.Resources>
    <Style x:Key="MyButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="Blue"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="Padding" Value="10,5"/>
        <Setter Property="Margin" Value="5"/>
    </Style>
</Page.Resources>

The above example defines a style named MyButtonStyle, setting the button’s background color, text color, font size, and margins.

3. Applying Named Style

The defined Named Style can be easily applied to UI elements.
This simplifies complex XAML code and allows the same style to be applied to multiple elements.
Named Styles can be applied not only to buttons but also to various other UI elements.

3.1 Example of Applying Style

<Button Style="{StaticResource MyButtonStyle}" Content="Click Me!" />

The above code applies MyButtonStyle to the button, reflecting all the defined style properties on the button.

4. Scalability of Named Style

Named Style provides a powerful feature for creating new styles based on existing styles.
By using the BasedOn attribute, you can define a new style that inherits from an existing style.
This minimizes code duplication and enables the creation of maintainable styles.

4.1 Example of BasedOn

<Style x:Key="MySecondaryButtonStyle" TargetType="Button" BasedOn="{StaticResource MyButtonStyle}">
        <Setter Property="Background" Value="Gray"/>
    </Style>

The above code defines MySecondaryButtonStyle, creating a new style based on MyButtonStyle.
The default background color is blue, but here it has been changed to gray.

5. Customization through Named Style

Named Styles can be defined and applied in various ways according to user requirements.
Styles go beyond mere appearance and greatly impact the overall user experience of the application.
For instance, maintaining consistency in the shape, size, and color of buttons can provide comfort to users while using the application.

5.1 Example of Customization

<Style TargetType="Button">
        <Setter Property="Background" Value="Green"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="BorderBrush" Value="Black"/>
    </Style>

Here, the background is set to green, the text color to white, the font size to 18, and a thick black border is added.

6. Differences between Named Style and Template

In UWP, there is also the concept of Template for defining styles of UI elements.
Named Styles and Templates are related but serve different purposes.
Named Style is primarily used for setting visual properties, while Template is used for defining the structure and behavior of UI elements.
This enables the creation of customizable UI elements.

6.1 Example of Template Definition

<ControlTemplate TargetType="Button">
        <Border Background="{TemplateBinding Background}">
            <ContentPresenter />
        </Border>
    </ControlTemplate>

The above code defines a Template for a button. Using Templates allows for the complete modification of the structure of UI elements.

7. Named Style and Data Binding

When using data binding in UWP, it is possible to flexibly adjust the behavior and styles of various UI elements by combining it with Named Styles.
For example, the style of a button can be changed dynamically based on the state of the data.

7.1 Example of Data Binding

<Button Content="Submit" Style="{StaticResource MyButtonStyle}" 
        Background="{Binding IsEnabled, Converter={StaticResource BooleanToColorConverter}}" />

In the above code, the button’s background color is dynamically set based on conditions through data binding.
The BooleanToColorConverter is the converter that makes this process possible.

8. Real World Example: Using Named Style in a UWP Application

Let’s take a look at how to utilize Named Styles in a real UWP application. Below is the full example code.

<Page
        x:Class="MyApp.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:MyApp"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        >
    <Page.Resources>
        <Style x:Key="MyButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Padding" Value="10,5"/>
            <Setter Property="Margin" Value="5"/>
        </Style>
    </Page.Resources>

    <Grid>
        <Button Style="{StaticResource MyButtonStyle}" Content="Click Me!" />
    </Grid>
    </Page>

This example adds a simple button and applies the style through the defined Named Style. Thus, Named Styles become a powerful tool in UWP development.

Conclusion

We explored how to utilize Named Styles in UWP development.
Named Styles, which help maintain consistency of UI element styles and make them reusable, assist in efficient development.
The importance of Named Styles becomes even more pronounced when considering the maintenance and scalability of the application.
I hope this article has helped you understand the basic concepts of Named Styles and how to apply them in practice.