WPF下的自定义控件以及Grid中控件的自适应

2016-10-17 08:15:35来源:CSDN作者:llmmll08人点击

本文主要总结使用C#及.NET在WPF框架下,自定义控件的绘制以及窗体中控件的自适应。

1. WPF下的自定义控件

WPF下,为快速地为应用定制一个零部件,需要的是UserControl, 为了让你打造的控件更标准化,更灵活以及更具有普遍意义,需要用到的CustomControl。要在WPF中自定义一个控件,使用UserControl与CustomControl都是不错的选择,他们的区别在于:

UserControl,其更像WinForm中自定义控件的开发风格,在开发上更简单快速,几乎可以简单地理解为:利用设计器来将多个已有控件作为子元素来拼凑成一个UserControl并修改其外观,然后后台逻辑代码直接访问这些子元素。其最大的弊端在于:其对模板样式等支持度不好,其重复使用的范围有限。

CustomControl,其开发出来的控件才真正具有WPF风格,其对模板样式有着很好的支持,这是因为打造CustomControl时做到了逻辑代码与外观相分离,即使换上一套完全不同的视觉树其同样能很好的工作,就像WPF内置的控件一样。

在使用Visual Studio打造控件时,UserControl与CustomControl的差别就更加明显,在项目中添加一个UserControl时,我们会发现设计器为我们添加了一个XAML文件以及一个对应的.CS文件(或.VB等),然后你就可以像设计普通窗体一样设计该UserControl;如果我们是在项目中添加一个CustomControl,情况却不是这样,设计器会为我们生成一个.CS文件(或.VB等),该文件用于编写控件的后台逻辑,而控件的外观却定义在了软件的应用主题(Theme)中了(如果你没有为软件定义通用主题,其会自动生成一个通用主题themes/generic.xaml,然后主题中会自动为你的控件生成一个Style),并将通用主题与该控件关联了起来。这也就是CustomControl对样式的支持度比UserControl好的原因。

这里为了简便起见,使用UserControl创建自定义控件。

1.1 新建UserControl

  1. 在当前项目中,选择”添加” -> “用户控件”,选择”用户控件(WPF)”,点击”添加”即可,如图所示:
    添加自定义控件

  2. 对该控件进行设计,拖入几个系统控件,并修改其参数即可。下图展示的是我使用Microsoft Blend设计对控件进行设计:
    使用Microsoft Blend设计控件

1.2 UserControl的基本代码

控件设计完毕后,右键单击控件编辑窗口,选择”查看代码”,或直接按”F7”键,即可编辑该控件类的源代码。我主要添加了该控件的初始化,改变控件的背景颜色,以及动态设定控件显示的值等代码功能,具体如下:

    /// <summary>    ///     _bitkyPoleControl.xaml 的交互逻辑    /// </summary>    public partial class BitkyPoleControl : UserControl    {        private readonly Color _colorBlue = Color.FromRgb(0, 255, 200);        //改变颜色        private readonly Color _colorRed = Color.FromRgb(255, 0, 0);        public BitkyPoleControl()        {            InitializeComponent();        }        public int _id { get; private set; } = -1;        /// <summary>        ///     根据参数初始化该控件        /// </summary>        /// <param>输入的参数</param>        public void setContent(int id)        {            Name = "bitkyPoleControl" + id;            labelPoleId.Content = id;            _id = id;        }        public void SetValue(int num)        {            labelNum.Content = num;        }        /// <summary>        ///     设置背景颜色,0:绿  1:红        /// </summary>        /// <param></param>        public void setColor(int i)        {            if (i == 0)                Background = new SolidColorBrush(_colorBlue);            if (i == 1)                Background = new SolidColorBrush(_colorRed);        }    }

2. Grid中控件的动态添加

2.1 主窗体中Grid的配置

我在主窗体中添加了一个Grid,并将该Grid平均分成了八行八列,如下图所示:

主窗体中的Grid

设置方法如下:如下图所示,通过Grid的属性设置,在”1”处,可添加ColumnDefinitions和RowDefinitions。在”2”处,可设置Grid中单元格的最小尺寸,在width处,有三个选项:”Auto”,”Pixel”,”Star”。

  • “Auto”:系统根据情况自动设定尺寸。
  • “Pixel”:设定为绝对尺寸,无法自适应。
  • “Star”:设置比重,各个行或列按照设定的比重分配Grid的空间。

在此,为了平均分配Grid的空间,且可根据窗口大小自适应,故将所有行和列的该项设定为”Star”,值设为”1”,即可出现上图的效果。

Grid的设置

2.2 Grid中动态添加控件

在主窗体类中使用如下代码即可在Grid中动态添加控件:

    /// <summary>    ///     初始化信息显示标签界面    /// </summary>    private void InitBitkyPoleShow()    {        var controls = new List<BitkyPoleControl>();        var id = 0;        for (var i = 0; i < 8; i++)        {            for (var j = 0; j < 8; j++)            {                var bitkyPoleControl = new BitkyPoleControl();                //在Grid中动态添加控件                GridPoleStatusShow.Children.Add(bitkyPoleControl);                //设定控件在Grid中的位置                Grid.SetRow(bitkyPoleControl, i);                Grid.SetColumn(bitkyPoleControl, j);                //将控件添加到集合中,方便下一步的使用                controls.Add(bitkyPoleControl);                //对控件使用自定义方法进行初始化                bitkyPoleControl.setContent(id);                id++;            }        }    }

运行程序,效果如下图所示:

Grid初步显示

观察图片可知,空间排布较为美观,如若想要子控件完全填充Grid中的单元格,需对子控件的属性进行配置。

3. Grid中子控件的动态自适应

3.1 对子控件的属性进行配置

对子控件的配置

如图所示,将控件的宽度和高度设为”Auto”,将HorizontalAlignment和VerticalAlignment设为”Stretch”,Margin设为合适的值,则此时,Grid中的子控件的即可动态自适应父控件。

子控件的动态自适应

参考资料

  1. 在WPF中自定义控件:概述
  2. 在WPF中自定义控件:CustomControl

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台