C# Avalonia 17- ControlTemplates - GradientButtonTest

GradientButtonTest.axaml代码

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Height="280" Width="322"
        x:Class="AvaloniaUI.GradientButtonTest"
        Title="GradientButtonTest">
     <Window.Resources>

    <!-- 渐变资源（红 + 白）-->
    <RadialGradientBrush x:Key="HighlightBackground"
                         RadiusX="100%" RadiusY="500%" GradientOrigin="50%,30%">
      <GradientStop Color="White" Offset="0"/>
      <GradientStop Color="#FFAA0000" Offset="0.4"/>
    </RadialGradientBrush>

    <RadialGradientBrush x:Key="PressedBackground"
                         RadiusX="100%" RadiusY="500%" GradientOrigin="50%,30%">
      <GradientStop Color="White" Offset="0"/>
      <GradientStop Color="#FF660000" Offset="1"/>
    </RadialGradientBrush>

    <SolidColorBrush x:Key="DefaultBackground" Color="#FFCC0000"/>
    <SolidColorBrush x:Key="DisabledBackground" Color="#FFBBBBBB"/>

    <RadialGradientBrush x:Key="BorderBrush"
                         RadiusX="100%" RadiusY="500%" GradientOrigin="50%,30%">
      <GradientStop Color="White" Offset="0"/>
      <GradientStop Color="#FF880000" Offset="1"/>
    </RadialGradientBrush>

  </Window.Resources>

  <!-- 样式定义区 -->
  <Window.Styles>

    <Style Selector="Button">
      <Setter Property="HorizontalAlignment" Value="Stretch"/>
      <Setter Property="VerticalAlignment" Value="Stretch"/>

      <Setter Property="Template">
        <ControlTemplate>
          <Border x:Name="border"
                  BorderBrush="{StaticResource BorderBrush}"
                  BorderThickness="2"
                  CornerRadius="4"
                  Background="{StaticResource DefaultBackground}">
            <Grid>
              <Rectangle x:Name="focusCue"
                         IsVisible="False"
                         Stroke="Black"
                         StrokeThickness="1"
                         StrokeDashArray="1,2" />
              <ContentPresenter Margin="{TemplateBinding Padding}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                Foreground="White"
                                RecognizesAccessKey="True"/>
            </Grid>
          </Border>
        </ControlTemplate>
      </Setter>

      <!-- 悬停 -->
      <Style Selector="^:pointerover /template/ Border#border">
        <Setter Property="Background" Value="{StaticResource HighlightBackground}"/>
      </Style>

      <!-- 按下 -->
      <Style Selector="^:pressed /template/ Border#border">
        <Setter Property="Background" Value="{StaticResource PressedBackground}"/>
      </Style>

      <!-- 聚焦 -->
      <Style Selector="^:focus /template/ Rectangle#focusCue">
        <Setter Property="IsVisible" Value="True"/>
      </Style>

      <!-- 禁用 -->
      <Style Selector="^:disabled /template/ Border#border">
        <Setter Property="Background" Value="{StaticResource DisabledBackground}"/>
      </Style>
      <Style Selector="^:disabled /template/ ContentPresenter">
        <Setter Property="Foreground" Value="#FF777777"/>
      </Style>
    </Style>

  </Window.Styles>
   <StackPanel Margin="10" Spacing="8">
    <Button Padding="6">Normal Red Button</Button>
    <Button Padding="6">Hover to Highlight</Button>
    <Button Padding="6" IsEnabled="False">Disabled</Button>
  </StackPanel>
</Window>

GradientButtonTest.axaml.cs代码

using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
using Shares.Avalonia;

namespace AvaloniaUI;

public partial class GradientButtonTest : Window
{
    public GradientButtonTest()
    {
        InitializeComponent();
    }
}

运行效果