四、X:命名空间

1、Property和Attribute

如书中所说,attribute是语言层面的东西,是给编译器看的。property是面向对象层的东西,是给编程逻辑看的。、XAML标签中的attribute大部分对应着对象的property。

4.1Attribute

4.1.1 X:class 

这个attribute是告诉XAML编译器将XAML标签的编译结果与后台代码中指定类合并,使用要求:

 

  1. 这个attribute只能用于根节点;
  2. 使用X:class的根节点的类型与X:Class的值所指示的类型保持一致;
  3. X:Class的值所指示的类型在声明时必须使用partial关键字;

4.1.2 X:ClassModifer

这个attribute是告诉XAML编译器由标签编译生成的类具有怎样打访问控制级别。使用时注意:

 

  1. 标签必须具有X:Class attribute;
  2. X:ClassModifier的值必须与X:Class所指示的访问控制级别一致;
  3. X:ClassModifier的值随后台代码的编译语言不通而不同,参见TypeAttribute枚举类型;

4.1.3 X:Name

在C#中,集合索引器又称为“带参数的属性”

需要为对象准备一个引用变量以便在C#代码中直接访问就必须显式的告诉XAML编译器——为这个独享声明引用变量,这个时候就引用X:Name。

使用name和X:name效果在wpf中一致,只是如果没有name属性的元素为了成功创建访问代码只能用X:name。

4.1.4 X:FieldModifier

用于更改X:name的访问级别。

4.1.5 X:Key

为资源贴上检索的索引。

4.1.6 X:Shared

用于检索资源时确定对象是副本还是本身,和X:Key配合使用

4.2命名空间的标记扩展(Markup Extension)

4.2.1 X:Type

在编程中操作的是数据类型的实例或者实例的引用,X:Type的值是数据类型的名称。

“类” 这个名词而言,它具有双重身份:逻辑层面上类是现实世界对象经过抽象和封装后的结果;在变成层面上,我们会使用这个类去创建对象和引用。当我们以一个类去创建对象的时候,编译器会以这个类为蓝本、按照累的成员的多寡在内存中开辟出相应大小的一块内存,并用程序员指定的构造器刷新(初始化)这块内存,这时候,类所充当的角色就是对象的“模具”,它创建的对象在型号和内部布局上完全一样。这个层面上我们把类称作数据类型(Type)。

4.2.2 X:Null

显式的对要给属性赋空值,C#中使用null关键字表示空值,XAML用来表示空值的是X:Null。

<Window 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Rubber_Sucker_Assemble.Form"
mc:Ignorable="d"
Title="WindowDemo" Height="450" Width="800">

<Window.Resources>
<Style x:Key="{x:Type Button}" TargetType="{x:Type Button}">
<Setter Property="Width" Value="60" />
<Setter Property="Height" Value="36"></Setter>
<Setter Property="Margin" Value="5"></Setter>
</Style>
</Window.Resources>

<Grid>


<Button HorizontalAlignment="Left" Margin="545,215,0,0" VerticalAlignment="Top" Width="75">
<Button Content="Button" Width="75" Height="50" Click="Button_Click"/>
</Button>


<StackPanel Background="LightBlue">
<TextBox Height="23" Name="textBox" Width="200" HorizontalAlignment="Left" Margin="15"/>
<TextBox Height="23" Name="textBox2" Width="200" HorizontalAlignment="Left" Margin="15"/>
<TextBox Height="23" Name="textBox3" Width="200" HorizontalAlignment="Left" Margin="15"/>

<TextBox Height="23" Name="textBox1" Width="200" Margin="20"/>
<Slider Height="23" Name="slider1" Width="219" Maximum="100" />
<Button Content="Button" Margin="0" Width="Auto" d:LayoutOverrides="Height"/>
<Button Content="Button" Margin="0" Width="Auto" d:LayoutOverrides="Height"/>
<Button Content="Button" Margin="0" Width="Auto" d:LayoutOverrides="Height"/>
<Button Style="{x:Null}" Content="Button" Margin="0" Width="Auto" d:LayoutOverrides="Height"/>

