WPF中的UI布局、基本控件与WPF的5种绑定模式

本文详细介绍了WPF中的三种主要布局元素:Grid、DockPanel和StackPanel。Grid提供了灵活的网格布局,适用于复杂的UI设计;DockPanel支持元素沿指定方向停靠,适合于边缘布局;StackPanel则将元素按行或列顺序排列,适用于紧凑排列场景。此外,文章还提及了其他布局元素如WrapPanel和UniformGrid的特点和应用场景。
摘要由CSDN通过智能技术生成

一、UI布局
XAML布局元素(常用的-重点)
Grid:网格。可以自定义行和列并通过行列的数量、行高列宽来调整控件的布局。近似Html中的table。
DockPanel:泊靠式面板。内部元素可以选择泊靠的方向(上下左右),类似于Winform中设置控件的Dock属性。
StackPanel:栈式面板。可将包含的元素在水平或垂直方向排成一条线,当移除一个元素后,后面的元素会自动向前填充空缺。(菜单栏)
WrapPanel:自动折行面板(环绕面板)。内部元素在排满一行后能够自动折行,类似于Html中的流式布局。
UniformGrid:均分布局(横向的网格分割、纵向的网格分割分别是均等的分割的布局类型,各个单元格的大小完全相同,宽与高分别
相同)
Canvas:画布。内部元素可以使用以像素为单位的绝对坐标进行定位,类似于Windows Form 的布局方式。
1、Grid:网格
Grid顾名思义就是“网格”,它的子控件被放在一个一个实现定义好的小格子里面,整齐配列。Grid和其他各个Panel比较起来,功能最多也最为复杂。
要使用Grid,首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和 ColumnDefinitions元素,从而定义行数
和列数。
而放置在Grid面板中的控件元素都必须显示采用附加属性语法定义其放置所在的行和列,它们都是以0为基准的整型值,如果没有显式设置
任何行或列,Grid将会隐式地将控件加入在第0行第0列。
由于Grid的组成并非简单的添加属性标记来区分行列,这也使得用户在实际应用中可以具体到某一单 元格中,所以布局起来就很精细了。
特点:
·可以定义任意数量的行和列,非常灵活。
·行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式进行精确设定,并可以设置最大和最小值。
·内部元素可以设置自己所在的行和列Grid.Row和Grid.Column,还可以设置自己纵向跨几行Grid.RowSpan,横向跨几列Grid.ColumnSpan。
·可以设置Children元素的对齐方向:水平HorizontalAlignment,垂直VerticalAlignment。
基于以上这些特点,Grid的适用场合有:
·UI布局的大框架设计。
·大量UI元素需要成行或者成列对齐的情况。
·UI尺寸改变的时候,元素需要保留固有的宽度和高度比列。
Grid的常用属性
①、Grid.Column
·读取或设定指定FrameworkElement的附加属性Grid.Column的值
②、Drid。ColumnSpan
·读取或设定指定FrameworkElement的附加属性Grid.ColumnSpan的值
③、Grid.Row
·读取或设定指定FrameworkElement的附加属性Grid.Row的值
④、Grid.RowSpan
·读取或设定指定FrameworkElement的附加属性Grid.RowSpan的值
注意:这里介绍一下Grid高度、宽度的几种定义方式:
①、绝对尺寸:就是给出一个实际的数字,但通常将此值指定为整数
②、自动(Autosizing):值为Auto,实际作用是取实际控件所需的最小值
③、StarSizing:值为或N,实际作用就是取尽可能大的值,当某一列或行被定义为则是尽可能大,当出现多列或行被定义为则是代表几者之间按照比例来设置尺寸
解释:
①,固定长度——宽度不够,会裁剪,不好用。单位pixel。
②,自动长度——自动匹配列中最长元素的宽度。
③,比例长度——表示占用剩余的全部宽度;两行都是,将平分剩余宽度;假如一个2和一个,表示前者2/3宽度。

要明白在Grid中,之定义行和列的个数还远远不够的,

ModernUI(http://mui.codeplex.com/)是一个开源的WPF界面库,利用该界面库,我们可以创建很酷的应用程序。下面是ModernUI官方示例,你可以从官方网站直接下载源码运行,如果是.NET 4.0的话,记得要声明“NET4”预编译变量,否则无法编译通过。 这个界面框架是基于ModernUI来实现的,在该文我将分享所有的源码,并详细描述如何基于ModernUI来构造一个非常通用的、插件化的WPF开发框架。下载源码的同志,希望点击一下推荐。 本文将按照以下四点来介绍: (1)ModernUI简介; (2)构建通用界面框架的思路; (3)基于ModernUI和OSGi.NET的插件化界面框架实现原理及源码分析; (4)其它更有趣的东西~~。 要编写这样的WPF界面,我们需要在一个Window上声明菜单和Tab页面,下图是定义菜单的声明。 此外,每一个Tab风格页面,你也需要手动的为菜单创建这样的界面元素。 直接用这样的方式来使用ModernUI,显然不太适合团队协作性的并行开发,因为在一个团队的协作,不同的人需要完成不同的功能,实现不同页面,每个人都需要来更改主界面。 我非常希望模块化的开发方法,因为这可以尽可能的复用现有资产,使程序员可以聚焦在自己关注的业务逻辑上,不需要关心UI的使用。下面,我将来描述基于ModernUI实现的一个通用界面框架,这个界面框架允许程序员在自己的业务模块配置需要显示的界面元素。 通用界面框架实现思路: 我希望能够实现这样的通用界面框架: (1)程序员可以直接实现需要展现业务逻辑的界面,不需要关注如何使用ModernUI; (2)程序员可以通过简单的配置就可以将自己实现的业务逻辑页面显示在主界面; (3)这个界面框架可以完全复用。 当我看到ModernUI这个界面库时,我希望将应用程序做成模块化,每一个模块能够: (1)通过以下配置能够直接显示二级菜单。 (2)通过以下配置能够直接显示三级菜单。 这样做的好处是,开发插件的时候可以不需要关心界面框架插件;团队在协作开发应用的时候,可以独立开发并不需要修改主界面;团队成员的插件可以随时集成到这个主界面;当主界面无法满足我们的布局时或者用户需求无法满足时,可以直接替换主界面框架而不需要修改任何插件代码。 最终的效果如下,以下界面的几个菜单及点击菜单显示的内容由DemoPlugin插件、DemoPlugin2插件来提供。当插件框架加载更多插件时,界面上会出现更多的菜单;反之,当插件被卸载或者被停止时,则相应的菜单将消失掉。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值