聆途笔记

C#自定义控件开发：从入门到架构设计

一、自定义控件基础概念

1.1 为什么需要自定义控件

在C#桌面开发(WPF/WinForms)中，自定义控件是解决以下问题的关键方案：

  • 业务功能封装：将特定业务逻辑可视化
  • UI一致性：统一应用程序视觉风格
  • 复杂交互实现：超越标准控件功能限制
  • 代码复用：跨项目共享可视化组件
  • 性能优化：针对特定场景优化渲染

1.2 自定义控件类型对比

控件类型适用平台继承层次主要特点
UserControlWPF/WinFormsControl/UserControl组合现有控件，快速开发
CustomControlWPFControl支持模板化，完全自定义外观
继承现有控件WPF/WinForms各种现有控件扩展标准控件功能
ComponentWinFormsComponent非可视组件，设计器支持
TemplatedControlUWPControlUWP平台下的模板化控件

二、WPF自定义控件开发

2.1 UserControl开发实战

步骤1：创建UserControl

<!-- CircleButton.xaml -->
<UserControl x:Class="CustomControls.CircleButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Button x:Name="PART_Button" Width="{Binding Diameter}" Height="{Binding Diameter}">
        <Button.Template>
            <ControlTemplate>
                <Ellipse Fill="{TemplateBinding Background}" 
                         Stroke="{TemplateBinding BorderBrush}"
                         StrokeThickness="2">
                    <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="Center"/>
                </Ellipse>
            </ControlTemplate>
        </Button.Template>
    </Button>
</UserControl>

步骤2：添加依赖属性

public partial class CircleButton : UserControl
{
    public static readonly DependencyProperty DiameterProperty =
        DependencyProperty.Register("Diameter", typeof(double), typeof(CircleButton), 
            new PropertyMetadata(100.0));

    public double Diameter
    {
        get => (double)GetValue(DiameterProperty);
        set => SetValue(DiameterProperty, value);
    }

    // 类似添加其他属性：Content, Background等
}

2.2 CustomControl开发规范

步骤1：创建CustomControl类库

  1. 新建WPF自定义控件库项目
  2. 自动生成的Themes/Generic.xaml定义默认样式

步骤2：实现控件逻辑

[TemplatePart(Name = "PART_Progress", Type = typeof(Ellipse))]
public class CircularProgress : Control
{
    static CircularProgress()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(CircularProgress),
            new FrameworkPropertyMetadata(typeof(CircularProgress)));
    }

    public static readonly DependencyProperty ProgressProperty =
        DependencyProperty.Register("Progress", typeof(double), typeof(CircularProgress),
            new PropertyMetadata(0.0, OnProgressChanged));

    public double Progress
    {
        get => (double)GetValue(ProgressProperty);
        set => SetValue(ProgressProperty, value);
    }

    private static void OnProgressChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((CircularProgress)d).UpdateProgress();
    }

    private Ellipse _progressPart;

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        _progressPart = GetTemplateChild("PART_Progress") as Ellipse;
        UpdateProgress();
    }

    private void UpdateProgress()
    {
        if (_progressPart == null) return;
        // 实现进度更新逻辑
    }
}

步骤3：定义默认样式

<!-- Generic.xaml -->
<Style TargetType="{x:Type local:CircularProgress}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CircularProgress}">
                <Grid>
                    <Ellipse Stroke="{TemplateBinding BorderBrush}" 
                             StrokeThickness="5"/>
                    <Ellipse x:Name="PART_Progress" 
                             Stroke="{TemplateBinding Foreground}"
                             StrokeThickness="5"
                             StrokeDashArray="{TemplateBinding Progress}"
                             RenderTransformOrigin="0.5,0.5">
                        <Ellipse.RenderTransform>
                            <RotateTransform Angle="-90"/>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <TextBlock Text="{Binding Progress, RelativeSource={RelativeSource TemplatedParent}, 
                                  StringFormat={}{0}%}"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

