WPF学习感悟

四、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>

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等相对独立控件。

 

5.2 WPF的内容模型

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

5.3各类模型详解

5.3.1contentControl族

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

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

contentcontrol族包含的组件如下：

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"/>

5.3.3 ItemsControl

特点如下：

1、均派生自ItemsControl类；

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

3、内容属性为items或itemsSource；

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

5.3.4 HeaderedItemsControl族

特点如下：

1、均派生自HeaderedItemsControl类；

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

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

5.3.5 Decorator族

在UI上起装饰效果，ViewBox元素；特点如下：

1、均派生自Decorator；

2、起UI装饰作用；

3、内容属性为Child；

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

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元素将控制它们的布局。

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

5.4.4 Canvas

5.4.5DockPanel

5.4.6 WrapPanel