Liviu
Posts: 1026
Joined: Tue Jul 13, 2021 11:29 am
Contact:  Website

How to Customize WinUI Theme and Buttons

Thu Mar 31, 2022 9:13 am

Hi,

For this tutorial an Enterprise or higher license edition of Advanced Installer is required.

If you want to customize an existing theme in Advanced Installer when using the WinUI feature, here's the correct approach.

You can customize controls such as Buttons, Checkboxes, and even the global theme used on all dialogs.

For example, using WinUI, in the below example we will customize the Install button on the Surface theme and we will also change some global settings for that theme.

After this tutorial we will achieve the following design:
  • After WinUI Custom theme:
    with custom theme.gif
    with custom theme.gif (394.37KiB)Viewed 150531 times
  • Before WinUI:
    without custom theme.gif
    without custom theme.gif (369.33KiB)Viewed 150531 times
    Note: The quality of the above animations is quite low because our forums does not support high attachment size on a single file.
A Button control has 4 states on WinRT: Button Pressed, PointerOver, Disabled and Normal.

I. Change the .xaml file for the Install button and use a custom .xaml file.

You can find the property name for the Install button on the dialog.
install button.png
install button.png (113.22KiB)Viewed 150531 times

II. From the Table Editor, open the Binary table and locate the metroinstallbutton.xaml and change its source file.
Binary table.png
Binary table.png (81.39KiB)Viewed 150531 times

For example you can use the attached .xaml file (btnfocused.xaml), from which the following sequence of the code is important for us:

Code: Select all

<Button.Resources>
        <ResourceDictionary>
          <SolidColorBrush
            x:Key="ButtonBorderBrushDisabled"
            Opacity="0.6"
            Color="#BFBFBF" />
                    <SolidColorBrush x:Key="ButtonBackground" Color="#ECF542" />
                    <SolidColorBrush x:Key="ButtonBackgroundDisabled" Color="#73726e" />
                    <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#f5fa75" />
                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#c4c736" />

                    <SolidColorBrush x:Key="ButtonForegroundDisabled" Color="DarkGray" />

                    <SolidColorBrush x:Key="ButtonForeground" Color="Black" />
                    <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="White" />

                    <SolidColorBrush x:Key="ButtonBorderBrush" Color="White" />
                    <SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="White" />
                    <SolidColorBrush x:Key="ButtonBorderBrushFocused" Color="#ECF542" />
                    <SolidColorBrush x:Key="ButtonBorderBrushPressed" Color="#ECF542" />

                    <SolidColorBrush x:Key="ButtonBackgroundFocused" Color="#ECF542" />

        </ResourceDictionary>
</Button.Resources>

For more information about the resources used by the Button control, you can refer to the following MSFT article: Button Class

As you can see from there you can change the colors for the border, background and foreground. That is a complex feature but if you have enough time you can make amazing things with it. For example using Visual Studio (Blank App - Universal Windows project type), if you have experience with it, you can customize easily the resources for the Button in the .xaml file.

We think that instead of using images for buttons, these methods to directly create the properties and colors for the button are a much more elegant way since they will work for any scale button.

The following blue color on the selected button (using TAB keyboard button) is picked by the System:
blue glow.png
blue glow.png (5.22KiB)Viewed 150531 times
but you can disable or change it. In the attached .xaml file the following line set to "False" disables that effect for the button:

Code: Select all

UseSystemFocusVisuals="False">

Another method is to create in the Properties page the following property: AiWinUIFocusVisualKind

If you change its value to: HighVisibility, then the color will be white:
high visibility.png
high visibility.png (30.92KiB)Viewed 150531 times

Changing the value to DottedLine will look like this:
dotted line.png
dotted line.png (24.28KiB)Viewed 150531 times

The FocusPrimaryBrush property only defaults to the SystemControlRevealFocusVisualBrush resources when FocusVisualKind is set to Reveal. Otherwise, it uses SystemControlFocusVisualPrimaryBrush: Reveal Focus

You can also have a look on the MSFT articles:

Styling for Focus in Controls, and FocusVisualStyle

FocusVisualKind


Based on these articles, if you add the following line to the attached .xaml file:

Code: Select all

