Skip to main content

Customize Resources

In Semi Avalonia, most elements influencing the style of controls such as brushes and dimensions are referenced as dynamic resources. If the built-in colors and dimensions of Semi Avalonia do not meet your requirements and need fine-tuning, you can override these dynamic resources to reassign new values.

How to Override Dynamic Resources​

Here is a simple example to explain how to fine-tune Semi Avalonia's styles by overriding dynamic resources.

For instance, the current version of Semi Avalonia's Button has a corner radius of 3px. This might not meet your project's needs if you want all buttons to have a corner radius of 6px.

By looking at Semi Avalonia's source code in /src/Semi.Avalonia/Controls/Button.axaml, we can see how the Button's CornerRadius is assigned:

 <ControlTheme x:Key="{x:Type Button}" TargetType="Button">
    <!--irrelevant code-->
    <Setter Property="CornerRadius" Value="{DynamicResource ButtonCornerRadius}" />
    <!--irrelevant code-->
</ControlTheme>

From the source code in /src/Semi.Avalonia/Themes/Shared/Button.axaml, we find the definition of ButtonCornerRadius:

<CornerRadius x:Key="ButtonCornerRadius">3</CornerRadius>

Thus, we can reassign this resource in App.axaml:

<Application
    x:Class="Semi.Avalonia.Demo.App"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:semi="https://irihi.tech/semi"
    RequestedThemeVariant="Light"
    >
    <Application.Styles>
        <semi:SemiTheme Locale="zh-CN"/>
    </Application.Styles>
    <Application.Resources>
        <CornerRadius x:Key="ButtonCornerRadius">6</CornerRadius>
    </Application.Resources>
</Application>

With this adjustment, all the buttons in the application will now have a corner radius of 6px.

Advanced Usage of Overriding Dynamic Resources​

There are more advanced methods for customizing resources, see Advanced Resource Customization.