microsoft / microsoft-ui-xaml

Windows UI Library: the latest Windows 10 native controls and Fluent styles for your applications
MIT License
6.35k stars 678 forks source link

Enable Direct Color Changes Using Theme Resources in C# for WinUI3 #9464

Open Zakariathr22 opened 7 months ago

Zakariathr22 commented 7 months ago

Proposal: Enable Direct Color Changes Using Theme Resources in C# for WinUI3

Summary

I propose a feature for WinUI3 that enables direct color changes using theme resources in C#. This would allow colors to dynamically adapt when the theme changes, improving the application’s aesthetics and user experience.

Rationale

Scope

Capability Priority
The feature must allow developers to directly change colors using theme resources in C# for WinUI3 Must
The feature should enhance the user experience by dynamically adapting UI colors to theme changes Should
The feature could simplify the development process by providing more control over UI design from C# code Could
The feature won’t change the existing functionality of static resources in XAML and C# Won’t

Important Notes

Currently, we have the ability to change colors using static resources in both XAML and C# code. For instance:

Therefore, it would be highly beneficial to have a feature that allows direct color changes using theme resources in C# for WinUI3. This would ensure that the colors adapt dynamically when the theme changes, enhancing the user experience and the overall aesthetic of the application.

Open Questions

Is there a workaround that can be used to achieve this until the feature is rolled out?

Zakariathr22 commented 3 months ago

Workaround

XAML

Define a Style in the Resources section that applies theme-based brushes.

<Page
    x:Class="YourNamespace.YourPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Page.Resources>
        <!-- Define a Style that applies theme-based background -->
        <Style x:Key="CriticalTextBoxStyle" TargetType="TextBox">
            <Setter Property="Background" Value="{ThemeResource SystemFillColorCriticalBackgroundBrush}" />
            <Setter Property="Foreground" Value="{ThemeResource SystemFillColorCriticalTextBrush}" />
        </Style>
    </Page.Resources>

    <Grid>
        <TextBox x:Name="myTextBox" PlaceholderText="Enter text here"/>
    </Grid>
</Page>

C

In the code-behind, access these resources and apply them to your controls:

public sealed partial class YourPage : Page
{
    public YourPage()
    {
        this.InitializeComponent();

        // Apply the style defined in XAML to the TextBox
        myTextBox.Style = (Style)this.Resources["CriticalTextBoxStyle"];
    }
}

Explanation

We still can't implement theme resource in C# without going through XAML, it would be easier if there was a way to use it directly from C# code.

This workaround provides a flexible and lightweight method to achieve dynamic theme-based coloring directly in C# until the feature for direct theme resource application in C# is implemented in WinUI3.