三、WinForms自定义控件开发

3.1 复合控件开发

[DesignerCategory("Code")]
public class LabeledTextBox : UserControl
{
    private Label label;
    private TextBox textBox;

    public LabeledTextBox()
    {
        InitializeComponents();
    }

    private void InitializeComponents()
    {
        label = new Label { Dock = DockStyle.Left, AutoSize = true };
        textBox = new TextBox { Dock = DockStyle.Fill };

        Controls.Add(textBox);
        Controls.Add(label);

        // 默认值
        LabelText = "Label";
        TextValue = "";
    }

    [Category("Appearance")]
    public string LabelText
    {
        get => label.Text;
        set => label.Text = value;
    }

    [Category("Appearance")]
    public string TextValue
    {
        get => textBox.Text;
        set => textBox.Text = value;
    }

    [Browsable(true)]
    [EditorBrowsable(EditorBrowsableState.Always)]
    public new event EventHandler TextChanged
    {
        add => textBox.TextChanged += value;
        remove => textBox.TextChanged -= value;
    }
}

3.2 自定义绘制控件

public class GradientPanel : Panel
{
    private Color startColor = Color.Blue;
    private Color endColor = Color.White;

    [Category("Appearance")]
    public Color StartColor
    {
        get => startColor;
        set { startColor = value; Invalidate(); }
    }

    [Category("Appearance")]
    public Color EndColor
    {
        get => endColor;
        set { endColor = value; Invalidate(); }
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);

        using (var brush = new LinearGradientBrush(
            ClientRectangle, startColor, endColor, LinearGradientMode.Vertical))
        {
            e.Graphics.FillRectangle(brush, ClientRectangle);
        }

        // 绘制边框
        ControlPaint.DrawBorder(e.Graphics, ClientRectangle, 
            SystemColors.ControlDark, ButtonBorderStyle.Solid);
    }

    protected override void OnResize(EventArgs e)
    {
        base.OnResize(e);
        Invalidate(); // 重绘时刷新渐变
    }
}

四、高级自定义控件技术

4.1 依赖属性最佳实践

WPF依赖属性实现模式：

public class CustomSlider : Control
{
    // 1. 定义静态只读DependencyProperty字段
    public static readonly DependencyProperty MaximumProperty =
        DependencyProperty.Register(
            "Maximum",                     // 属性名称
            typeof(double),                // 属性类型
            typeof(CustomSlider),          // 所有者类型
            new FrameworkPropertyMetadata( // 元数据
                100.0,                    // 默认值
                FrameworkPropertyMetadataOptions.AffectsRender, // 元数据选项
                new PropertyChangedCallback(OnMaximumChanged),  // 变更回调
                new CoerceValueCallback(CoerceMaximum)),        // 强制回调
            new ValidateValueCallback(IsValidMaximum));         // 验证回调

    // 2. 定义CLR属性包装器
    public double Maximum
    {
        get => (double)GetValue(MaximumProperty);
        set => SetValue(MaximumProperty, value);
    }

    // 3. 属性变更处理
    private static void OnMaximumChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var slider = (CustomSlider)d;
        slider.CoerceValue(MinimumProperty);
        slider.UpdateVisual();
    }

    // 4. 强制值回调
    private static object CoerceMaximum(DependencyObject d, object value)
    {
        var slider = (CustomSlider)d;
        double min = slider.Minimum;
        return (double)value < min ? min : value;
    }

    // 5. 验证回调
    private static bool IsValidMaximum(object value)
    {
        return (double)value > 0;
    }
}

4.2 路由事件实现

public class RatingControl : Control
{
    // 1. 定义路由事件
    public static readonly RoutedEvent RatingChangedEvent =
        EventManager.RegisterRoutedEvent(
            "RatingChanged",                     // 事件名称
            RoutingStrategy.Bubble,              // 路由策略
            typeof(RoutedPropertyChangedEventHandler<int>), // 处理程序类型
            typeof(RatingControl));             // 所有者类型

