WPF --- 非Button自定义控件实现点击功能

孤寂人生

引言

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

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

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

接下来创建这个整体的控件，不使用 Button ，直接使用 Control，来创建自定义控件 OpenFolderBrowserControl :
Code Behind 代码如下：

1. public class OpenFolderBrowserControl : Control,
2. {
3.     static OpenFolderBrowserControl()
4.     {
5.         DefaultStyleKeyProperty.OverrideMetadata(typeof(OpenFolderBrowserControl), new FrameworkPropertyMetadata(typeof(OpenFolderBrowserControl)));
6.     }
8.     public static readonly DependencyProperty FilePathProperty = DependencyProperty.Register("FilePath", typeof(string), typeof(OpenFolderBrowserControl));
10.     [Description("文件路径")]
11.     public string FilePath
12.     {
13.         get => (string)GetValue(FilePathProperty);
14.         set => SetValue(FilePathProperty, value);
15.     }
16. }

复制代码

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

1.                                 </TextBox.Style>
2.                             </TextBox>
3.                             <Border
4.                                 Height="56"
5.                                 Margin="-60,0,0,0"
6.                                 Background="White"
7.                                 BorderBrush="#CAD2DD"
8.                                 BorderThickness="2"
9.                                 CornerRadius="0,8,8,0">
10.                                 <StackPanel
11. <Grid>
12.     <Grid.ColumnDefinitions>
13.         <ColumnDefinition Width="1*" />
14.         <ColumnDefinition Width="2*" />
15.     </Grid.ColumnDefinitions>
16.    
17.     <TextBlock
18.         HorizontalAlignment="Center"
19.         VerticalAlignment="Center"
20.         FontSize="22"
21.         Text="设置文件路径：" />
23.     <local:OpenFolderBrowserControl
24.         Grid.Column="1"
25.         HorizontalAlignment="Left"
26.         Click="OpenFolderBrowserControl_Click"
27.         Command="{Binding ClickCommand}"
28.         FilePath="{Binding FilePath, Mode=TwoWay}" />
29. </Grid>HorizontalAlignment="Center"
30. <Grid>
31.     <Grid.ColumnDefinitions>
32.         <ColumnDefinition Width="1*" />
33.         <ColumnDefinition Width="2*" />
34.     </Grid.ColumnDefinitions>
35.    
36.     <TextBlock
37.         HorizontalAlignment="Center"
38.         VerticalAlignment="Center"
39.         FontSize="22"
40.         Text="设置文件路径：" />
42.     <local:OpenFolderBrowserControl
43.         Grid.Column="1"
44.         HorizontalAlignment="Left"
45.         Click="OpenFolderBrowserControl_Click"
46.         Command="{Binding ClickCommand}"
47.         FilePath="{Binding FilePath, Mode=TwoWay}" />
48. </Grid>VerticalAlignment="Center"
49. <Grid>
50.     <Grid.ColumnDefinitions>
51.         <ColumnDefinition Width="1*" />
52.         <ColumnDefinition Width="2*" />
53.     </Grid.ColumnDefinitions>
54.    
55.     <TextBlock
56.         HorizontalAlignment="Center"
57.         VerticalAlignment="Center"
58.         FontSize="22"
59.         Text="设置文件路径：" />
61.     <local:OpenFolderBrowserControl
62.         Grid.Column="1"
63.         HorizontalAlignment="Left"
64.         Click="OpenFolderBrowserControl_Click"
65.         Command="{Binding ClickCommand}"
66.         FilePath="{Binding FilePath, Mode=TwoWay}" />
67. </Grid>Orientation="Horizontal">
68. <Grid>
69.     <Grid.ColumnDefinitions>
70.         <ColumnDefinition Width="1*" />
71.         <ColumnDefinition Width="2*" />
72.     </Grid.ColumnDefinitions>
73.    
74.     <TextBlock
75.         HorizontalAlignment="Center"
76.         VerticalAlignment="Center"
77.         FontSize="22"
78.         Text="设置文件路径：" />
80.     <local:OpenFolderBrowserControl
81.         Grid.Column="1"
82.         HorizontalAlignment="Left"
83.         Click="OpenFolderBrowserControl_Click"
84.         Command="{Binding ClickCommand}"
85.         FilePath="{Binding FilePath, Mode=TwoWay}" />
86. </Grid><Ellipse
87. <Grid>
88.     <Grid.ColumnDefinitions>
89.         <ColumnDefinition Width="1*" />
90.         <ColumnDefinition Width="2*" />
91.     </Grid.ColumnDefinitions>
92.    
93.     <TextBlock
94.         HorizontalAlignment="Center"
95.         VerticalAlignment="Center"
96.         FontSize="22"
97.         Text="设置文件路径：" />
99.     <local:OpenFolderBrowserControl
100.         Grid.Column="1"
101.         HorizontalAlignment="Left"
102.         Click="OpenFolderBrowserControl_Click"
103.         Command="{Binding ClickCommand}"
104.         FilePath="{Binding FilePath, Mode=TwoWay}" />
105. </Grid>    Width="5"
106. <Grid>
107.     <Grid.ColumnDefinitions>
108.         <ColumnDefinition Width="1*" />
109.         <ColumnDefinition Width="2*" />
110.     </Grid.ColumnDefinitions>
111.    
112.     <TextBlock
113.         HorizontalAlignment="Center"
114.         VerticalAlignment="Center"
115.         FontSize="22"
116.         Text="设置文件路径：" />
118.     <local:OpenFolderBrowserControl
119.         Grid.Column="1"
120.         HorizontalAlignment="Left"
121.         Click="OpenFolderBrowserControl_Click"
122.         Command="{Binding ClickCommand}"
123.         FilePath="{Binding FilePath, Mode=TwoWay}" />
124. </Grid>    Height="5"
125. <Grid>
126.     <Grid.ColumnDefinitions>
127.         <ColumnDefinition Width="1*" />
128.         <ColumnDefinition Width="2*" />
129.     </Grid.ColumnDefinitions>
130.    
131.     <TextBlock
132.         HorizontalAlignment="Center"
133.         VerticalAlignment="Center"
134.         FontSize="22"
135.         Text="设置文件路径：" />
137.     <local:OpenFolderBrowserControl
138.         Grid.Column="1"
139.         HorizontalAlignment="Left"
140.         Click="OpenFolderBrowserControl_Click"
141.         Command="{Binding ClickCommand}"
142.         FilePath="{Binding FilePath, Mode=TwoWay}" />
143. </Grid>    Margin="3"
144. <Grid>
145.     <Grid.ColumnDefinitions>
146.         <ColumnDefinition Width="1*" />
147.         <ColumnDefinition Width="2*" />
148.     </Grid.ColumnDefinitions>
149.    
150.     <TextBlock
151.         HorizontalAlignment="Center"
152.         VerticalAlignment="Center"
153.         FontSize="22"
154.         Text="设置文件路径：" />
156.     <local:OpenFolderBrowserControl
157.         Grid.Column="1"
158.         HorizontalAlignment="Left"
159.         Click="OpenFolderBrowserControl_Click"
160.         Command="{Binding ClickCommand}"
161.         FilePath="{Binding FilePath, Mode=TwoWay}" />
162. </Grid>    Fill="#949494" />
163. <Grid>
164.     <Grid.ColumnDefinitions>
165.         <ColumnDefinition Width="1*" />
166.         <ColumnDefinition Width="2*" />
167.     </Grid.ColumnDefinitions>
168.    
169.     <TextBlock
170.         HorizontalAlignment="Center"
171.         VerticalAlignment="Center"
172.         FontSize="22"
173.         Text="设置文件路径：" />
175.     <local:OpenFolderBrowserControl
176.         Grid.Column="1"
177.         HorizontalAlignment="Left"
178.         Click="OpenFolderBrowserControl_Click"
179.         Command="{Binding ClickCommand}"
180.         FilePath="{Binding FilePath, Mode=TwoWay}" />
181. </Grid><Ellipse
182. <Grid>
183.     <Grid.ColumnDefinitions>
184.         <ColumnDefinition Width="1*" />
185.         <ColumnDefinition Width="2*" />
186.     </Grid.ColumnDefinitions>
187.    
188.     <TextBlock
189.         HorizontalAlignment="Center"
190.         VerticalAlignment="Center"
191.         FontSize="22"
192.         Text="设置文件路径：" />
194.     <local:OpenFolderBrowserControl
195.         Grid.Column="1"
196.         HorizontalAlignment="Left"
197.         Click="OpenFolderBrowserControl_Click"
198.         Command="{Binding ClickCommand}"
199.         FilePath="{Binding FilePath, Mode=TwoWay}" />
200. </Grid>    Width="5"
201. <Grid>
202.     <Grid.ColumnDefinitions>
203.         <ColumnDefinition Width="1*" />
204.         <ColumnDefinition Width="2*" />
205.     </Grid.ColumnDefinitions>
206.    
207.     <TextBlock
208.         HorizontalAlignment="Center"
209.         VerticalAlignment="Center"
210.         FontSize="22"
211.         Text="设置文件路径：" />
213.     <local:OpenFolderBrowserControl
214.         Grid.Column="1"
215.         HorizontalAlignment="Left"
216.         Click="OpenFolderBrowserControl_Click"
217.         Command="{Binding ClickCommand}"
218.         FilePath="{Binding FilePath, Mode=TwoWay}" />
219. </Grid>    Height="5"
220. <Grid>
221.     <Grid.ColumnDefinitions>
222.         <ColumnDefinition Width="1*" />
223.         <ColumnDefinition Width="2*" />
224.     </Grid.ColumnDefinitions>
225.    
226.     <TextBlock
227.         HorizontalAlignment="Center"
228.         VerticalAlignment="Center"
229.         FontSize="22"
230.         Text="设置文件路径：" />
232.     <local:OpenFolderBrowserControl
233.         Grid.Column="1"
234.         HorizontalAlignment="Left"
235.         Click="OpenFolderBrowserControl_Click"
236.         Command="{Binding ClickCommand}"
237.         FilePath="{Binding FilePath, Mode=TwoWay}" />
238. </Grid>    Margin="3"
239. <Grid>
240.     <Grid.ColumnDefinitions>
241.         <ColumnDefinition Width="1*" />
242.         <ColumnDefinition Width="2*" />
243.     </Grid.ColumnDefinitions>
244.    
245.     <TextBlock
246.         HorizontalAlignment="Center"
247.         VerticalAlignment="Center"
248.         FontSize="22"
249.         Text="设置文件路径：" />
251.     <local:OpenFolderBrowserControl
252.         Grid.Column="1"
253.         HorizontalAlignment="Left"
254.         Click="OpenFolderBrowserControl_Click"
255.         Command="{Binding ClickCommand}"
256.         FilePath="{Binding FilePath, Mode=TwoWay}" />
257. </Grid>    Fill="#949494" />
258. <Grid>
259.     <Grid.ColumnDefinitions>
260.         <ColumnDefinition Width="1*" />
261.         <ColumnDefinition Width="2*" />
262.     </Grid.ColumnDefinitions>
263.    
264.     <TextBlock
265.         HorizontalAlignment="Center"
266.         VerticalAlignment="Center"
267.         FontSize="22"
268.         Text="设置文件路径：" />
270.     <local:OpenFolderBrowserControl
271.         Grid.Column="1"
272.         HorizontalAlignment="Left"
273.         Click="OpenFolderBrowserControl_Click"
274.         Command="{Binding ClickCommand}"
275.         FilePath="{Binding FilePath, Mode=TwoWay}" />
276. </Grid><Ellipse
277. <Grid>
278.     <Grid.ColumnDefinitions>
279.         <ColumnDefinition Width="1*" />
280.         <ColumnDefinition Width="2*" />
281.     </Grid.ColumnDefinitions>
282.    
283.     <TextBlock
284.         HorizontalAlignment="Center"
285.         VerticalAlignment="Center"
286.         FontSize="22"
287.         Text="设置文件路径：" />
289.     <local:OpenFolderBrowserControl
290.         Grid.Column="1"
291.         HorizontalAlignment="Left"
292.         Click="OpenFolderBrowserControl_Click"
293.         Command="{Binding ClickCommand}"
294.         FilePath="{Binding FilePath, Mode=TwoWay}" />
295. </Grid>    Width="5"
296. <Grid>
297.     <Grid.ColumnDefinitions>
298.         <ColumnDefinition Width="1*" />
299.         <ColumnDefinition Width="2*" />
300.     </Grid.ColumnDefinitions>
301.    
302.     <TextBlock
303.         HorizontalAlignment="Center"
304.         VerticalAlignment="Center"
305.         FontSize="22"
306.         Text="设置文件路径：" />
308.     <local:OpenFolderBrowserControl
309.         Grid.Column="1"
310.         HorizontalAlignment="Left"
311.         Click="OpenFolderBrowserControl_Click"
312.         Command="{Binding ClickCommand}"
313.         FilePath="{Binding FilePath, Mode=TwoWay}" />
314. </Grid>    Height="5"
315. <Grid>
316.     <Grid.ColumnDefinitions>
317.         <ColumnDefinition Width="1*" />
318.         <ColumnDefinition Width="2*" />
319.     </Grid.ColumnDefinitions>
320.    
321.     <TextBlock
322.         HorizontalAlignment="Center"
323.         VerticalAlignment="Center"
324.         FontSize="22"
325.         Text="设置文件路径：" />
327.     <local:OpenFolderBrowserControl
328.         Grid.Column="1"
329.         HorizontalAlignment="Left"
330.         Click="OpenFolderBrowserControl_Click"
331.         Command="{Binding ClickCommand}"
332.         FilePath="{Binding FilePath, Mode=TwoWay}" />
333. </Grid>    Margin="3"
334. <Grid>
335.     <Grid.ColumnDefinitions>
336.         <ColumnDefinition Width="1*" />
337.         <ColumnDefinition Width="2*" />
338.     </Grid.ColumnDefinitions>
339.    
340.     <TextBlock
341.         HorizontalAlignment="Center"
342.         VerticalAlignment="Center"
343.         FontSize="22"
344.         Text="设置文件路径：" />
346.     <local:OpenFolderBrowserControl
347.         Grid.Column="1"
348.         HorizontalAlignment="Left"
349.         Click="OpenFolderBrowserControl_Click"
350.         Command="{Binding ClickCommand}"
351.         FilePath="{Binding FilePath, Mode=TwoWay}" />
352. </Grid>    Fill="#949494" />
353.                                 </StackPanel>
354.                             </Border>
356.                         </StackPanel>
357.                     </Border>
358.                 </ControlTemplate>
359.             </Setter.Value>
360.         </Setter>
361.     </Style>

