WPF自定义控件简化版：账户菜单按钮（AccountButton）

我们以**“账户菜单按钮”为例，用更清晰的架构实现一个支持标题显示、渐变背景、选中状态高亮**的自定义控件。以下是分步拆解：

---

一、控件核心功能

我们要做一个类似这样的控件：

• 外观：一个圆形/圆角的小按钮，中间显示标题（如账户首字母）。
• 背景：支持自定义渐变颜色（从颜色A到颜色B）。
• 选中状态：左侧显示一条高亮竖线（选中时可见，未选中时隐藏）。

---

二、控件架构设计（分3步）

步骤1：创建UserControl（控件容器）

WPF中自定义控件最常用的方式是继承UserControl（用户控件），它本质是一个可复用的UI容器，包含自己的XAML布局和后台代码。

步骤2：定义依赖属性（暴露控件属性）

为了让控件能被外部配置（如修改标题、颜色、选中状态），需要将这些属性注册为依赖属性（DependencyProperty）。依赖属性的优势是支持数据绑定、样式设置和动态更新。

步骤3：设计XAML布局（可视化界面）

在XAML中定义控件的UI结构，将依赖属性绑定到具体的UI元素（如文本、背景颜色、可见性）。

---

三、完整代码实现（简化版）

1. 新建UserControl：AccountButton.xaml

XAML中定义控件的布局，核心是一个Button，内部包含两个Border（高亮条和背景块）。

<UserControl x:Class="MyApp.Controls.AccountButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Name="Root"  <!-- 给控件起别名，方便绑定 -->
             Width="30" Height="30">  <!-- 固定控件大小 -->

    <!-- 根元素是一个按钮 -->
    <Button Style="{StaticResource BaseButtonStyle}">  <!-- 假设外部有基础样式 -->
        <Grid>
            <!-- 选中状态高亮条（左侧竖线） -->
            <Border x:Name="ActiveIndicator"
                    HorizontalAlignment="Left"
                    Width="3"
                    Background="#FF0078D7"  <!-- 蓝色高亮 -->
                    Visibility="Collapsed"  <!-- 默认隐藏 -->
                    CornerRadius="0 2 2 0"/>  <!-- 右侧圆角 -->

            <!-- 背景块（显示渐变和标题） -->
            <Border x:Name="ContentBorder"
                    Width="25" Height="25"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    CornerRadius="3">  <!-- 圆角 -->
                <!-- 渐变背景 -->
                <Border.Background>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <!-- 起始色绑定控件的GradientStart属性 -->
                        <GradientStop Color="{Binding GradientStart, ElementName=Root}" Offset="0"/>
                        <!-- 结束色绑定控件的GradientEnd属性 -->
                        <GradientStop Color="{Binding GradientEnd, ElementName=Root}" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>

                <!-- 标题文本（绑定控件的Title属性） -->
                <TextBlock Text="{Binding Title, ElementName=Root}"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Center"
                           Foreground="White"
                           FontWeight="Bold"/>
            </Border>
        </Grid>
    </Button>
</UserControl>

2. 后台代码：AccountButton.xaml.cs

定义依赖属性，并处理选中状态的逻辑（例如：选中时显示高亮条）。

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace MyApp.Controls
{
    public partial class AccountButton : UserControl
    {
        public AccountButton()
        {
            InitializeComponent();
        }

        // ----------------------
        //  依赖属性定义（共3个）
        // ----------------------

        // 1. 标题（如账户首字母）
        public string Title
        {
            get => (string)GetValue(TitleProperty);
            set => SetValue(TitleProperty, value);
        }
        public static readonly DependencyProperty TitleProperty = 
            DependencyProperty.Register(
                "Title",              // 属性名（必须与包装器一致）
                typeof(string),       // 属性类型
                typeof(AccountButton) // 控件类型（当前类）
            );

        // 2. 渐变起始色
        public Color GradientStart
        {
            get => (Color)GetValue(GradientStartProperty);
            set => SetValue(GradientStartProperty, value);
        }
        public static readonly DependencyProperty GradientStartProperty = 
            DependencyProperty.Register(
                "GradientStart", 
                typeof(Color), 
                typeof(AccountButton)
            );

        // 3. 渐变结束色
        public Color GradientEnd
        {
            get => (Color)GetValue(GradientEndProperty);
            set => SetValue(GradientEndProperty, value);
        }
        public static readonly DependencyProperty GradientEndProperty = 
            DependencyProperty.Register(
                "GradientEnd", 
                typeof(Color), 
                typeof(AccountButton)
            );

        // 4. 选中状态（新增：控制高亮条可见性）
        public bool IsActive
        {
            get => (bool)GetValue(IsActiveProperty);
            set => SetValue(IsActiveProperty, value);
        }
        public static readonly DependencyProperty IsActiveProperty = 
            DependencyProperty.Register(
                "IsActive", 
                typeof(bool), 
                typeof(AccountButton),
                new PropertyMetadata(false, OnIsActiveChanged) // 添加回调：状态变化时触发
            );

        // 当IsActive属性变化时，更新高亮条可见性
        private static void OnIsActiveChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var button = d as AccountButton;
            if (button != null)
            {
                // 根据IsActive的值显示/隐藏高亮条
                button.ActiveIndicator.Visibility = (bool)e.NewValue 
                    ? Visibility.Visible 
                    : Visibility.Collapsed;
            }
        }
    }
}

---

四、代码关键点解释（超简单版）

1. 依赖属性的作用

• 外部可以通过Title、GradientStart等属性直接配置控件（类似原生控件的Width、Height）。
• 示例：在主窗口中使用控件时，可以这样写：

  <controls:AccountButton 
      Title="A" 
      GradientStart="#FF0078D7" 
      GradientEnd="#FF00B4D8" 
      IsActive="True"/>
  

2. 选中状态的自动更新

通过IsActiveProperty的PropertyMetadata添加了OnIsActiveChanged回调函数。当IsActive的值变化时（如从False变为True），会自动触发这个函数，更新高亮条的可见性。

3. XAML绑定的逻辑

• ElementName=Root：Root是UserControl的x:Name，通过它可以直接访问控件本身的属性（如GradientStart）。
• 渐变颜色直接绑定到GradientStart和GradientEnd，当这两个属性的值变化时，背景会自动更新。

---

五、最终效果

• 未选中时：显示渐变背景和标题，左侧高亮条隐藏。
• 选中时：左侧高亮条显示（颜色固定为蓝色），其他部分不变。

通过这种架构，你可以快速扩展控件功能（如添加点击事件、修改高亮条颜色等），核心逻辑清晰易理解！