    // 2. 提供CLR事件访问器
    public event RoutedPropertyChangedEventHandler<int> RatingChanged
    {
        add => AddHandler(RatingChangedEvent, value);
        remove => RemoveHandler(RatingChangedEvent, value);
    }

    // 3. 触发事件的方法
    protected virtual void OnRatingChanged(int oldValue, int newValue)
    {
        var args = new RoutedPropertyChangedEventArgs<int>(oldValue, newValue)
        {
            RoutedEvent = RatingControl.RatingChangedEvent
        };
        RaiseEvent(args);
    }

    // 4. 实际使用
    private int _rating;
    public int Rating
    {
        get => _rating;
        set
        {
            if (_rating != value)
            {
                int oldValue = _rating;
                _rating = value;
                OnRatingChanged(oldValue, _rating);
            }
        }
    }
}

4.3 设计时支持增强

WPF控件设计时特性：

[TemplateVisualState(Name = "Normal", GroupName = "CommonStates")]
[TemplateVisualState(Name = "Pressed", GroupName = "CommonStates")]
[TemplatePart(Name = "PART_Indicator", Type = typeof(FrameworkElement))]
public class StatefulButton : Button
{
    // 设计器可见的分类和描述
    [Category("Appearance")]
    [Description("设置按钮活动状态的颜色")]
    public Brush ActiveBrush
    {
        get => (Brush)GetValue(ActiveBrushProperty);
        set => SetValue(ActiveBrushProperty, value);
    }

    public static readonly DependencyProperty ActiveBrushProperty =
        DependencyProperty.Register("ActiveBrush", typeof(Brush), typeof(StatefulButton),
            new FrameworkPropertyMetadata(Brushes.Red,
                FrameworkPropertyMetadataOptions.AffectsRender));
}

WinForms控件设计时特性：

[DefaultEvent("ValueChanged")]
[DefaultProperty("Value")]
[ToolboxBitmap(typeof(TrackBar))] // 使用标准TrackBar的图标
public class RangeSlider : Control
{
    [Category("Behavior")]
    [Description("滑块的最小值")]
    [DefaultValue(0)]
    public int Minimum { get; set; } = 0;

    [Category("Behavior")]
    [Description("滑块的最大值")]
    [DefaultValue(100)]
    public int Maximum { get; set; } = 100;

    [Browsable(false)] // 不在属性网格中显示
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
    public int CalculatedValue { get; private set; }

    // 设计时编辑器
    [Editor(typeof(RangeValueEditor), typeof(UITypeEditor))]
    public int Value { get; set; }
}

五、性能优化策略

5.1 渲染性能优化

  1. 可视化树优化：
  • 减少不必要的布局嵌套
  • 使用DrawingVisual替代复杂控件组合
  • 对静态内容使用BitmapCache
  1. 重绘控制：
   // 只重绘必要区域
   protected override void OnRender(DrawingContext dc)
   {
       Rect invalidRect = new Rect(RenderSize);
       dc.DrawRectangle(Brushes.Transparent, null, invalidRect);
       // 自定义绘制逻辑
   }

   // 使用脏矩形技术
   public void UpdateDisplay(Rect changedArea)
   {
       InvalidateVisual(changedArea);
   }
  1. 硬件加速利用：
   <ControlTemplate>
       <Grid RenderOptions.BitmapScalingMode="HighQuality"
             CacheMode="BitmapCache">
           <!-- 控件内容 -->
       </Grid>
   </ControlTemplate>

