思享工具箱

[WPF] UserControl vs CustomControl

摘要：
介绍WPF中有两种控件：UserControl和CustomControl，但是这两者有什么区别呢？这篇博客中将介绍两者之间的区别，这样可以在项目中合理的使用它们。UserControl将多个WPF控件进行组合成一个可复用的控件组；由XAML和CodeBehind代码组成；不支持样式/模板重写；继承自UserControl；下面创建的一个RGBControl由3个TextBlock，3个TextBox，1个Rectangle组成。我们可以在WPF的任意窗体/Page上面复用该UserControl。选择合适的控件基类，或者说选择合适的控件进行功能扩展UIElement最轻量级的基类，支持Layout,Input,Focus,EventFramew

介绍

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

UserControl

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

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

[WPF] UserControl vs CustomControl第1张

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 classRGBControl : UserControl
{
    publicRGBControl()
    {
        InitializeComponent();
        this.DataContext = newRGBViewModel();
    }
}
public classRGBViewModel : ObservableObject
{
    private byte _red = 0;
    public byteRed
    {
        get
        {
            return_red;
        }
        set
        {
            if(_red !=value)
            {
                _red =value;
                RaisePropertyChanged("Red");
                RaiseColorChanged();
            }
        }
    }
    private byte _green = 0;
    public byteGreen
    {
        get
        {
            return_green;
        }
        set
        {
            if(_green !=value)
            {
                _green =value;
                RaisePropertyChanged("Green");
                RaiseColorChanged();
            }
        }
    }
    private byte _blue = 0;
    public byteBlue
    {
        get
        {
            return_blue;
        }
        set
        {
            if(_blue !=value)
            {
                _blue =value;
                RaisePropertyChanged("Blue");
                RaiseColorChanged();
            }
        }
    }
    privateColor _color;
    publicColor Color
    {
        get
        {
            return_color;
        }
        set
        {
            RaiseColorChanged();
        }
    }
    private voidRaiseColorChanged()
    {
        _color =Color.FromRgb(Red, Green, Blue);
        RaisePropertyChanged("Color");
    }
}
public classObservableObject : INotifyPropertyChanged
{
    public eventPropertyChangedEventHandler PropertyChanged;
    protected virtual void RaisePropertyChanged(stringpropertyName)
    {
        PropertyChanged?.Invoke(this, newPropertyChangedEventArgs(propertyName));
    }
}
public classColorToSolidBrushConverter : IValueConverter
{
    public object Convert(object value, Type targetType, objectparameter, CultureInfo culture)
    {
        Color color =(Color)value;
        return newSolidColorBrush(color);
    }
    public object ConvertBack(object value, Type targetType, objectparameter, 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呢？

选择合适的控件基类，或者说选择合适的控件进行功能扩展

UIElement 最轻量级的基类，支持Layout, Input, Focus, Event

FrameworkElement 继承自UIElement，支持styling，tooltips，context menus，data binding，resouce look up

Control 最基础的控件，支持template, 并增加了一些额外属性，例如Foreground, Background, FontSize等

ContentControl 在Control的基础上增加了Content属性，常见的控件有，布局控件，Button等

HeaderedContentControl 在ContentControl基础增加了一个Header属性，常见的控件有：Expander，TabControl，GroupBox等

ItemsControl 一个具有Items集合的控件，用来展示数据，但是不包含 Selection 特性

Selector 是一个ItemsControl，增加了Indexed，Selected特性，典型的控件有: ListBox, ComboBox, ListView, TabControl等

RangeBase 典型的控件有Sliders, ProgressBars. 增加了Value，Minimum和Maximum属性

WPF的控件行为和表现是分离的。行为在Code中定义，Template在XAML中定义。

重写Default Style

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

重写默认样式文件

<Style TargetType="{x:Type local:NumericTextBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:NumericTextBox}">
                ...
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

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

[WPF] UserControl vs CustomControl第2张

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

C# Code:

[TemplatePart(Name = UpButtonKey, Type = typeof(Button))]
[TemplatePart(Name = DownButtonKey, Type = typeof(Button))]
public classNumericTextBox : TextBox
{
    private const string UpButtonKey = "PART_UpButton";
    private const string DownButtonKey = "PART_DownButton";
    private Button _btnUp = null;
    private Button _btnDown = null;
    staticNumericTextBox()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(NumericTextBox), 
            new FrameworkPropertyMetadata(typeof(NumericTextBox)));
    }
    public override voidOnApplyTemplate()
    {
        base.OnApplyTemplate();
        _btnUp = Template.FindName(UpButtonKey, this) asButton;
        _btnDown = Template.FindName(DownButtonKey, this) asButton;
        _btnUp.Click += delegate { Operate("+"); };
        _btnDown.Click += delegate { Operate("-"); };
    }
    private void Operate(stringoperation)
    {
        int input = 0;
        if(int.TryParse(this.Text, outinput))
        {
            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

标签：#wpf#green | 浏览：172 | 发布日期：

免责声明：文章转载自《[WPF] UserControl vs CustomControl》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇DELPHI 5种运行程序的方法具体应用实例(带参数)JS中获取焦点和选中的元素下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

WPF 多语言解决方案

1、首先安装Multilingual App Toolkit 2、新建项目，在VS中点击"工具" -> "Multilingual App Toolkit" -> "启用选定内容" 如果出现上述Issue, 打开项目AssemblyInfo.cs文件，加入如下代码片段，然后重复Step 2. [assembly: NeutralRes...

【WPF】1、 基本控件的简介

WPF一直都是断断续续的使用。偶尔用到一下。但是每次间隔比较长，需要重新学习，就写了这篇日志。以后有问题，看这个就可以了解各大概，然后针对细节再另外想办法。 微软的东西真心好，如果什么都不懂，可以直接用控件快速上手，如果有高级要求，可以调底层的库，自己实现。 默认可以看到的控件 1、Border 放到其他控件内部，给其他控件画边框，其他容器必须支持双标签。...

WPF 杂记

1，跨屏最大化 单屏幕的时候我们可以设置 WindowState 来使应用最大化 当接多个屏幕的时候，就需要下面这个设置： private void FullScreen() { this.WindowState = WindowState.Normal; this.Wi...

WPF: 在ListView中添加Checkbox列表

描述：ListView是WPF中动态绑定工具的数据容器，本文实现了一个在ListView中显示的供用户选择的列表项目，并且控制列表中选择的项目数量，即实现单选。 XAML中创建ListView，代码如下： <ListView x:Name="listView_LineOfBusiness" Width="280" Height="220">...

WPF之Binding

Bingding是什么 WPF中的Binding注重表达的是一种像桥梁一样的关系，它的两端分别是Binding的源（Source）和目标（Target）。数据从哪里来哪里就是源，Binding是架在中间的桥梁，Binding的目标是数据要往哪去儿。一般情况下，Binding源是逻辑层的对象，Binging的目标是UI层的控件对象。 Binding如何传递数...

wpf图片查看器，支持鼠标滚动缩放拖拽

最近项目需要，要用到一个图片查看器，类似于windows自带的图片查看器那样，鼠标滚动可以缩放，可以拖拽图片，于是就写了这个简单的图片查看器。 前台代码： <Window x:Class="PictureViewer.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/...

最新文章

随机推荐

思享工具箱导航