首先我们还是新建一个空项目,看一下VS给我们默认生成的xaml结构。 <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> 然后我们来对比一下webform中的page默认生成页面 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www./1999/xhtml"> 5 <head runat="server"> 6 <title></title> 7 </head> 8 <body> 9 <form id="form1" runat="server"> 10 <div> 11 </div> 12 </form> 13 </body> 14 </html>
我们发现xaml很像xml结构,是的,它是一种遵循xml规范的界面描述语言。
一:xaml简述 首先我默认大家都是熟悉webform的开发者。 1:x:Class 这个标记在webform中有对应的标记吗?有的,也就是这里的CodeBehind。 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> 2:xmlns 这个在webform中也有对应标记吗?首先我们要知道xmlns是干嘛的?哦,导入命名空间用的,那我们马上就想到webform中的对应标记import。 <%@ Import Namespace="System.IO" %> 那么下一个问题就是两者有什么不同吗?我们知道webform中导入命名空间需要一个一个的导入,4个命名空间就要写4个import,而xaml可以做到多 个命名空间做为一个导入。 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 其实也就导入了如下4个wpf开发必备的dll,这个命名空间也是xaml中默认的命名空间。
3:xmlns:x 如果我们需要导入一些自定义的命名空间,那么我们就需要加上用“: + 自定义名称”的形式,这里微软导入了一个自定义的命名空间。 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 下面我们也来导入一个命名空间,实际开发中我们当然我们不会做成url的形式,这里我就取名为sys前缀 <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System.IO;assembly=mscorlib" Title="MainWindow" Height="350" Width="525"> <Grid> </Grid> </Window> 4:Grid 我们都知道在n年前的html网页布局中都采用table的形式,table嵌套table,table跨行跨列等手段构建了漂亮的网页,这种排版思路也应用到了wpf中。 <1>:划分位置 我们画个两行两列的界面布局,这里我们只要将”鼠标“放在”红色方框“中,就会出现小三角,我们点击就可生成一个分割线,红色小圈圈标记着“行列” 的分割比列。 然后我们看一下生成的代码 <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System.IO;assembly=mscorlib" Title="MainWindow" Height="350" Width="525"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="161*" /> <RowDefinition Height="150*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="225*" /> <ColumnDefinition Width="278*" /> </Grid.ColumnDefinitions> </Grid> </Window> 我们奇怪的发现为什么宽度有“*”号,这里要解释一下wpf中对“宽高度”的设置有三个形式。 ①:绝对尺寸 <RowDefinition Height="161" /> ②:自动尺寸 <RowDefinition Height="auto" /> ③:按比例尺寸 <RowDefinition Height="161*" />
那我们就有疑问了,到底161* 是多少呢?计算规则如下: 我们这里的窗体Height=350。 第一行高度为: 350/(161+150)*161 第二行高度为:350(161+150)*150
<2>: UI元素布局 ①:UI元素对号入座 很简单,我们只要在button的Grid属性上设置button应该放在哪一个单元格即可。 ②:UI元素跨行跨列
二:xaml中扩展标记 扩展标记分为两种:wpf级别和xaml级别。 <1> wpf级别扩展标记 ①: StaticResource 用于获取资源的值,值获取在xaml编译的时候完成,什么意思呢?先举个例子。 首先,我们发现有一个window.Resources,这东西我们可以认为是在MainWindow类中定义的全局变量,这里我就定义个name=“一线码农”的 变量,那么textblock获取变量的方式就可以通过StaticResource。
②:DynamicResource 跟StaticResource唯一不同的是,它是在运行时获取的,如果大家知道C#里面的dynamic关键字,我想就不用解释了,上代码。
③:Binding 还是在webform中找一下关键字吧,相当于webform中的Eval,上代码说话。 1 <Window x:Class="WpfApplication1.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:sys="clr-namespace:System;assembly=mscorlib" 5 Title="MainWindow" Height="350" Width="525"> 6 <Grid> 7 <TextBox Height="23" Margin="87,75,0,0" Name="textBox1" Width="120" /> 8 <TextBox Height="23" Margin="87,126,0,0" Name="textBox2" Width="120" 9 Text="{Binding ElementName=textBox1, Path=Text}" /> 10 </Grid> 11 </Window> 这里我把textbox2的text绑定到了textbox1的text上,最后的效果就是我在textbox1上输入,textbox2也会相应的变化,很有意思。 ④:TemplateBinding 这个被称为模板绑定,可以把对象的属性和模板的属性绑定起来,详细的介绍放在后续文章中。
<2>xaml级别扩展标记 ① x:Type 将模板或者样式指定在哪一种对象上时需要用type指定。 1 <Window x:Class="WpfApplication1.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:sys="clr-namespace:System;assembly=mscorlib" 5 Title="MainWindow" Height="350" Width="525"> 6 <Window.Resources> 7 <Style TargetType="{x:Type TextBox}"> 8 <Setter Property="Background" Value="Red"/> 9 </Style> 10 </Window.Resources> 11 <Grid> 12 <TextBox Height="23" 13 Margin="87,75,0,0" Name="textBox1" Width="120" /> 14 </Grid> 15 </Window> 如这里我定义的css样式,将background=red指定到textbox控件上。 ②:x:Static 主要用于在xaml中获取某个对象的静态值,上代码说话。 namespace WpfApplication1 { /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public partial class MainWindow : Window { public static string name = "一线码农"; public MainWindow() { InitializeComponent(); } } } xaml代码: <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfApplication1" Title="MainWindow" Height="350" Width="525"> <Grid> <TextBox Height="23" Text="{x:Static local:MainWindow.name}" Margin="87,75,0,0" Name="textBox1" Width="120" /> </Grid> </Window> 最后效果:
③:x:null 这个就比较简单了,xaml中某某控件设为null就靠它了。 1 <Grid> 2 <TextBox Height="23" Text="{x:Null}" 3 Margin="87,75,0,0" Name="textBox1" Width="120" /> 4 </Grid>
④:x:Array 这个主要就是在xaml中创建数组,还是举个例子。 |
|