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，當這兩個屬性的值變化時，背景會自動更新。

---

五、最終效果

• 未選中時：顯示漸變背景和標題，左側高亮條隱藏。
• 選中時：左側高亮條顯示（顏色固定為藍色），其他部分不變。

通過這種架構，你可以快速擴展控件功能（如添加點擊事件、修改高亮條顏色等），核心邏輯清晰易理解！