WPF设计标准学习记录22

元素名称/属性路径	属性/绑定关系	值/配置说明
UserControl	x:Class	HelloWorld.Controls.Widget
	mc:Ignorable	d
	x:Name	userControl
	FontSize	30
	Foreground	#666666
	BorderBrush	#8CDDCD
	d:DesignHeight	450
	d:DesignWidth	800
Border	BorderBrush	{Binding ElementName=userControl, Path=BorderBrush}
Border.Style	TargetType	Border
Style.Setter[Padding]	Value	10
Style.Setter[Background]	Value	White
Style.Setter[BorderBrush]	Value	#8CDDCD
Style.Setter[BorderThickness]	Value	0 3 0 0
Style.Setter[Margin]	Value	5
Style.Trigger(IsMouseOver)	Property+Value	Background→#F7F9F9
Grid	ColumnDefinitions	2列（第2列Width="auto"）
	RowDefinitions	2行均分
TextBlock[0]	Grid.Row+Column	(0,0)
	Text	{Binding Value}
	Foreground	{Binding ElementName=userControl.Foreground}
	FontSize	{Binding ElementName=userControl.FontSize}
TextBlock[1]	Grid.Row+Column	(1,0)
	Text	{Binding Title}
	FontSize	14
	TextWrapping	Wrap
TextBlock[2]	Grid.Row+Column	(0,1)
	Text	{Binding Icon}
	Foreground	{Binding ElementName=userControl.BorderBrush}
	FontSize	26
	Grid.RowSpan	2
	VerticalAlignment	Center

[控件初始化]
↓ 
1. 加载依赖属性 
   ├─ 设计时属性(d:*)仅在Blend中生效 
   └─ 运行时属性(mc:Ignorable过滤d命名空间)
↓ 
2. 构建视觉树 
   ├─ 创建Border容器 
   │   └─ 应用动态样式 
   │       ├─ 默认样式配置（边距/背景/边框）
   │       └─ 鼠标悬停交互逻辑 
   └─ 初始化Grid布局 
       ├─ 创建2x2单元格 
       └─ 部署3个数据绑定TextBlock 
↓ 
3. 数据绑定通道 
   ├─ Value显示区：双向绑定业务数据 
   ├─ Title显示区：单行文本绑定 
   └─ Icon显示区：特殊符号绑定 
↓ 
4. 交互响应机制 
   └─ 当鼠标悬停时： 
       ├─ 触发Border背景色渐变（#F7F9F9）
       └─ 保持边框动画连续性（BorderThickness动态保持）
↓ 
5. 渲染管线 
   ├─ 测量阶段(Measure)：根据auto列宽计算图标区域 
   └─ 排列阶段(Arrange)：保证文本换行正确布局 

	using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
 
namespace HelloWorld.Controls
{
    /// 

    /// Widget.xaml 的交互逻辑
    /// 
    public partial class Widget : UserControl
    {  
        public Widget()
        {
            InitializeComponent();
 
            DataContext = this;
        }
 
 
        public string Icon
        {
            get { return (string)GetValue(IconProperty); }
            set { SetValue(IconProperty, value); }
        }
 
        public static readonly DependencyProperty IconProperty =
            DependencyProperty.Register("Icon", typeof(string), typeof(Widget), new PropertyMetadata("☻"));
 
 
        public string Title
        {
            get { return (string)GetValue(TitleProperty); }
            set { SetValue(TitleProperty, value); }
        }
 
        public static readonly DependencyProperty TitleProperty =
            DependencyProperty.Register("Title", typeof(string), typeof(Widget), new PropertyMetadata("请输入标题"));
 
 
        public string Value
        {
            get { return (string)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value); }
        }
 
        public static readonly DependencyProperty ValueProperty