ARTICLE AD BOX
How do you style Avalonia buttons correctly?
I want two button types, gray and white. On mouse down and hover, the white button should turn light blue. The gray button should not have any effects. For keyboard focus maybe a simple blue border around the button will be good. Also I don't want any animation.
But what I have are buttons with no text inside, yellow outline, not 3D, and are animated.
What should I do? I want the buttons to look almost exactly like in the first picture.
<Application xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="PaintPower.App" RequestedThemeVariant="Default"> <Application.Resources> <ControlTemplate x:Key="ThreeDButtonTemplate" TargetType="Button"> <Border x:Name="outer" Background="{TemplateBinding Background}" BorderBrush="#6A6A6A" BorderThickness="1" CornerRadius="4" Padding="0" BoxShadow="0 2 4 0 #00000040"> <Grid> <!-- Inner highlight line --> <Border BorderThickness="1" BorderBrush="#FFFFFF20" Margin="1"/> <!-- Flat interior --> <Border Margin="2" Background="{TemplateBinding Background}"/> <!-- Text --> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="{TemplateBinding Foreground}" Margin="4,2"/> </Grid> </Border> </ControlTemplate> </Application.Resources> <Application.Styles> <FluentTheme /> <!--<ClassicTheme />--> <StyleInclude Source="avares://AvaloniaEdit/Themes/Fluent/AvaloniaEdit.xaml" /> <Style Selector="Control"> <Setter Property="Transitions" Value="{x:Null}"/> </Style> <Style Selector="Button:pressed /template/ Border#outer"> <Setter Property="BoxShadow" Value="0 0 0 0 #00000000"/> <Setter Property="BorderBrush" Value="#4A4A4A"/> </Style> <Style Selector="Button:pressed /template/ Grid Border[Margin=2]"> <Setter Property="Background" Value="#C0C0C0"/> </Style> <Style Selector="Button.blue:pressed /template/ Grid Border[Margin=2]"> <Setter Property="Background" Value="#2F6BB8"/> </Style> <Style Selector="Button:pressed /template/ Grid Border[Margin=2]"> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="#D0D0D0" Offset="0"/> <GradientStop Color="#E8E8E8" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> </Style> <Style Selector="Button"> <Setter Property="Template" Value="{StaticResource ThreeDButtonTemplate}"/> <Setter Property="Foreground" Value="Black"/> <Setter Property="FontSize" Value="14"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="Padding" Value="6"/> <Setter Property="MinWidth" Value="80"/> <Setter Property="MinHeight" Value="28"/> </Style> <Style Selector="Button.white"> <Setter Property="Background" Value="#FFFFFF"/> <Setter Property="Foreground" Value="Black"/> </Style> <Style Selector="Button.white:pressed"> <Setter Property="Background" Value="#3A7BD5"/> <Setter Property="Foreground" Value="White"/> </Style> <Style Selector="Button.gray"> <Setter Property="Background" Value="#D0D0D0"/> </Style> <Style Selector="Button.gray:pressed"> <Setter Property="Background" Value="#E0E0E0"/> </Style> <Style Selector="Window, UserControl"> <Setter Property="Background" Value="#e0e0e0"/> </Style> </Application.Styles> </Application>I'm using Avalonia 11 and NET 9.0.311.
