一、WPF
WPF(Windows Presentation Foundation)中文译为:Windows 展现框架。是.NET3.0 开始出现的,简单理解
就是新一代的桌面应用程序开发框架。和 Windows 相比,具有华丽的外表不说,更重要的是对不同设备的
适应能力大大增强。让开发界面和后台实现,完全分离。因为 WPF 有专门的设计工具 Blend Visual Studio
和 Visual Studio 是一起发布的,Blend 是给专业美工设计准备的。
XAML(Extensible Application Markup Language)可扩展应用程序标记语言,它是一种声明性标记语言。专
门用来构建应用程序 UI 的。
专业 WPF 开发的做法是:软件 UI 设计团队使用 Blend 美化界面,开发人员使用 VS 设计基本的 UI。
二、 第一个 WPF 程序的创建:WpfApplication1
2.1 命名空间的概念
xaml 命名空间概念和 C#代码中的 using 是一样的道理。
创建一个 WPF 项目,默认 Window 窗体生成如下代码。
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
</Grid>
</Window>
这个文档包括两个元素:
顶级的 Window 元素和一个 Grid 元素,Window 元素代表整个窗口,在 Grid 元素中可以放置所有的空间。
WPF 的顶级元素只能有 3 种:Windows、Page、Application
x:Class=“WpfApplication1.MainWindow”
代表本类的类限定名,是命名空间+类名。也就是当前 xmal 对应的后台代码文件。
xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns 是 XML Namespaces 的缩写,代表 xml 命名空间。这个命名空间是默认的命名空间。
2.2 后台代码文件(MainWindow.xaml.cs):
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
可以看出和 Winform 原理相同,都是部分类,但是这个类继承自 Window,而不是 Form。
三、WPF基本布局
3.1 WPF 的 UI 布局
3.1 布局的原则
第一、如果做屏幕适应的程序,不要显示的设置元素(控件)的尺寸,一般可以设置最小和最大尺寸。
第二、不应使用屏幕坐标指定元素位置,元素的位置应该由它所在的容器决定。
第三、布局容器可以嵌套。
3.2 布局的主要容器
Grid 面板、StackPanel 面板、Canvas 面板、DockPanel 面板、WrapPanel 面板
3.3 Grid 面板
Grid 面板,可以想象成 一个 table,行列布局。
布局特点
第一、可以定义任意数量的行、列,并且轻松跨行、跨列。
第二、行、列高度或者宽度可以设置绝对值、相对比例、自动调整等方式。
适用场合
第一、UI 的大布局设计。
第二、UI 需要整体尺寸改变时。
代码
<Grid>
<Grid.RowDefinitions> <!--行,*代表比例-->
<RowDefinition Height="30*"/>
<RowDefinition Height="100*"/>
<RowDefinition Height="30*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions> <!--列-->
<ColumnDefinition Width="110*"/>
<ColumnDefinition Width="148*"/>
<ColumnDefinition Width="65*"/>
<ColumnDefinition Width="65*"/>
</Grid.ColumnDefinitions>
<Label x:Name="label" Content="请输入您的留言:" Height="25" Margin="5,2" Grid.Column="0" Grid.Row="0"/> <!--Grid.Column="0" Grid.Row="0" 第0行,0列-->
<ComboBox x:Name="cbbType" Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="3" Margin="5"/>
<TextBox x:Name="txtContent" Grid.ColumnSpan="4" Margin="5" Grid.Row="1" Grid.Column="0"/>
<Button x:Name="btnSubmit" Content="提交" Grid.Column="2" Grid.Row="2" Margin="5"/>
<Button x:Name="btnClear" Content="清除" Grid.Column="3" Grid.Row="2" Margin="5"/>
</Grid>
3.4 StackPanel 面板
【1】布局特点
第一、可以把内部元素在纵向或者横向上紧凑排列,形成栈式布局,通俗来说就是把元素堆到一块。 堆积
第二、当把前面的元素去掉后,后面的会整体向前移动,占领原有元素空间。
【2】适用场合
第一、同类型原型需要紧凑排列(比如制作菜单或者列表)
第二、移除其中的元素后能够自动补缺的布局,或者动画。
【3】三个属性
第一、Orientaion 属性:决定内部元素是横向还是纵向积累。
第二、HorizontalAlignment 属性:决定内部元素水平方上的对齐方式。
第三、VerticalAlignment 属性:决定内部元素垂直方向上的对齐方式。
<GroupBox Header="请选择您喜欢的课程名称" BorderBrush="Black" Margin="10">
<StackPanel Margin="5"> //默认垂直方向堆
<CheckBox Content="A.C#面向对象编程"/>
<CheckBox Content="B.WCF通信框架"/>
<CheckBox Content="C.WPF快速编程"/>
<CheckBox Content="D.ASP.NET-MVC"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Name="btnSubmit" Content="提交" Width="60" Margin="5"/>
<Button Name="btnReset" Content="重选" Width="60" Margin="5"/>
</StackPanel>
</StackPanel>
</GroupBox>
3.5 Canvas 面板(译文:画布)
【1】布局特点
第一、在面板内部,我们可以通过 x 和 y 的坐标属性,直接控制控件的位置,非常类似 winform 中的 top
和 left 定位。
第二、我们可以直接通过拖放的形式选择控件的位置。
【2】适用场合
第一、一经设计基本上不会有改动的小布局。
第二、需要使用绝对定位的布局。
第三、依赖于横纵坐标的动画。
<Grid>
<Canvas Margin="10">
<Label x:Name="label" Content="用户名:" Canvas.Left="26" Canvas.Top="30"/>
<TextBox x:Name="txtLoginId" VerticalContentAlignment="Center" Height="23" Canvas.Left="89" Canvas.Top="30" Width="146"/>
<Label x:Name="label1" Content="密码:" Canvas.Left="38" Canvas.Top="65"/>
<PasswordBox x:Name="txtLoginPwd" Height="23" Canvas.Left="89" Canvas.Top="67" Width="146"/>
<Button x:Name="btnLogin" Content="登录" Canvas.Left="89" Canvas.Top="105" Width="70"/>
<Button x:Name="btnExit" Content="关闭" Canvas.Left="165" Canvas.Top="105" Width="70"/>
</Canvas>
</Grid>
3.6 DockPanel 面板(停靠)
【1】布局特点
根据 Dock 属性值,元素向指定方向累积,切分 DockPanel 内部剩余空间,就像传播停靠一样。
【2】适用场合
需要自动填满剩余空间的布局。(最后一个元素自动填满 DockPanel 内的剩余空间)
适合布局导航栏,侧边栏。
<Grid>
<DockPanel>
<TextBox DockPanel.Dock="Top" Height="30" BorderBrush="Black" Text="111"/>
<TreeView DockPanel.Dock="Left" Width="100" BorderBrush="Black" >222</TreeView>
<ListView BorderBrush="Black">333</ListView>
</DockPanel>
</Grid>
3.7 WrapPanel 面板(流式布局,类似 web 中 div 的 float)
【1】布局特点
第一、在流延伸的方向上会排列尽可能多的控件,排列不下的控件会新起一行。
第二、使用 Orientaion 属性控制流延伸的方向。
【2】适用场合
需要根据容器大小动态排列控件的场合。
Title="WrapPanel面板" Height="186.8" Width="445.2" WindowStartupLocation="CenterScreen">
<Grid>
<WrapPanel>
<Button Content="1" Width="30" Height="30"/>
<Button Content="1" Width="30" Height="30"/>
<Button Content="1" Width="30" Height="30"/>
<Button Content="1" Width="30" Height="30"/>
<Button Content="1" Width="30" Height="30"/>
<Button Content="1" Width="30" Height="30"/>
<Button Content="1" Width="30" Height="30"/>
<Button Content="1" Width="30" Height="30"/>
<Button Content="1" Width="30" Height="30"/>
<Button Content="1" Width="30" Height="30"/>
<Button Content="1" Width="30" Height="30"/>
<Button Content="1" Width="30" Height="30"/>
<Button Content="1" Width="30" Height="30"/>
</WrapPanel>
</Grid>