How do I create a custom theme? #16239
-
I was looking at https://docs.avaloniaui.net/docs/basics/user-interface/styling/control-themes trying to figure out how to make a custom theme, But couldn't figure it out. How would I do something like this for a button's normal state? Can I have an example in both C# and xaml? I did manage to get a style to look like it with this... <Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Design.PreviewWith>
<Border MinWidth ="32" MinHeight="32" BorderThickness="1,1,0,0" BorderBrush="#d79773">
<Border BorderThickness="0,0,1,1" BorderBrush="#4f2b13">
<Border BorderThickness="1,1,0,0" BorderBrush="#ffe3c3">
<Border BorderThickness="0,0,1,1" BorderBrush="#8b573b">
<Border Background="#d79773">
<!-- Add Controls for Previewer Here -->
</Border>
</Border>
</Border>
</Border>
</Border>
</Design.PreviewWith>
<!-- Add Styles Here -->
</Styles> but I don't understand how this applies to a control and/or a specific state like normal, hovered, focused, pressed, disabled. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 10 replies
-
Lookup other styles in source. AwsomeAvalonia has some styling libs referenced for you to get inspired |
Beta Was this translation helpful? Give feedback.
-
Going with the same example, you need to define ControlTheme and a ControlTemplate inside of it. Template is an actual "function" that builds the control each time it's displayed. And while on it, ContentPresenter is an actual container for the "Content" your control has. Without ContentPresenter it would be just a group of borders without anything inside. <ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Design.PreviewWith>
<Button Content="Hello World!"
Theme="{StaticResource CustomTheme}"
VerticalContentAlignment="Center" />
</Design.PreviewWith>
<ControlTheme TargetType="{x:Type Button}"
x:Key="CustomTheme">
<Setter Property="MinHeight" Value="32" />
<Setter Property="MinWidth" Value="32" />
<Setter Property="Template">
<ControlTemplate>
<Border BorderThickness="1,1,0,0" BorderBrush="#d79773">
<Border BorderThickness="0,0,1,1" BorderBrush="#4f2b13">
<Border BorderThickness="1,1,0,0" BorderBrush="#ffe3c3">
<Border BorderThickness="0,0,1,1" BorderBrush="#8b573b">
<Border Background="#d79773">
<ContentPresenter x:Name="PART_ContentPresenter"
Content="{TemplateBinding Content}"
Margin="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</Border>
</Border>
</Border>
</Border>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary> Note, I did couple of changes just to make it easier to use:
Also, see other documentation pages that are useful: |
Beta Was this translation helpful? Give feedback.
Design.PreviewWith
is not really a reusable part. It's only used for the previewer to render current XAML file.As per that documentation page, you need to create a ControlTheme defined in the resources. And then reference it in your controls.
Going with the same example, you need to define ControlTheme and a ControlTemplate inside of it. Template is an actual "function" that builds the control each time it's displayed. And while on it, ContentPresenter is an actual container for the "Content" your control has. Without ContentPresenter it would be just a group of bo…