[WPF] UserControl vs CustomControl

介绍

WPF中有两种控件：UserControl和CustomControl，但是这两者有什么区别呢？这篇博客中将介绍两者之间的区别，这样可以在项目中合理的使用它们。

UserControl

• 将多个WPF控件(例如：TextBox，TextBlock，Button)进行组合成一个可复用的控件组；
• 由XAML和Code Behind代码组成；
• 不支持样式/模板重写；
• 继承自UserControl；

下面创建的一个RGBControl由3个TextBlock，3个TextBox，1个Rectangle组成。我们可以在WPF的任意窗体/Page上面复用该UserControl。

XAML Code:

<Grid Background="LightGray">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>

    <TextBlock Text="Red" />
    <TextBlock Text="Green" Grid.Row="1" />
    <TextBlock Text="Blue" Grid.Row="2" />

    <TextBox Text="{Binding Red, UpdateSourceTrigger=PropertyChanged}" 
             VerticalContentAlignment="Center" Grid.Column="1" Height="25" Width="80" Margin="0,5" />
    <TextBox Text="{Binding Green, UpdateSourceTrigger=PropertyChanged}" 
             VerticalContentAlignment="Center" Grid.Row="1" Grid.Column="1" Height="25" Width="80" Margin="0,5" />
    <TextBox Text="{Binding Blue, UpdateSourceTrigger=PropertyChanged}" 
             VerticalContentAlignment="Center" Grid.Row="2" Grid.Column="1" Height="25" Width="80" Margin="0,5" />

    <Rectangle Fill="{Binding Color, Converter={StaticResource ColorToSolidBrushConverter}}" 
               Grid.Column="2" Grid.RowSpan="3" Margin="10, 5" Width="100" Height="100"/>
</Grid>

C# Code

public partial class RGBControl : UserControl
{
    public RGBControl()
    {
        InitializeComponent();

        this.DataContext = new RGBViewModel();
    }
}

public class RGBViewModel : ObservableObject
{
    private byte _red = 0;
    public byte Red
    {
        get
        {
            return _red;
        }
        set
        {
            if(_red != value)
            {
                _red = value;
                RaisePropertyChanged("Red");
                RaiseColorChanged();
            }
        }
    }

    private byte _green = 0;
    public byte Green
    {
        get
        {
            return _green;
        }
        set
        {
            if(_green != value)
            {
                _green = value;
                RaisePropertyChanged("Green");
                RaiseColorChanged();
            }
        }
    }

    private byte _blue = 0;
    public byte Blue
    {
        get
        {
            return _blue;
        }
        set
        {
            if(_blue != value)
            {
                _blue = value;
                RaisePropertyChanged("Blue");
                RaiseColorChanged();
            }
        }
    }

    private Color _color;
    public Color Color
    {
        get
        {
            return _color;
        }
        set
        {
            RaiseColorChanged();
        }
    }

    private void RaiseColorChanged()
    {
        _color = Color.FromRgb(Red, Green, Blue);

        RaisePropertyChanged("Color");
    }
}

public class ObservableObject : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void RaisePropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class ColorToSolidBrushConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        Color color = (Color)value;

        return new SolidColorBrush(color);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }
}

View Code

使用RGBControl：

<Grid>
    <local:RGBControl Width="320" Height="120"/>
</Grid>

CustomControl

• 自定义控件，扩展自一个已经存在的控件，并添加新的功能/特性；
• 由C#/VB.NET Code和样式文件组成(Themes/Generic.xaml)；
• 支持样式/模板重写；
• 如果项目中自定义控件较多，建议创建一个WPF自定义控件库(WPF Control Library)

怎样创建一个WPF CustomControl呢？

以一个Numeric up/down控件为例：控件如下：

很直观的可以看到，Numeric up/down TextBox可以通过扩展WPF的TextBox控件实现，在WPF TextBox的基础上添加两个Button，然后重写这个自定义控件样式。

C# Code:

[TemplatePart(Name = UpButtonKey, Type = typeof(Button))]
[TemplatePart(Name = DownButtonKey, Type = typeof(Button))]
public class NumericTextBox : TextBox
{
    private const string UpButtonKey = "PART_UpButton";
    private const string DownButtonKey = "PART_DownButton";

    private Button _btnUp = null;
    private Button _btnDown = null;

    static NumericTextBox()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(NumericTextBox), 
            new FrameworkPropertyMetadata(typeof(NumericTextBox)));
    }

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        _btnUp = Template.FindName(UpButtonKey, this) as Button;
        _btnDown = Template.FindName(DownButtonKey, this) as Button;

        _btnUp.Click += delegate { Operate("+"); };
        _btnDown.Click += delegate { Operate("-"); };
    }

    private void Operate(string operation)
    {
        int input = 0;

        if(int.TryParse(this.Text, out input))
        {
            if (operation == "+")
            {
                this.Text = (input + 1).ToString();
            }
            else
            {
                this.Text = (input - 1).ToString();
            }
        }
    }
}

Style Code:

<Style TargetType="{x:Type local:NumericTextBox}">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="FontSize" Value="12" />
    <Setter Property="Height" Value="40" />
    
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:NumericTextBox}">
                <Border x:Name="OuterBorder" BorderBrush="LightGray" BorderThickness="1">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="30" />
                        </Grid.ColumnDefinitions>
                        <Border Grid.ColumnSpan="2" Grid.RowSpan="2" Background="White">
                            <ScrollViewer x:Name="PART_ContentHost" Margin="5,0" VerticalAlignment="Center" FontSize="12" />
                        </Border>
                        <Button x:Name="PART_UpButton" Grid.Column="1" Content="+" VerticalContentAlignment="Center" />
                        <Button x:Name="PART_DownButton" Grid.Row="1" Grid.Column="1" Content="-" VerticalContentAlignment="Center" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

使用：

<StackPanel>
    <custom:NumericTextBox Width="200" Text="1" />
</StackPanel>

感谢您的阅读~

参考文章：

https://wpftutorial.net/CustomVsUserControl.html

https://wpftutorial.net/HowToCreateACustomControl.html