世界上存在成千上万种学习法，如果上天只让我掌握一种，那一定就是“费曼学习法”。


## 介绍
费曼学习法是由诺贝尔物理学奖获得者理查德·费曼提出的一种学习方法，其核心思想是将所学内容用自己的话表达出来，以此检验自己对知识的掌握程度。

费曼学习法可以简化为四个单词：**Concept**、**Teach**、**Review**、**Simplify**

具体而言，费曼学习法包括以下几个步骤：

- **Concept**：选择一个主题，并尽可能全面地了解这个主题；

- **Teach**：将所学内容以简明易懂的语言写下来或讲述给别人听，使用通俗易懂的语言和例子，避免使用学术术语和复杂的句子；

- **Review**：检查自己的表达是否清晰明了，是否有遗漏或错误；

- **Simplify**：基于反馈修正自己的表达，直到能够清晰表达该主题。

其优点是：

- 突出重点：在解释一个概念时，我们不得不选取最重要的信息，并将其用自己的话表达出来。这种方式可以帮助我们更好地理解和记忆知识点。

- 发现问题：当我们尝试用自己的话阐述某个主题时，常常会发现自己对某些内容并不理解或者存在疑问。这种方式可以帮助我们及时发现自己的盲点和问题，促进深层次的学习。

- 加深印象：通过不断反复的讲解和修正，我们能够形成对于某个主题的深层次理解，并加深对于相关概念的印象。

## 数据

美国学术界在1946年一项研究显示了不同学习方式的效益，准确的说，是学习者在两周以后还能记住内容（平均学习保持率）的多少。

下图是当时美国教育学家Engar Dale研究出的“学习金字塔”（The Cone of Learning）。