</StackPanel>
<StackPanel HorizontalAlignment="Left" Height="100" Margin="97,251,0,0" VerticalAlignment="Top" Width="100"/>


</Grid>

<!--<Grid>
<TextBox HorizontalAlignment="Left" Name="textBox1" Height="23" Margin="40,110,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="240"/>
<TextBox HorizontalAlignment="Left" Name="textBox2" Height="23" Margin="40,190,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="240"/>
<TextBox HorizontalAlignment="Left" Name="textBox3" Height="23" Margin="40,270,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="240"/>

<StackPanel Width="409" Height="331" Background="LightBlue">
<ListView Height="302" x:Name="listView1" Width="396" Margin="6,0,7,0">
<ListView.View>
<GridView>
<GridViewColumn Header="ID" DisplayMemberBinding="{Binding XPath=@id}" Width="80"/>
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding XPath=Name}" Width="150"/>
</GridView>
</ListView.View>
</ListView>
</StackPanel>

</Grid>-->
</Window>

WPF学习感悟_WPF学习

4.2.3 X:Array

X:Array的作用是通过它的items属性向使用者暴露一个类型已知的ArrayList实例,ArrayList内成员的类型由X:Array的Type指明,下面是将X:Array当做数据源向ListBox提供数据。

<ListBox x:Name="listBox" ItemsSource="{x:Array Type=sys:String}" HorizontalAlignment="Left" Height="100" Margin="0,251,0,0" VerticalAlignment="Top" Width="792"/>

 

<!--<ListBox Width="100" Height="100">
<ListBox.ItemsSource>
<x:Array Type="sys:String">
<sys:String>Tim</sys:String>
<sys:String>Tom</sys:String>
<sys:String>Victor</sys:String>
</x:Array>
</ListBox.ItemsSource>
</ListBox>-->

4.2.5X:Static

功能是在XAML文档中使用数据类型的static成员,因为XAML不能写。逻辑代码,所以X:Stati用来访问static成员一定是数据类型的属性或文档。

4.3 XAML指令元素

4.3.1X:Data

<XmlDataProvider x:Key="TextBox1" XPath="">
<x:XData>
<SuperMarket xmls="">
<fruits>
<Fruit Name="Peach"></Fruit>
<Fruit Name="Banana"></Fruit>
<Fruit Name="Orange"></Fruit>
</fruits>
<drinks>
<drink Name="Coca Cola"></drink>
<drink Name="PEPSI "></drink>
</drinks>
</SuperMarket>
</x:XData>
</XmlDataProvider>
</Window.Resources>

 

五 控件与布局

WPF把那些能够展示数据、响应用户操作的UI元素称为控件。

控件所显示的数据,称为“数据内容”。控件分为:

 

  1. 布局控件:可以容纳多个控件或者嵌套多个其他控件,用于在UI上进行显示布局的控件:Grid、StackPanel、DockPanel,拥有共同父类panel;
  2. 内容控件:只能容纳一个其他控件或控件布局内容作为其内容,Window、Button属于此类;拥有共同父类ContentPanel;
  3. 带标题内容控件:相当于内容控件,但是可以添加一个Header,标题部分亦可容纳一个标题或控件。GroupBox、TabItem,共同父类HeaderedContentControl;
  4. 条目控件:显示一列数据,ListBox、ComboBox.共同父类ItemsControl,显示数据集合功能强大;
  5. 带标题条目控件:相当于一个条目控件加标题,TreeViewItem、MenuItem都属于此类,共同父类HeaderItemControl;
  6. 特殊内容控件;TextBox、TextBlock、Iamge等相对独立控件。

 

WPF学习感悟_WPF学习_02

5.2 WPF的内容模型

