备案控制台
开发者社区 开发与运维 文章 正文

[WPF] UserControl vs CustomControl

2018-11-12 1490
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:[WPF] UserControl vs CustomControl介绍 WPF中有两种控件：UserControl和CustomControl，但是这两者有什么区别呢？这篇博客中将介绍两者之间的区别，这样可以在项目中合理的使用它们。
原文: [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呢？

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

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

static NumericTextBox()
{
    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控件为例：控件如下：

很直观的可以看到，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

文章标签：
C#
C++
关键词：
wpf usercontrol
杰克.陈
目录
相关文章
杰克.陈
|
C#
WPF UserControl 的绑定事件、属性、附加属性
原文:WPF UserControl 的绑定事件、属性、附加属性 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Vblegend_2013/article/details/83477473 ...
杰克.陈
2076 0
余二五
|
.NET C# 开发框架
综合应用WPF/WCF/WF/LINQ之二十四：使用UserControl技术编写一个翻页控件
余二五
1289 0
幕三少
|
C#
Winform窗口里的嵌入WPF的UserControl,关闭Winform父窗体的方法
可以在form_load事件里把this传给UserControl，然后在usercontrol里调用form的各种方法，不过这种做法不太好，耦合性较高。标准做法是用事件传递 UserControl里加如下代码：  public delegate void FormCloseEve...
幕三少
1555 0
追逐时光者
|
1月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
追逐时光者
69 0
老码识途
|
5月前
|
C#
浅谈WPF之装饰器实现控件锚点
使用过visio的都知道，在绘制流程图时，当选择或鼠标移动到控件时，都会在控件的四周出现锚点，以便于修改大小，移动位置，或连接线等，那此功能是如何实现的呢？在WPF开发中，想要在控件四周实现锚点，可以通过装饰器来实现，今天通过一个简单的小例子，简述如何在WPF开发中，应用装饰器，仅供学习分享使用，如有不足之处，还请指正。
老码识途
66 1
Rick_1/2
|
9月前
|
C# Windows
WPF技术之图形系列Polygon控件
WPF Polygon是Windows Presentation Foundation (WPF)框架中的一个标记元素，用于绘制多边形形状。它可以通过设置多个点的坐标来定义多边形的形状，可以绘制任意复杂度的多边形。
Rick_1/2
485 0
Rick_1/2
|
9月前
|
C# Windows
WPF技术之RichTextBox控件
WPF RichTextBox是Windows Presentation Foundation (WPF)中提供的一个强大的文本编辑控件，它可以显示富文本格式的文本，支持多种文本处理操作。
Rick_1/2
358 0
老码识途
|
5月前
|
前端开发 C# 容器
浅谈WPF之控件拖拽与拖动
使用过office的visio软件画图的小伙伴都知道，画图软件分为两部分，左侧图形库，存放各种图标，右侧是一个画布，将左侧图形库的图标控件拖拽到右侧画布，就会生成一个新的控件，并且可以自由拖动。那如何在WPF程序中，实现类似的功能呢？今天就以一个简单的小例子，简述如何在WPF中实现控件的拖拽和拖动，仅供学习分享使用，如有不足之处，还请指正。
老码识途
116 2
Rick_1/2
|
9月前
|
数据挖掘 数据处理 C#
WPF技术之DataGrid控件
WPF DataGrid是一种可以显示和编辑数据的界面控件。它可以作为表格形式展示数据，支持添加、删除、修改、排序和分组操作。
Rick_1/2
189 0
追逐时光者
|
1月前
|
C# 开发者 C++
一套开源、强大且美观的WPF UI控件库
一套开源、强大且美观的WPF UI控件库
追逐时光者
142 0