FocusVisualPrimaryBrush="Red"
FocusVisualPrimaryBrush.png
FocusVisualPrimaryBrush.png (59.34KiB)Viewed 150531 times
it will create the Red glow:
red glow.png
red glow.png (8.21KiB)Viewed 150531 times

You can also control the border thickness, margin, etc like with the color for the Focus effect, as explained in the Reveal focus article linked above. You just need to add these after the FocusVisualPrimaryBrush, for example:
FocusVisualMargin.png
FocusVisualMargin.png (39.85KiB)Viewed 150531 times

III. You can also define your own style, changing the color for all controls, not just for one specific control. You can achieve that by following these steps:

1. From the Microsoft Store download the Fluent XAML Theme Editor Microsoft tool.
fluent xaml theme editor.png
fluent xaml theme editor.png (54.95KiB)Viewed 150531 times

2. Using that program you can define global colors and effects for the controls such as Checkboxes, Radio Buttons. From the right pane you can define your own colors. You can use that program or feel free to use any similar program.
fluent xaml.png
fluent xaml.png (208.89KiB)Viewed 150531 times

3. After defining your own style, you can export the output. Save the content in a .xaml file (for example defstyles.xaml).

4. Now you need to import your style in your Advanced Installer project. Go to the Themes page --> Images tab and click on New and use the AiWinUIFluentStyleXaml property:
AiWinUIFluentStyleXaml.png
AiWinUIFluentStyleXaml.png (71.16KiB)Viewed 150531 times

However, the Hyperlink control white box is still present when using tab. But you can change the text color on hover using the SystemControlHyperlinkBaseMediumBrush property.

Inside your generated custom style you can add that line:

Code: Select all

<Color x:Key="SystemControlHyperlinkBaseMediumBrush">#FF0000</Color>
hyperlink hover.png
hyperlink hover.png (141.98KiB)Viewed 150531 times

Here is a list with some system colors which you can set from your custom style: Full list of brushes

Note: After you make changes into the .xaml file for a control, don't forget to use the Rebuild option in Advanced Installer so the changes will be applied to your project. I also suggest that you make a copy of your project before making all these changes because it will be hard to revert if you don't want the WinUI feature anymore. Disabling the WinUI after these changes will make your modified buttons look unsightly.


That's all! Also, to create a custom Checkbox control you can check our tutorial: Implement a WinUI checkbox control on installer dialogs

I hope you guys find this tutorial useful and that it will help you to achieve awesome design for your installer. I'll be glad to see your results. :D

Attached is my sample project with the .xaml resources. Feel free to build and test it.
WinUI Demo.zip
(11.26KiB)Downloaded 798 times

If you need any help implementing something, just let me know and I will gladly assist.

Best regards,
Liviu
________________________________________
Liviu Sandu - Advanced Installer Team
Follow us: Twitter - Facebook - YouTube

jjardina
Posts: 11
Joined: Wed Mar 13, 2019 5:35 pm

Re: How to Customize WinUI Theme and Buttons

Thu Apr 21, 2022 6:50 pm

Is there a way to disable the transitions of previous and next dialogs when using WinUI? The WinUI has the previous or next dialog sliding on top of the current dialog when pressing the next or back button. Our product team does not like the sliding transition from dialog to dialog and prefer the back or next dialog just pops onto the current dialog like a traditional dialog window.

Liviu
Posts: 1026
Joined: Tue Jul 13, 2021 11:29 am
Contact:  Website

Re: How to Customize WinUI Theme and Buttons

Tue Apr 26, 2022 7:33 am

Hello Jason,

Unfortunately, this is not supported.

If you want to keep the WinUI function but to disable the transition, then you cannot do that.

However, I have added on our TODO list this improvement and hopefully it will be implemented in a future version of Advanced Installer. 

I apologize for the inconvenience.

Best regards,
Liviu
________________________________________
Liviu Sandu - Advanced Installer Team
Follow us: Twitter - Facebook - YouTube

Catalin
Posts: 6510
Joined: Wed Jun 13, 2018 7:49 am

Re: How to Customize WinUI Theme and Buttons

Fri Oct 21, 2022 3:48 pm

Hello,

This improvement has been added in version 20.0 of Advanced Installer, released on October 18th, 2022.

Best regards,
Catalin
Catalin Gheorghe - Advanced Installer Team
Follow us: Twitter - Facebook - YouTube

Return to “Sample Projects”