5.2 内存管理技巧

  1. 资源释放模式：
   public class GraphicsControl : Control, IDisposable
   {
       private bool _disposed;
       private Bitmap _buffer;

       protected override void OnRender(DrawingContext dc)
       {
           if (_buffer == null)
               _buffer = new Bitmap((int)ActualWidth, (int)ActualHeight);

           using (var g = Graphics.FromImage(_buffer))
           {
               // 绘制到内存位图
           }

           dc.DrawImage(_buffer, new Rect(RenderSize));
       }

       public void Dispose()
       {
           Dispose(true);
           GC.SuppressFinalize(this);
       }

       protected virtual void Dispose(bool disposing)
       {
           if (_disposed) return;

           if (disposing)
           {
               _buffer?.Dispose();
           }

           _disposed = true;
       }

       ~GraphicsControl()
       {
           Dispose(false);
       }
   }
  1. 大对象处理：
  • 对大型资源使用WeakReference
  • 分块加载大数据集
  • 实现虚拟化面板

六、跨平台控件开发

6.1 基于.NET MAUI的跨平台控件

using Microsoft.Maui.Controls;
using Microsoft.Maui.Graphics;

public class MauiGauge : GraphicsView
{
    public static readonly BindableProperty ValueProperty =
        BindableProperty.Create(nameof(Value), typeof(double), typeof(MauiGauge), 0.0,
            propertyChanged: OnValueChanged);

    public double Value
    {
        get => (double)GetValue(ValueProperty);
        set => SetValue(ValueProperty, value);
    }

    public MauiGauge()
    {
        Drawable = new GaugeDrawable(this);
    }

    private static void OnValueChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is MauiGauge gauge)
        {
            gauge.Invalidate();
        }
    }

    private class GaugeDrawable : IDrawable
    {
        private readonly MauiGauge _gauge;

        public GaugeDrawable(MauiGauge gauge)
        {
            _gauge = gauge;
        }

        public void Draw(ICanvas canvas, RectF dirtyRect)
        {
            // 实现绘制逻辑
            canvas.StrokeColor = Colors.Black;
            canvas.StrokeSize = 4;
            canvas.DrawArc(10, 10, dirtyRect.Width-20, dirtyRect.Height-20, 
                          150, 240, false, false);

            // 根据Value绘制指针
            float angle = (float)(150 + _gauge.Value * 2.4);
            // 更多绘制代码...
        }
    }
}

6.2 AvaloniaUI自定义控件

public class AvaloniaCircularProgress : Control
{
    public static readonly StyledProperty<double> ValueProperty =
        AvaloniaProperty.Register<AvaloniaCircularProgress, double>(nameof(Value));

    public double Value
    {
        get => GetValue(ValueProperty);
        set => SetValue(ValueProperty, value);
    }

    static AvaloniaCircularProgress()
    {
        AffectsRender<AvaloniaCircularProgress>(ValueProperty);
    }

    public override void Render(DrawingContext context)
    {
        var center = new Point(Bounds.Width / 2, Bounds.Height / 2);
        var radius = Math.Min(Bounds.Width, Bounds.Height) / 2 - 10;

        // 绘制背景圆
        var backgroundPen = new Pen(Brushes.Gray, 5);
        context.DrawEllipse(null, backgroundPen, center, radius, radius);

        // 绘制进度弧
        var progressPen = new Pen(Brushes.Blue, 5);
        var startAngle = -Math.PI / 2;
        var endAngle = startAngle + 2 * Math.PI * Value / 100;

        var arc = new ArcSegment
        {
            Point = center + new Vector(radius * Math.Cos(endAngle), radius * Math.Sin(endAngle)),
            Size = new Size(radius, radius),
            SweepDirection = SweepDirection.Clockwise,
            IsLargeArc = Value > 50
        };

        var path = new PathGeometry();
        using (var ctx = path.Open())
        {
            ctx.BeginFigure(center + new Vector(radius * Math.Cos(startAngle), 
                            radius * Math.Sin(startAngle)), false);
            ctx.ArcTo(arc);
        }

        context.DrawGeometry(null, progressPen, path);
    }
}

七、企业级控件库设计

7.1 控件库架构规范

