[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