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

引言

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

目标

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

准备工作

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

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

Code Behind 代码如下：

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 中的设计代码如下：

<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="" />

                                                                <!--<Condition Property="IsFocused" Value="False"/>-->

                                                            </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 就可以了。

public event RoutedEventHandler? Click;

定义Command

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

ICommandSource 接口用于指示控件可以生成和执行命令。该接口定义了三个成员

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

上述两段的定义如下：

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的虚方法，我们可以直接重写。如下代码：

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 实现：

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的值。

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代码：

<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 代码

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;

            }

        }

    }

}

测试结果

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

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

结论

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

实现核心就是两个方案：

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

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

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

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