EnterpriseControls/
├── Assets/               # 静态资源
│   ├── Brushes.xaml      # 画刷资源
│   └── Icons/            # 图标资源
├── Themes/               # 样式主题
│   ├── Generic.xaml      # 默认样式
│   └── DarkTheme.xaml    # 暗黑主题
├── Common/               # 公共基础设施
│   ├── Converters/       # 值转换器
│   └── Behaviors/        # 交互行为
├── Primitives/           # 基础控件
│   ├── ButtonBase.cs     # 按钮基类
│   └── TrackBase.cs      # 轨道控件基类
├── Controls/             # 业务控件
│   ├── RatingControl.cs  # 评分控件
│   └── GaugeControl.cs   # 仪表盘控件
└── Documentation/        # 文档
    └── GettingStarted.md # 使用指南

7.2 版本控制与兼容性

  1. 语义化版本控制：
  • 主版本号：破坏性变更
  • 次版本号：向后兼容的功能新增
  • 修订号：问题修复
  1. 多目标框架支持：
   <Project Sdk="Microsoft.NET.Sdk">
     <PropertyGroup>
       <TargetFrameworks>net48;net6.0-windows</TargetFrameworks>
     </PropertyGroup>
   </Project>
  1. API兼容性检查：
  • 使用Microsoft.DotNet.ApiCompat工具
  • 维护API基线文件

八、调试与测试策略

8.1 可视化调试技巧

  1. 实时可视化树检查：
   // 在代码中输出可视化树
   public static void PrintVisualTree(Visual visual, int level = 0)
   {
       Debug.WriteLine(new string(' ', level * 2) + visual.GetType().Name);

       for (int i = 0; i < VisualTreeHelper.GetChildrenCount(visual); i++)
       {
           var child = VisualTreeHelper.GetChild(visual, i) as Visual;
           if (child != null)
               PrintVisualTree(child, level + 1);
       }
   }
  1. 设计时数据支持：
   <d:DesignProperties.DataContext>
       <local:DesignTimeViewModel/>
   </d:DesignProperties.DataContext>

8.2 自动化测试方案

  1. 单元测试框架：
   [TestClass]
   public class CustomControlTests
   {
       [TestMethod]
       public void TestDependencyProperty()
       {
           var control = new CustomSlider();
           control.Maximum = 150;

           Assert.AreEqual(150, control.Maximum);
           Assert.ThrowsException<ArgumentException>(() => control.Maximum = -1);
       }

       [WpfTestMethod]
       public void TestRendering()
       {
           var control = new CustomSlider { Maximum = 100, Value = 50 };

           var window = new Window { Content = control };
           window.Show(); // 可视化测试

           // 截图比对或视觉验证
       }
   }
  1. UI自动化测试：
  • 使用Appium或WinAppDriver
  • 实现控件识别模式：
   [AutomationPeer(typeof(CustomSliderAutomationPeer))]
   public class CustomSlider : Control
   {
       // 控件实现
   }

   public class CustomSliderAutomationPeer : FrameworkElementAutomationPeer
   {
       public CustomSliderAutomationPeer(CustomSlider owner) : base(owner) {}

       protected override string GetClassNameCore() => "CustomSlider";

       protected override AutomationControlType GetAutomationControlTypeCore() 
           => AutomationControlType.Slider;
   }

结语：自定义控件开发演进趋势

  1. 声明式UI的兴起：更多采用XAML-like语法
  2. Web技术融合：集成WebAssembly和WebComponents
  3. AI辅助设计：智能生成控件模板和样式
  4. 跨平台统一：.NET MAUI等框架的成熟
  5. 性能监控内建：运行时渲染性能分析工具

掌握自定义控件开发是成为高级C#开发者的必经之路。从简单的UserControl到复杂的模板化CustomControl，再到跨平台控件解决方案，这一技术路径不仅能够提升应用程序的质量和用户体验，更能深化对UI框架底层原理的理解。记住，优秀的自定义控件应该像原生控件一样自然——用户无需学习就能直觉地使用，开发者无需文档就能轻松集成。

a_a_a

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注