How can we change app's visual theme options?

Themes, Shared, and Core Libraries for Avalonia Forum

Posted 2 months ago by Harun Reşit Güneş - Software Developer, Fermaş Fermuar A.Ş.
Avatar

Hello,

I'm using actipro themes package with avalonia UI, and I want to customize user interface , by settings of some actipro theme generation parameters in App.axaml.

This is theme definition block inside my App.axaml ;

<!-- ActiPro Styles -->
<actipro:ModernTheme>
  <actipro:ModernTheme.Definition>
    <generation:ThemeDefinition 
		UserInterfaceDensity="Spacious"
		BaseFontSize="{StaticResource BaseFontSize}" 
		DefaultFontFamily="{StaticResource Montserrat}" 
		HeadingFontFamily="{StaticResource Montserrat}"
		EditAppearanceKind="Soft"
		ButtonAppearanceKind="Outline" 
		TabAppearanceKind="Outline" 
		ToggleSwitchAppearanceKind="Solid"
		UseAccentedSwitches="True">
		</generation:ThemeDefinition>
  </actipro:ModernTheme.Definition>
</actipro:ModernTheme>

I want to implement a UI Settings form that can be available to users, to change some of the above parameters, following ;


UserInterfaceDensity
BaseFontSize
EditAppearanceKind
ButtonAppearanceKind


I'm an experienced C# developer and I can manage to implement settings/options/appsettings etc. patterns.
I just need to know how to change these values dynamically in runtime, or before app. start,


Thanks for any help

Comments (4)

Answer - Posted 2 months ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi,

You can manage all of this in code-behind by looking up the theme definition and modifying the properties just as you did in XAML.  The following help topic has a C# sample near the bottom for reference:

https://www.actiprosoftware.com/docs/controls/avalonia/themes/getting-started#theme-definition-setting

Essentially what you'd need to do is something similar to this:

public partial class App : Application {
	...

	public override void Initialize() {
		AvaloniaXamlLoader.Load(this);

		// Customize the theme definition
		if (ModernTheme.TryGetCurrent(out var modernTheme) && (modernTheme.Definition is not null)) {
			modernTheme.Definition.UseAccentedSwitches = true;
			modernTheme.Definition.AccentColorRampName = Hue.Orange.ToString();

			// Must manually refresh resources after changing definition properties
			modernTheme.RefreshResources();
		}
	}
}


Actipro Software Support

Posted 2 months ago by Harun Reşit Güneş - Software Developer, Fermaş Fermuar A.Ş.
Avatar

I tried the answer, it worked partially.

UserInterfaceDensity and RequestedThemeVariant values are responding change in runtime and updates window and other controls but, ButtonAppearanceKind and EditAppearanceKind values are not respond the change.

Can you give us a sample project pls?

Answer - Posted 1 month ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hello,

Thank you for reporting this.  It appears that the ModernTheme.RefreshResources method wasn't properly updating native and Actipro control themes for various ThemeDefinition apperance kind property changes.  We've fixed that for the next release.

In the meantime, you can work around it by creating a new ThemeDefinition instance with your desired settings and set that to the ModernTheme.Definition property.  The change handler on the Definition property will kick in the missing logic for this scenario.

Please note that even with this update, if you already have a Button visible that would be affected by the ButtonAppearanceKind change, you may need reload your view to see the new implicit control theme applied.


Actipro Software Support

Posted 1 month ago by Harun Reşit Güneş - Software Developer, Fermaş Fermuar A.Ş.
Avatar

Thank you for the fix.

I'll be waiting for the new package update, and I also will try to create a new definition object and set it to current moderntheme.

Add Comment

Please log in to a validated account to post comments.