UWP Development, Custom Resource

Windows Universal Platform (UWP) development focuses on creating apps that run on various Windows 10 devices. One important aspect of UWP app development is creating reusable resources. Custom Resources help maintain consistency in the app, enhance code reusability, and facilitate easier maintenance later. In this article, we will explore how to create and utilize custom resources in UWP.

1. What is a Resource?

In UWP and XAML-based applications, a ‘resource’ is a collection of data used to define and style various components of the application. Resources can include colors, brushes, styles, templates, etc., and by defining these resources, developers can increase code efficiency and reuse common elements.

2. The Importance of Custom Resources

Custom resources are important for the following reasons:

• Consistency: Styles can be easily applied to ensure that the app’s UI elements look consistent.
• Reusability: By reusing the same resource in multiple places, code duplication can be reduced.
• Maintenance: If a resource changes, the changes will automatically be reflected in all elements that use that resource.

3. Creating Custom Resources

3.1. Creating a Resource Dictionary

First, you need to create a Resource Dictionary where you will define your custom resources. To do this, create a XAML file and add code to define the resources.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Color x:Key="PrimaryColor">#FF6200EE</Color>
    <SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource PrimaryColor}" />

    <Style TargetType="Button" x:Key="PrimaryButtonStyle">
        <Setter Property="Background" Value="{StaticResource PrimaryBrush}" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Padding" Value="10" />
    </Style>

</ResourceDictionary>

In the example above, we defined a Resource Dictionary that includes a primary color and button style. This Dictionary can be reused across various parts of the app.

3.2. Using the Resource Dictionary

Once you’ve defined your resources, you can use them within your UWP app. First, here is how to reference the resource Dictionary in the App.xaml file:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Assets/YourResourceDictionary.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Here, ‘YourResourceDictionary.xaml’ is the filename of the resource dictionary you created. This will allow resources to be accessed globally throughout the app.

3.3. Example of Using a Resource

Here’s how to use the defined resource in a real UWP app:

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

This code applies the custom ‘PrimaryButtonStyle’ to the button, ensuring consistent styling.

4. Dynamic Resources

UWP also supports a feature called ‘Dynamic Resources’ that allows resources to be changed dynamically. Using dynamic resources, you can change resources while the application is running, and the changes are immediately reflected in the UI. Dynamic resources can be declared as follows:

<Button Content="Change Color" Background="{DynamicResource PrimaryBrush}" Click="OnChangeColorButtonClick" />

Let’s look at an example where clicking the above button changes the background color of the button:

private void OnChangeColorButtonClick(object sender, RoutedEventArgs e)
{
    // Change the existing resource to a new color
    Application.Current.Resources["PrimaryBrush"] = new SolidColorBrush(Colors.Red);
}

5. Conclusion

Utilizing custom resources can enhance productivity in UWP app development and maintain consistency in the UI. With what you’ve learned today, you should be able to easily implement and utilize custom resources in your apps. By defining and experimenting with various resources, you can add unique styles and flexibility to your apps.

To gain a deeper understanding of UWP development, it is recommended to refer to the official Microsoft documentation and related educational materials. In future courses, we will cover more possibilities of UWP, so we appreciate your interest!