WinUI: How to reduce duplicate code when using lightweight styling?

Question

I am using lightweight styling to style a button:

<Button ...>
    <Button.Resources>
        <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#48B2E9"/>
        <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="Black"/>
        ...
    </Button.Resources>
</Button>

I would like to apply this styling to multiple (but not all) buttons.

Currently I need to copy and paste these <Button.Resources> to every button I want styled.

Is there a way to avoid this duplication?

I tried creating a style but couldn't figure out how to set resources in a style.

I guess I could create a control template, but that seems heavy handed.

score 1 · Accepted Answer · answered Mar 02 '22 at 13:31

Instead of trying to style a built-in Button, you could consider creating a custom Button control which always have the resources applied to it.

Add a UserControl to the project (Project->Add New Item->User Control) in Visual Studio and replace the contents of the XAML file with something like this:

<!-- MyCustomButton.xaml -->
<Button
    x:Class="WinUIApp.MyCustomButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Button.Resources>
        <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#48B2E9"/>
        <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="Black"/>
    </Button.Resources>
</Button>

...and change the base class of the code-behind class accordingly:

// MyCustomButton.xaml.cs
public sealed partial class MyCustomButton : Button
{
    public MyCustomButton()
    {
        this.InitializeComponent();
    }
}

You could then create instances of this Button in any other view as usual, e.g.:

<local:MyCustomButton Content="Click me!" />
<local:MyCustomButton Content="Another button..." />

Huh, in hindsight that seems somewhat obvious :P Thanks! – Felix Mar 02 '22 at 21:26 — Felix, Mar 02 '22 at 21:26

Ehsan Vali · Answer 2 · 2022-03-01T21:12:18.070

0

Sorry About Misundrstanding

you cannot set Resources on a style definition. so you must add a attached DependencyProperty to button and then set it on a style definition

see this

edited Mar 01 '22 at 21:12

answered Mar 01 '22 at 20:45

Ehsan Vali

344
2
9

Thanks for the fast response! Hm, adding a `` to a style gives me this error: `XamlCompiler error WMC0020: Cannot add 'SolidColorBrush' into the collection property 'Setters', type must be 'SetterBase'`. Are you sure this works with WinUI? :/ – Felix Mar 01 '22 at 20:51

WinUI: How to reduce duplicate code when using lightweight styling?

2 Answers2