Check our other helpful areas that might answer your question

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 (394.37KiB)Viewed 150130 times

• Before WinUI:

  

  without custom theme.gif (369.33KiB)Viewed 150130 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.

II. From the Table Editor, open the Binary table and locate the metroinstallbutton.xaml and change its source file.

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

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:
but you can disable or change it. In the attached .xaml file the following line set to "False" disables that effect for the button:

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:

Changing the value to DottedLine will look like this:

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:
it will create the Red glow:

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:

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.

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.

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:

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:

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.

Attached is my sample project with the .xaml resources. Feel free to build and test it.
If you need any help implementing something, just let me know and I will gladly assist.

Best regards,
Liviu

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.

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

Hello,

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

Best regards,
Catalin