![image.png](https://niuery.com/static/img/a270baa53b9f0798e17123dc62717220.image.png)

由上图可以看出，**Learning by teaching 可以说是学习效率最高的方式**。

Learning by teaching --- 费曼学习法

## 引言
软件开发过程中，我们经常会遇到各种设计问题，例如如何管理对象之间的关系、如何优化代码的可复用性和可维护性等等。为了解决这些问题，我们可以使用设计模式。



设计模式是一种被广泛接受的软件设计思想，它提供了一套通用的解决方案，可以帮助我们更好地解决常见的软件设计问题。设计模式是从实践中总结出来的，它不仅可以提高代码的可读性和可维护性，还可以提高开发效率和代码的可复用性。

## 常见设计模式原则
设计模式有常见的五大原则 - [SOLID](https://niuery.com/post/9)
- 单一职责原则（SRP）
- 开放封闭原则（OCP）
- 里氏替换原则（LSP）
- 接口隔离原则（DIP）
- 依赖倒置原则（ISP）


补充第六原则，迪米特法则(Law of Demeter,LoD)也称为最少知识原则(Least Knowledge Principle,LKP)

## 常见设计模式类型
- 创建型模式：负责对象的创建和初始化，共有5种：**工厂方法模式**、**抽象工厂模式**、**单例模式**、**建造者模式**、**原型模式**。
- 结构型模式：负责对象的组合，共有7种：**适配器模式**、**装饰器模式**、**代理模式**、**外观模式**、**桥接模式**、**组合模式**、**享元模式**。
- 行为型模式：负责对象之间的通信，共有11种：**观察者模式**、**策略模式**、**迭代器模式**、**命令模式**、**责任链模式**、**模板方法模式**、**访问者模式**、**中介者模式**、**解释器模式**、**过滤器模式**、**备忘录模式**。
## 目录

### 创建型模式

1. [**抽象工厂模式（Abstract Factory Pattern）**](https://niuery.com/post/10)

抽象工厂模式是一种创建型设计模式，它提供了一种封装一组相关或相互依赖对象创建过程的方法，使得我们可以在不知道具体实现细节的情况下，创建一系列相互协作的对象。

2. [**工厂方法模式（Factory Method Pattern）**](https://niuery.com/post/33)

工厂方法模式是一种创建型设计模式，它提供了一种将对象的创建过程封装起来的方法，使得我们可以在不知道具体实现细节的情况下，创建各种不同类型的对象。

3. [**单例模式（Singleton Pattern）**](https://niuery.com/post/11)

单例模式是一种保证一个类只有一个实例的模式，它可以避免多个实例造成的资源浪费和对象的不一致性。单例模式通常使用一个私有的构造函数和一个静态的实例变量来实现。

4. [**建造者模式（Builder Pattern）**](https://niuery.com/post/13)

将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。建造者模式可以将复杂对象的构建过程抽象出来，从而使得系统更加灵活。

5. [**原型模式（Prototype Pattern）**](https://niuery.com/post/14)

用原型实例指定创建对象的种类，并通过复制这些原型创建新的对象。原型模式可以在运行时动态地创建对象，从而避免了静态工厂方法所带来的编译时耦合。


### 结构型模式
1. [**适配器模式（Adapter Pattern）**](https://niuery.com/post/15)

适配器模式是一种将一个类的接口转换成客户端所期望的另一种接口的模式，它可以让原本不兼容的类能够协同工作。这种模式可以避免因接口不匹配而导致的代码重构和重复开发。

2. [**装饰器模式（Decorator Pattern）**](https://niuery.com/post/16)

装饰器模式是一种在运行时动态地给对象添加新的功能的模式，它通过将对象包装在一个装饰器中来实现。这种模式可以避免使用继承带来的复杂性和静态特性，提高代码的灵活性和可扩展性。

3. [**代理模式（Proxy Pattern）**](https://niuery.com/post/17)

代理模式是一种结构型设计模式，它允许我们创建一个代理对象来控制对另一个对象的访问。代理对象可以充当原始对象的访问接口，从而控制对原始对象的访问。代理模式通常用于远程访问、延迟加载、访问控制等方面。

4. [**外观模式（Facade Pattern）**](https://niuery.com/post/18)

为一组复杂的子系统提供一个简单的接口，从而隐藏子系统的复杂性。外观模式可以降低客户端和子系统之间的耦合度，同时提高客户端的易用性。

5. [**桥接模式（Bridge Pattern）**](https://niuery.com/post/19)

桥接模式是一种将抽象部分与它的实现部分分离开来的模式，使它们可以独立地变化。这种模式可以避免因为实现细节的变化而导致的代码修改和重构。

6. [**组合模式（Composite Pattern）**](https://niuery.com/post/20)

组合模式是一种将对象组合成树形结构的模式，使得客户端可以像处理单个对象一样处理对象的组合。这种模式可以使得对象之间的关系更加清晰，提高代码的可读性和可维护性。

7. [**享元模式（Flyweight Pattern）**](https://niuery.com/post/21)

享元模式是一种结构型设计模式，用于优化对象的创建和使用。该模式通过共享相同的数据，来减少内存的使用和对象的创建。通常情况下，享元模式适用于存在大量相似对象的情况

### 行为型模式

1. [**观察者模式（Observer Pattern）**](https://niuery.com/post/12)

观察者模式是一种对象间的一对多依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都会收到通知并自动更新。这种模式可以降低对象之间的耦合度，提高系统的灵活性和可扩展性。

2. [**策略模式（Strategy Pattern）**](https://niuery.com/post/22)

策略模式是一种定义一系列算法的模式，它将每个算法封装在一个类中，并使它们可以互相替换。这种模式可以避免使用大量的条件语句和重复代码，提高代码的可维护性和可扩展性。

3. [**迭代器模式（Iterator Pattern）**](https://niuery.com/post/23)

迭代器模式是一种访问一个聚合对象中的各个元素的方式，而又不需要暴露该对象的内部表示。这种模式可以让客户端透明地访问聚合对象中的元素，同时避免了聚合对象的数据结构对客户端的依赖。

4. [**命令模式（Command Pattern）**](https://niuery.com/post/25)

将请求封装成对象，从而使不同的请求可以被不同的对象处理。命令模式可以将请求的发送者和接收者解耦，同时支持请求的撤销和重做

5. [**责任链模式（Chain of Responsibility Pattern）**](https://niuery.com/post/26)

将请求的发送者和接收者解耦，通过一条由多个处理对象组成的链来处理请求。责任链模式可以根据需求动态地组合处理对象，从而实现请求的自动转发和处理。

6. [**模板方法模式（Template Method Pattern）**](https://niuery.com/post/27)

定义一个操作中的算法骨架，将一些步骤延迟到子类中。模板方法模式可以提高代码的复用性和可维护性，同时可以避免子类中的代码重复

7. [**状态模式（State Pattern）**](https://niuery.com/post/28)

允许对象在内部状态发生改变时改变它的行为。状态模式将对象的行为和状态进行分离，从而将复杂的条件判断转化为简单的状态切换。

8. [**中介者模式（Mediator Pattern）**](https://niuery.com/post/29)

用一个中介对象来封装一系列的对象交互，从而使对象之间的交互松散耦合。中介者模式可以简化对象之间的交互，同时降低对象之间的依赖关系。

9. [**解释器模式（Interpreter Pattern）**](https://niuery.com/post/30)

给定一个语言，定义它的文法的一种表示，并定义一个解释器，该解释器使用该表示来解释语言中的句子。解释器模式可以将复杂的语言转化为易于处理的数据结构，从而使得语言的解释更加容易。

10. [**访问者模式（Visitor Pattern）**](https://niuery.com/post/31)

访问者模式是一种行为设计模式，它可以让你将算法与它们操作的对象分离。这样，你可以在不修改对象结构的情况下，向现有的对象结构添加新的操作。

11. [**备忘录模式（Memento Pattern）**](https://niuery.com/post/32)
备忘录模式是一种行为型设计模式，它允许我们将对象的状态保存在备忘录对象中，从而可以在以后恢复对象的状态。该模式通常用于需要撤销、恢复操作的场景，例如文本编辑器、绘图应用等。备忘录模式通过将状态保存在备忘录对象中来实现状态的恢复，从而保证了对象的封装性和数据安全性。

> 参考资料
> 
> https://dofactory.com/net/abstract-factory-design-pattern
> 
> https://refactoring.guru/design-patterns

重温设计模式 --- 前篇

## 引言

上一篇中 [WPF --- 重写DataGrid样式](https://niuery.com/post/79)，因新产品UI需要，重写了一下微软 **WPF** 原生的 `DataGrid` 的样式，包含如下内容：
- 基础设置，一些基本背景色，字体颜色等。
- 滚动条样式。
- 实现圆角表格，重写表格的一些基础样式，例如 `CellStyle` ，`RowStyle`,`RowHeaderStyle`, `ColumnHeaderStyle`等。

重写过程中，遇到了两个问题：
1. 如何获取 **WPF** 原生的 `DataGrid` 的样式？
2. 滚动条样式中，如何固定滚动条长度？

本篇文章分享一下这两个问题的解决办法。


## 解决方法
我来分别分享一下我遇到的这两个问题。

### 问题1
第一个，如何获取 **WPF** 原生的 `DataGrid` 的样式？

这个问题不限于原生的 `DataGrid` 的样式，其他的一些样式比如 `checkBox`,`RadioButton`, `ComboBox`。

这些控件对于一些初学者来说，很难理解他是怎么实现的。

比如  `ComboBox` 控件，我刚开始学习WPF时的时候，我就不理解这个是怎么实现的，我后来还是通过查询微软官方文档 [[1]ComboBox Styles and Templates](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/combobox-styles-and-templates?view=netframeworkdesktop-4.8&viewFallbackFrom=netdesktop-6.0) ，文档里给出了 `ComboBox Styles` 和 `ComboBox Templates` ，看完设计代码之后才明白原生的ComBox控件是怎么实现的。

那么用翻阅官方文档的方式效率太低了，所以我这回找了一个效率很高的方法吗，就是是通过 **Blend（全称：Microsoft Blend for Visual Studio）**，这个是跟随 Visual Studio 一起安装的，平常我也使用 Blend ，做一些自定义控件和动画效果等，十分好用。接下来演示一下如何获取 `ComboBox` 的原生样式。

**第一步：**

使用 Blend 创建一个 WPF 项目，再窗体中添加一个 `ComboBox` 。

**第二步：**

选中 `ComboBox` ，在设计视图左上角点击 `ComboBox` 下拉框，再点击“编辑模板”，再点击“编辑副本”。
![image.png](https://niuery.com/static/img/d68528c709aa3fa390bd99ff7bcd7df8.image.png)

这时会弹出创建资源的窗体，可以选择你创建样式的形式是什么。
- 关键字选项：可以选择你创建的样式是否带 `Key`，若不带 `Key` 则默认应用在所有该类型控件上。
- 定义位置选项：“应用程序”选项会将该样式创建到 `App.xaml` 文件中。“此文档”选项会将该样式创建到当前窗体的 `Window.Resources` 中，最后一个“资源字典”选项，则会创建一个新的资源字典文件或者添加到已有资源字典文件。

![image.png](https://niuery.com/static/img/52bbd8cc7a59fe8fda682b96b3c93675.image.png)

**第三步：**

我这里选择，生成到当前文件 `Window.Resources` 中且带 `Key` 的样式，然后他就会生成原生的样式代码。如下所示，这里代码太多，折叠展示。

![image.png](https://niuery.com/static/img/08e87107ebd321364f56e49417c0143e.image.png)

**第四步：**

可以看到它生成了一堆的资源，这时候我们只需要找我们想要的那一部分，比如 `ComboBoxTemplate` ，从代码中就可以看出，`ComboBox` 主要有三部分组成
- Popup：它的作用就是当 `ToggleButton` 的 `IsChecked` 为true时，展开其内容，它的内容就是 `ScrollViewer`，就是我们看到的下拉弹出的内容了。
- ToggleButton： 这个就是右侧那个上下尖括号符号按钮，用于打开或关闭 `Popup` 内容。
- ContentPresenter：内容容器，可以自定义任何控件模板、数据模板或样式在其中展示。

![image.png](https://niuery.com/static/img/5c15c7506b4ab084a4e65ac95343f6b9.image.png)


所以，到此为止，我们就明白了原生的 `ComboBox` 是怎么实现的了，而且有了这个原生样式，就可以在此基础之上进行修改，美化，从而演变成我们想要的样子。

### 问题2
第二个问题， 滚动条样式中，如何固定滚动条长度？

在原生的滚动条样式中，纵方向上的滚动条的高度是跟随你窗口的大小和内容的多少而改变的，窗口大内容少，滚动条的高度就越大，反之亦然。

我调试了很久，包括重写 `Thumb` 的样式，修改 `Thumb` 的高度，都一直不生效，最后在官方文档 [[2]How to: Customize the Thumb Size on a ScrollBar](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/how-to-customize-the-thumb-size-on-a-scrollbar?view=netframeworkdesktop-4.8&viewFallbackFrom=netdesktop-6.0) 中找到了解决方案，就是通过设置`HorizontalScrollBarButtonWidthKey` 来固定滚动条长度。文中将其


![image.png](https://niuery.com/static/img/c03e5b4511880e33297e00e43c3af84f.image.png)

## 小结
Blend 本身就是一个专业级的界面设计工具，可以大大提高我们创建丰富、交互式的用户界面（UI）和用户体验（UX）设计的效率。

而通过 Blend 获取原生样式，阅读原生样式，非常有利于理解控件设计的，在此基础上进行修改，美化也是能够事半功倍的，强烈建议大家学会。

>参考
>
>[1] https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/combobox-styles-and-templates?view=netframeworkdesktop-4.8&viewFallbackFrom=netdesktop-6.0
> 
>[2] https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/how-to-customize-the-thumb-size-on-a-scrollbar?view=netframeworkdesktop-4.8&viewFallbackFrom=netdesktop-6.0

WPF --- 如何重写WPF原生控件样式？

WPF --- 重写圆角DataGrid样式

## 引言

今天在做一个设置文件夹路径的功能，就是一个文本框，加个按钮，点击按钮，弹出 `FolderBrowserDialog` 再选择文件夹路径，简单做法，可以直接 `StackPanel` 横向放置一个 `TextBox` 和一个 `Image Button`，然后点击按钮在 后台代码中给 `ViewModel` 的 `FilePath`赋值。但是这样属实不够优雅，UI 不够优雅，代码实现也可谓是强耦合，那接下来我分享一下我的实现方案。




## 目标

做这个设置文件夹路径的功能，我的目标是点击任何地方都可以打开 `FolderBrowserDialog`，那就需要把文本框，按钮作为一个整体控件，且选择完文件夹路径后就给绑定的 `ViewModel` 的 `FilePath` 赋值。

## 准备工作

首先，既然要设计一个整体控件，那么 UI 如下：

![image.png](https://niuery.com/static/img/48ccc2996b94b92e444e3fa5996c0c2d.image.png)

接下来创建这个整体的控件，不使用 `Button` ，直接使用 `Control`，来创建自定义控件 `OpenFolderBrowserControl` :

**Code Behind** 代码如下：

```csharp
public class OpenFolderBrowserControl : Control,
{
    static OpenFolderBrowserControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(OpenFolderBrowserControl), new FrameworkPropertyMetadata(typeof(OpenFolderBrowserControl)));
    }

    public static readonly DependencyProperty FilePathProperty = DependencyProperty.Register("FilePath", typeof(string), typeof(OpenFolderBrowserControl));

    [Description("文件路径")]
    public string FilePath
    {
        get => (string)GetValue(FilePathProperty);
        set => SetValue(FilePathProperty, value);
    }
}
```

**Themes/Generic.xaml** 中的设计代码如下：

```xml
<Style TargetType="{x:Type local:OpenFolderBrowserControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:OpenFolderBrowserControl}">
                    <Border
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                        <StackPanel Orientation="Horizontal">

                            <TextBox
                                Width="{TemplateBinding Width}"
                                Height="56"
                                Padding="0,0,60,0"
                                IsEnabled="False"
                                IsReadOnly="True"
                                Text="{Binding FilePath, RelativeSource={RelativeSource Mode=TemplatedParent}}">
                                <TextBox.Style>
                                    <Style TargetType="{x:Type TextBox}">
                                        <Setter Property="Background" Value="White" />
                                        <Setter Property="BorderBrush" Value="#CAD2DD" />
                                        <Setter Property="Foreground" Value="#313F56" />
                                        <Setter Property="BorderThickness" Value="2" />
                                        <Setter Property="KeyboardNavigation.TabNavigation" Value="None" />
                                        <Setter Property="HorizontalContentAlignment" Value="Left" />
                                        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                                        <Setter Property="AllowDrop" Value="False" />
                                        <Setter Property="FontSize" Value="22" />
                                        <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst" />
                                        <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
                                        <Setter Property="HorizontalAlignment" Value="Left" />
                                        <Setter Property="VerticalAlignment" Value="Center" />
                                        <Setter Property="Margin" Value="20,0,0,0" />
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="{x:Type TextBox}">
                                                    <Border
                                                        x:Name="border"
                                                        Background="{TemplateBinding Background}"
                                                        BorderBrush="{TemplateBinding BorderBrush}"
                                                        BorderThickness="{TemplateBinding BorderThickness}"
                                                        CornerRadius="8"
                                                        SnapsToDevicePixels="True">
                                                        <Grid>
                                                            <ScrollViewer
                                                                x:Name="PART_ContentHost"
                                                                Margin="20,0,0,0"
                                                                VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                                                VerticalContentAlignment="Center"
                                                                Focusable="False"
                                                                FontFamily="{TemplateBinding FontFamily}"
                                                                FontSize="{TemplateBinding FontSize}"
                                                                HorizontalScrollBarVisibility="Hidden"
                                                                VerticalScrollBarVisibility="Hidden" />
                                                            <TextBlock
                                                                x:Name="WARKTEXT"
                                                                Margin="20,0,0,0"
                                                                HorizontalAlignment="Left"
                                                                VerticalAlignment="Center"
                                                                FontFamily="{TemplateBinding FontFamily}"
                                                                FontSize="{TemplateBinding FontSize}"
                                                                Foreground="#A0ADBE"
                                                                Text="{TemplateBinding Tag}"
                                                                Visibility="Collapsed" />
                                                        </Grid>
                                                    </Border>
                                                    <ControlTemplate.Triggers>
                                                        <Trigger Property="IsEnabled" Value="False">
                                                            <Setter TargetName="border" Property="Opacity" Value="0.56" />
                                                        </Trigger>
                                                        <Trigger Property="IsMouseOver" Value="True">
                                                            <Setter TargetName="border" Property="BorderBrush" Value="#CAD2DD" />
                                                        </Trigger>
                                                        <Trigger Property="IsKeyboardFocused" Value="True">
                                                            <Setter TargetName="border" Property="BorderBrush" Value="#CAD2DD" />
                                                        </Trigger>
                                                        <MultiTrigger>
                                                            <MultiTrigger.Conditions>
                                                                <Condition Property="Text" Value="" />
                                                                
                                                            </MultiTrigger.Conditions>
                                                            <Setter TargetName="WARKTEXT" Property="Visibility" Value="Visible" />
                                                        </MultiTrigger>
                                                    </ControlTemplate.Triggers>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </TextBox.Style>
                            </TextBox>
                            <Border
                                Height="56"
                                Margin="-60,0,0,0"
                                Background="White"
                                BorderBrush="#CAD2DD"
                                BorderThickness="2"
                                CornerRadius="0,8,8,0">
                                <StackPanel
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Orientation="Horizontal">
                                    <Ellipse
                                        Width="5"
                                        Height="5"
                                        Margin="3"
                                        Fill="#949494" />
                                    <Ellipse
                                        Width="5"
                                        Height="5"
                                        Margin="3"
                                        Fill="#949494" />
                                    <Ellipse
                                        Width="5"
                                        Height="5"
                                        Margin="3"
                                        Fill="#949494" />
                                </StackPanel>
                            </Border>

                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
```
这样创建的控件实际上是没有点击功能的。

那么接下来看一下点击功能方案实现。

## 点击功能方案实现

因为有 **MVVM** 的存在，所以在 WPF 中 `Button` 点击功能有两种方案，
- 第一种是直接注册点击事件，比如 `Click="OpenFolderBrowserControl_Click"` 
- 第二种是绑定Command、CommandParameter、CommandTarget，比如 `Command="{Binding ClickCommand}" CommandParameter="" CommandTarget="" `。

但是上文中我们定义的是一个 `Control` ，它既没有 `Click` 也没有 `Command`，所以，我们需要给 `OpenFolderBrowserControl` 定义`Click` 和 `Command`。

### 定义点击事件

定义点击事件比较简单，直接声明一个 `RoutedEventHandler` ，命名为 `Click` 就可以了。


```csharp
public event RoutedEventHandler? Click;
```
### 定义Command

定义 `Command` 就需要 `ICommandSource` 接口，重点介绍一下 `ICommandSource` 接口。

`ICommandSource` 接口用于指示控件可以生成和执行命令。该接口定义了三个成员
- 定义了一个 `ICommand` 类型的属性 `Command`，
- 定义了一个表示与控件关联的， `IInputElement` 类型的 `CommandTarget`
- 定义了一个表示命令参数，`object` 类型的属性 `CommandParameter`


上述两段的定义如下：

```csharp
public class OpenFolderBrowserControl : Control, ICommandSource
{
    //上文中已有代码此处省略...

    #region 定义点击事件

    public event RoutedEventHandler? Click;

    #endregion


    #region 定义command

    public static readonly DependencyProperty CommandProperty =
        DependencyProperty.Register("Command", typeof(ICommand), typeof(OpenFolderBrowserControl), new UIPropertyMetadata(null))
    public ICommand Command
    {
        get { return (ICommand)GetValue(CommandProperty); }
        set { SetValue(CommandProperty, value); }
    }
    public object CommandParameter
    {
        get { return (object)GetValue(CommandParameterProperty); }
        set { SetValue(CommandParameterProperty, value); }
    }

    public static readonly DependencyProperty CommandParameterProperty =
        DependencyProperty.Register("CommandParameter", typeof(object), typeof(OpenFolderBrowserControl));

    public IInputElement CommandTarget
    {
        get { return (IInputElement)GetValue(CommandTargetProperty); }
        set { SetValue(CommandTargetProperty, value); }
    }

    public static readonly DependencyProperty CommandTargetProperty =
        DependencyProperty.Register("CommandTarget", typeof(IInputElement), typeof(OpenFolderBrowserControl));
```

## 实现点击功能

好了，到此为止我仅定义好了点击事件和 Command，但是并没有能够触发这两个功能的地方。

既然是要实现点击功能，那最直观的方法就是 `OnMouseLeftButtonUp`，该方法是 WPF 核心基类 `UIElement`的虚方法，我们可以直接重写。如下代码：


```csharp
public class OpenFolderBrowserControl : Control, ICommandSource
{
    //上文中已有代码此处省略...
    
    protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
    {

        base.OnMouseLeftButtonUp(e);
        //调用点击事件
        Click?.Invoke(e.Source, e);
        //调用Command
        ICommand command = Command;
        object parameter = CommandParameter;
        IInputElement target = CommandTarget;

        RoutedCommand routedCmd = command as RoutedCommand;
        if (routedCmd != null && routedCmd.CanExecute(parameter, target))
        {
            routedCmd.Execute(parameter, target);
        }
        else if (command != null && command.CanExecute(parameter))
        {
            command.Execute(parameter);
        }
    }
}

```
到此位置，我们的非Button自定义控件实现点击的需求就完成了，接下来测试一下。

## 测试

准备测试窗体和 `ViewModel`，这里为了不引入依赖包，也算是复习一下 **MVVM** 的实现，就手动实现 `ICommand` 和 `INotifyPropertyChanged`。

**ICommand** 实现：

```csharp
public class RelayCommand : ICommand
{
    private readonly Action? _execute;

    public RelayCommand(Action? execute)
    {
        _execute = execute;
    }

    public bool CanExecute(object? parameter)
    {
        return true;
    }

    public void Execute(object? parameter)
    {
        _execute?.Invoke();
    }

    public event EventHandler? CanExecuteChanged;
}

```

**TestViewModel** 实现：
这里的 `ClickCommand` 触发之后，我输出了当前 `FilePath`的值。

```csharp
public class TestViewModel : INotifyPropertyChanged
{

    public TestViewModel()
    {
        FilePath = Environment.GetFolderPath(Environment.SpecialFolder.Desktop);
    }

    public event PropertyChangedEventHandler? PropertyChanged;
    
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private string filePath = string.Empty;
    /// <summary>
    /// 文件路径
    /// </summary>
    public string FilePath
    {
        get { return filePath; }
        set { filePath = value; OnPropertyChanged(nameof(FilePath)); }
    }


    private ICommand clickCommand = null;
    /// <summary>
    /// 点击事件
    /// </summary>
    public ICommand ClickCommand
    {
        get { return clickCommand ??= new RelayCommand(Click); }
        set { clickCommand = value; }
    }

    private void Click()
    {
        MessageBox.Show($"ViewModel Clicked!The value of FilePath is {FilePath}");
    }
}
```

**窗体UI代码**：

```xml
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>
    
    <TextBlock
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        FontSize="22"
        Text="设置文件路径：" />

    <local:OpenFolderBrowserControl
        Grid.Column="1"
        HorizontalAlignment="Left"
        Click="OpenFolderBrowserControl_Click"
        Command="{Binding ClickCommand}"
        FilePath="{Binding FilePath, Mode=TwoWay}" />
</Grid>
```

**窗体 Code Behind 代码**
```csharp
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new TestViewModel();
    }

    private void OpenFolderBrowserControl_Click(object sender, RoutedEventArgs e)
    {
        FolderBrowserDialog folderBrowserDialog = new FolderBrowserDialog();

        DialogResult result = folderBrowserDialog.ShowDialog();

        if (result == System.Windows.Forms.DialogResult.OK)
        {
            string selectedFolderPath = folderBrowserDialog.SelectedPath;

            var Target = sender as OpenFolderBrowserControl;

            if (Target != null)
            {
                Target.FilePath = selectedFolderPath;
            }
        }
    }
}
```

**测试结果** 

我点击整个控件的任意地方，都能打开文件夹浏览器。

![image.png](https://niuery.com/static/img/0fc94e20bbff500396d3607d4e0308ca.image.png)

选择音乐文件夹后，弹窗提示 `ViewModel Clicked!The value of FilePath is C:\Users\Administrator\Music`


![image.png](https://niuery.com/static/img/614fa1a77dee6ef3b8341fa3ea81c231.image.png)

## 结论

从测试结果中可以看出，在 UI 注册的 **Click** 和 **Command** 均触发。这个方案仅仅是抛砖引玉，只要任意控件（非button）需要实现点击功能，都可以这样去实现。

实现核心就是两个方案：
- 直接定义点击事件。
- 实现ICommandSource。

然后再重写各种鼠标事件，鼠标按下，鼠标抬起，双击等都可以实现。

上述方案既保证了 UI 的优雅也保证了 MVVM 架构的前后分离特性。

如果大家有更好更优雅的方案，欢迎留言讨论。