复制代码

这样创建的控件实际上是没有点击功能的。
那么接下来看一下点击功能方案实现。
点击功能方案实现

因为有 MVVM 的存在，所以在 WPF 中 Button 点击功能有两种方案，

• 第一种是直接注册点击事件，比如 Click="OpenFolderBrowserControl_Click"
  
• 第二种是绑定Command、CommandParameter、CommandTarget，比如 Command="{Binding ClickCommand}" CommandParameter="" CommandTarget="" 。
  

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

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

1. public event RoutedEventHandler? Click;

复制代码

定义Command

定义 Command 就需要 ICommandSource 接口，重点介绍一下 ICommandSource 接口。
ICommandSource 接口用于指示控件可以生成和执行命令。该接口定义了三个成员

• 定义了一个 ICommand 类型的属性 Command，
  
• 定义了一个表示与控件关联的， IInputElement 类型的 CommandTarget
  
• 定义了一个表示命令参数，object 类型的属性 CommandParameter
  

上述两段的定义如下：

1. public class OpenFolderBrowserControl : Control, ICommandSource
2. {
3.     //上文中已有代码此处省略...
5.     #region 定义点击事件
7.     public event RoutedEventHandler? Click;
9.     #endregion
12.     #region 定义command
14.     public static readonly DependencyProperty CommandProperty =
15.         DependencyProperty.Register("Command", typeof(ICommand), typeof(OpenFolderBrowserControl), new UIPropertyMetadata(null))
16.     public ICommand Command
17.     {
18.         get { return (ICommand)GetValue(CommandProperty); }
19.         set { SetValue(CommandProperty, value); }
20.     }
21.     public object CommandParameter
22.     {
23.         get { return (object)GetValue(CommandParameterProperty); }
24.         set { SetValue(CommandParameterProperty, value); }
25.     }
27.     public static readonly DependencyProperty CommandParameterProperty =
28.         DependencyProperty.Register("CommandParameter", typeof(object), typeof(OpenFolderBrowserControl));
30.     public IInputElement CommandTarget
31.     {
32.         get { return (IInputElement)GetValue(CommandTargetProperty); }
33.         set { SetValue(CommandTargetProperty, value); }
34.     }
36.     public static readonly DependencyProperty CommandTargetProperty =
37.         DependencyProperty.Register("CommandTarget", typeof(IInputElement), typeof(OpenFolderBrowserControl));

复制代码

实现点击功能

好了，到此为止我仅定义好了点击事件和 Command，但是并没有能够触发这两个功能的地方。
既然是要实现点击功能，那最直观的方法就是 OnMouseLeftButtonUp，该方法是 WPF 核心基类 UIElement的虚方法，我们可以直接重写。如下代码：

1. public class OpenFolderBrowserControl : Control, ICommandSource
2. {
3.     //上文中已有代码此处省略...
4.    
5.     protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
6.     {
8.         base.OnMouseLeftButtonUp(e);
9.         //调用点击事件
10.         Click?.Invoke(e.Source, e);
11.         //调用Command
12.         ICommand command = Command;
13.         object parameter = CommandParameter;
14.         IInputElement target = CommandTarget;
16.         RoutedCommand routedCmd = command as RoutedCommand;
17.         if (routedCmd != null && routedCmd.CanExecute(parameter, target))
18.         {
19.             routedCmd.Execute(parameter, target);
20.         }
21.         else if (command != null && command.CanExecute(parameter))
22.         {
23.             command.Execute(parameter);
24.         }
25.     }
26. }

复制代码

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

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

1. public class RelayCommand : ICommand
2. {
3.     private readonly Action? _execute;
5.     public RelayCommand(Action? execute)
6.     {
7.         _execute = execute;
8.     }
10.     public bool CanExecute(object? parameter)
11.     {
12.         return true;
13.     }
15.     public void Execute(object? parameter)
16.     {
17.         _execute?.Invoke();
18.     }
20.     public event EventHandler? CanExecuteChanged;
21. }

复制代码

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

1. public class TestViewModel : INotifyPropertyChanged
2. {
4.     public TestViewModel()
5.     {
6.         FilePath = Environment.GetFolderPath(Environment.SpecialFolder.Desktop);
7.     }
9.     public event PropertyChangedEventHandler? PropertyChanged;
10.    
11.     protected virtual void OnPropertyChanged(string propertyName)
12.     {
13.         PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
14.     }
16.     private string filePath = string.Empty;
17.     /// <summary>
18.     /// 文件路径
19.     /// </summary>
20.     public string FilePath
21.     {
22.         get { return filePath; }
23.         set { filePath = value; OnPropertyChanged(nameof(FilePath)); }
24.     }
27.     private ICommand clickCommand = null;
28.     /// <summary>
29.     /// 点击事件
30.     /// </summary>
31.     public ICommand ClickCommand
32.     {
33.         get { return clickCommand ??= new RelayCommand(Click); }
34.         set { clickCommand = value; }
35.     }
37.     private void Click()
38.     {
39.         MessageBox.Show($"ViewModel Clicked!The value of FilePath is {FilePath}");
40.     }
41. }

复制代码

窗体UI代码：

1. <Grid>
2.     <Grid.ColumnDefinitions>
3.         <ColumnDefinition Width="1*" />
4.         <ColumnDefinition Width="2*" />
5.     </Grid.ColumnDefinitions>
6.    
7.     <TextBlock
8.         HorizontalAlignment="Center"
9.         VerticalAlignment="Center"
10.         FontSize="22"
11.         Text="设置文件路径：" />
13.     <local:OpenFolderBrowserControl
14.         Grid.Column="1"
15.         HorizontalAlignment="Left"
16.         Click="OpenFolderBrowserControl_Click"
17.         Command="{Binding ClickCommand}"
18.         FilePath="{Binding FilePath, Mode=TwoWay}" />
19. </Grid>

复制代码

窗体 Code Behind 代码

1. public partial class MainWindow : Window
2. {
3.     public MainWindow()
4.     {
5.         InitializeComponent();
6.         DataContext = new TestViewModel();
7.     }
9.     private void OpenFolderBrowserControl_Click(object sender, RoutedEventArgs e)
10.     {
11.         FolderBrowserDialog folderBrowserDialog = new FolderBrowserDialog();
13.         DialogResult result = folderBrowserDialog.ShowDialog();
15.         if (result == System.Windows.Forms.DialogResult.OK)
16.         {
17.             string selectedFolderPath = folderBrowserDialog.SelectedPath;
19.             var Target = sender as OpenFolderBrowserControl;
21.             if (Target != null)
22.             {
23.                 Target.FilePath = selectedFolderPath;
24.             }
25.         }
26.     }
27. }

复制代码

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

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

结论

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

• 直接定义点击事件。
  
• 实现ICommandSource。
  

然后再重写各种鼠标事件，鼠标按下，鼠标抬起，双击等都可以实现。
上述方案既保证了 UI 的优雅也保证了 MVVM 架构的前后分离特性。
如果大家有更好更优雅的方案，欢迎留言讨论。

来源:https://www.cnblogs.com/pandefu/archive/2023/08/17/17638683.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！