C# Avalonia 18- ControlTemplates - ColorPickerUserControlTest

自定义ColorPicker2类

ColorPicker2.cs代码

using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Metadata;
using Avalonia.Controls.Primitives;
using Avalonia.Media;
using System;namespace AvaloniaUI
{[TemplatePart("PART_RedSlider", typeof(Slider))][TemplatePart("PART_GreenSlider", typeof(Slider))][TemplatePart("PART_BlueSlider", typeof(Slider))]public class ColorPicker2 : TemplatedControl{public static readonly StyledProperty<Color> ColorProperty =AvaloniaProperty.Register<ColorPicker, Color>(nameof(Color), Colors.Black);public static readonly StyledProperty<double> RedProperty =AvaloniaProperty.Register<ColorPicker, double>(nameof(Red), 0);public static readonly StyledProperty<double> GreenProperty =AvaloniaProperty.Register<ColorPicker, double>(nameof(Green), 0);public static readonly StyledProperty<double> BlueProperty =AvaloniaProperty.Register<ColorPicker, double>(nameof(Blue), 0);private Slider? redSlider;private Slider? greenSlider;private Slider? blueSlider;private IDisposable? colorSubscription;private IDisposable? redSubscription;private IDisposable? greenSubscription;private IDisposable? blueSubscription;public ColorPicker2(){// 当 Color 变化 → 更新 RGBcolorSubscription = this.GetObservable(ColorProperty).Subscribe(OnColorChanged);// 当任意 RGB 变化 → 更新 ColorredSubscription = this.GetObservable(RedProperty).Subscribe(_ => UpdateColorFromRgb());greenSubscription = this.GetObservable(GreenProperty).Subscribe(_ => UpdateColorFromRgb());blueSubscription = this.GetObservable(BlueProperty).Subscribe(_ => UpdateColorFromRgb());}public Color Color{get => GetValue(ColorProperty);set => SetValue(ColorProperty, value);}public double Red{get => GetValue(RedProperty);set => SetValue(RedProperty, value);}public double Green{get => GetValue(GreenProperty);set => SetValue(GreenProperty, value);}public double Blue{get => GetValue(BlueProperty);set => SetValue(BlueProperty, value);}private void OnColorChanged(Color color){// 更新 RGBRed = (double)color.R;Green = (double)color.G;Blue = (double)color.B;}private void UpdateColorFromRgb(){var newColor = Color.FromRgb((byte)Red, (byte)Green, (byte)Blue);if (newColor != Color)Color = newColor;}protected override void OnApplyTemplate(TemplateAppliedEventArgs e){base.OnApplyTemplate(e);redSlider = e.NameScope.Find<Slider>("PART_RedSlider");greenSlider = e.NameScope.Find<Slider>("PART_GreenSlider");blueSlider = e.NameScope.Find<Slider>("PART_BlueSlider");if (redSlider != null)redSlider[!!Slider.ValueProperty] = this[!!RedProperty];if (greenSlider != null)greenSlider[!!Slider.ValueProperty] = this[!!GreenProperty];if (blueSlider != null)blueSlider[!!Slider.ValueProperty] = this[!!BlueProperty];}protected override void OnDetachedFromVisualTree(VisualTreeAttachmentEventArgs e){base.OnDetachedFromVisualTree(e);colorSubscription?.Dispose();redSubscription?.Dispose();greenSubscription?.Dispose();blueSubscription?.Dispose();}}
}

ColorPicker.axaml代码

<Styles xmlns="https://github.com/avaloniaui"xmlns:local="using:AvaloniaUI"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Design.PreviewWith></Design.PreviewWith><!-- Add Styles Here --><Style Selector="local|ColorPicker2"><Setter Property="Template"><Setter.Value><ControlTemplate><Border Background="{TemplateBinding Background}"BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"Padding="{TemplateBinding Padding}"><Grid ColumnDefinitions="*,auto"RowDefinitions="auto,auto,auto"ColumnSpacing="8"RowSpacing="4"><Slider Name="PART_RedSlider"Minimum="0" Maximum="255"Foreground="Red"Background="#22FF0000"VerticalAlignment="Center"><Slider.Resources><SolidColorBrush x:Key="SliderThumbBackground" Color="Red"/></Slider.Resources></Slider><Slider Name="PART_GreenSlider"Grid.Row="1"Minimum="0" Maximum="255"Foreground="LimeGreen"Background="#2200FF00"VerticalAlignment="Center"><Slider.Resources><SolidColorBrush x:Key="SliderThumbBackground" Color="LimeGreen"/></Slider.Resources></Slider><Slider Name="PART_BlueSlider"Grid.Row="2"Minimum="0" Maximum="255"Foreground="DodgerBlue"Background="#220000FF"VerticalAlignment="Center"><Slider.Resources><SolidColorBrush x:Key="SliderThumbBackground" Color="DodgerBlue"/></Slider.Resources></Slider><Border Grid.Column="1" Grid.RowSpan="3"Width="50" Height="50"BorderBrush="Black"BorderThickness="1"CornerRadius="4"Margin="4,0,0,0"><Border.Background><SolidColorBrush Color="{Binding Color, RelativeSource={RelativeSource TemplatedParent}}"/></Border.Background></Border></Grid></Border></ControlTemplate></Setter.Value></Setter></Style>
</Styles>

ColorPickerUserControlTest.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"Width="300" Height="300"xmlns:local="using:AvaloniaUI"x:Class="AvaloniaUI.ColorPickerUserControlTest"Title="ColorPickerUserControlTest"><StackPanel><local:ColorPicker2 x:Name="colorPicker"Margin="2" Padding="3"Color="Beige"></local:ColorPicker2><Button x:Name="cmdGet" HorizontalAlignment="Center"Margin="5,20,5,0" Padding="2"Click="cmdGet_Click">Get Color</Button><Button x:Name="cmdSet" HorizontalAlignment="Center"Margin="5,0,5,0" Padding="2"Click="cmdSet_Click">Reset Color</Button><Button Margin="5,0,5,0" Padding="2" HorizontalAlignment="Center"Click="cmdUndo_Click">Undo</Button><TextBlock x:Name="lblColor" Margin="10" HorizontalAlignment="Center"/></StackPanel>
</Window>

ColorPickerUserControlTest.cs代码

using Avalonia;
using Avalonia.Controls;
using Avalonia.Interactivity;
using Avalonia.Media;
using Shares.Avalonia;namespace AvaloniaUI;public partial class ColorPickerUserControlTest : Window
{private readonly UndoRedoManager undoManager = new();public ColorPickerUserControlTest(){InitializeComponent();this.Load("avares://AvaloniaUI/Demos/Book/18/CustomControls/ColorPicker.axaml");//这个是在我的扩展里实现了，以后不再重复这些自定义的函数了。undoManager.Attach(colorPicker, ColorPicker2.ColorProperty);//这个是在之前的RedoUndo例子里}// 点击“Get Color”按钮private void cmdGet_Click(object? sender, RoutedEventArgs e){if (colorPicker != null){var color = colorPicker.Color;// Avalonia 中没有 WPF 的 MessageBox，可用自定义对话框或简单显示文本：lblColor.Text = $"当前颜色：{color}";}}// 点击“Reset Color”按钮private void cmdSet_Click(object? sender, RoutedEventArgs e){if (colorPicker != null){colorPicker.Color = Colors.Beige;}}// 响应 ColorChanged 事件private void colorPicker_ColorChanged(object? sender, ColorChangedEventArgs e){if (lblColor != null){lblColor.Text = $"颜色变为：{e.NewColor}";}}private void cmdUndo_Click(object? sender, RoutedEventArgs e){undoManager.Undo(colorPicker);}
}

运行效果