WPF学习感悟_控件_03

控件的嵌套被称为子集控件,不考虑内部组成结构,只考虑由控件组成的树那么这棵树被称为逻辑树(Logical Tree)。加上内容后被称为可视元素树(Visual Tree)

5.3各类模型详解

5.3.1contentControl族

特点:均派生自contentcontrol类、它们都是控件、内容属性的名称为content、只能由单一元素充当内容;

Button控件属于这一族,不能既包含文字又包含图片。

WPF学习感悟_UI_04

contentcontrol族包含的组件如下:

WPF学习感悟_控件_05

5.3.2 HeaderedContentControl族

特点如下:

1、都派生自HeaderContentControl类,其派生自ContentControl类;

2、它们都是控件,用于显示带标题的数据;

3、除了用于显示主内容的区域外,控件还具有显示标题的区域;

4、内容属性为content或control;

5、无论是content还是header都只是只能容纳一个元素作为其内容。

<GroupBox HorizontalAlignment="Left" Height="69" Margin="368,141,0,0" VerticalAlignment="Top" Width="214">
<GroupBox.Header>
<Image HorizontalAlignment="Left" Source="pack://application:,,,/Reference/Icon/PNG/机器人_3.png" Height="35" VerticalAlignment="Top" Width="41"/>
</GroupBox.Header>

</GroupBox>
<TextBox Text="Hello ThreeS" HorizontalAlignment="Left" Height="45" Margin="368,238,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="214"/>

WPF学习感悟_WPF学习_06

5.3.3 ItemsControl

特点如下:

1、均派生自ItemsControl类;

2、它们都是控件、用于显示列表化的数据;

3、内容属性为items或itemsSource;

4、每种ItemsControl都对应有自己的条目容器(Item  Contain)

WPF学习感悟_控件_07

WPF学习感悟_XAML_08

5.3.4 HeaderedItemsControl族

特点如下:

1、均派生自HeaderedItemsControl类;

2、它们都是控件,用于显示列表化的数据,同时可以显示一个标题;

3、内容属性为Items、ItemsSource和header;

5.3.5 Decorator族

在UI上起装饰效果,ViewBox元素;特点如下:

1、均派生自Decorator;

2、起UI装饰作用;

3、内容属性为Child;

4、只能单一元素充当内容。

WPF学习感悟_控件_09

5.3.6  TextBox和TextBlock

TextBlock只能显示文本,不能编辑,称为静态文本,可以使用印刷级的格式控制标记。

TextBox允许用户编辑简单的文本。

5.3.7 shape族

用于在UI进行绘图的元素,特点如下:

1、均派生自shape类;

2、用于2D图形绘制;

3、无内容属性;

4、使用Fill属性设置填充,使用stroke属性设置边线。

5.3.8 panel元素

所以UI元素均属于这一族,特点如下:

1、均派生自Panel抽象类;

2、主要内容是控制UI布局;

3、内容属性为child;

4、内容可以是多个元素,panel元素将控制它们的布局。

WPF学习感悟_XAML_10

5.4 UI布局(Layout)

5.4.1 布局元素

 

  • Grid:网格。可以自定义行列,通过设置数量、行高、列宽来调整控件的布局,近似与HTML中的table;
  • Stack Panel:栈式面板,可以将包含的元素在竖直或者水平方向上排成一条直线,当移除一个元素后,后面的元素会自动向前移动;
  • Canvas:画布,内部元素可以使用以像素为单位的绝对坐标进行定位,类似Winform编程。
  • DockPanel:靠泊式画板,内部元素可以进行选择靠泊,类似Winform中Dock用法;
  • WrapPanel:自动折行面板,内部元素在拍满一行后能够自行换行,类似网页Flex布局。

 

 

5.4.2 Grid

5.4.3 StackPanel

WPF学习感悟_WPF学习_11

5.4.4 Canvas

5.4.5DockPanel

5.4.6 WrapPanel