代码改变世界

控件与布局(WPF)

2011-11-20 16:24  木木子  阅读(6948)  评论(5)  编辑  收藏  举报

这是本人对于学习WPF的笔记。

参考资料：《深入浅出WPF》、MSDN、some Blogs…

 

内容大概：

1）6类控件介绍及派生关系

2）WPF的UI元素类型介绍

3）内容模式的详解

4）UI布局简介

 

控件

控件无外乎6类：

1）布局控件：Grid、StackPanel、DockPanel等等这些可以容纳其他控件或者说是嵌套其他控件，主要用于UI上的组织和排列。共同的父类是Panel。

2）内容控件：Window、Button等属于这类，只能容纳一个控件作为其内容。共同父类ContentPanel。

3）带标题内容控件：顾名思义，比内容控件多个标题。典型代表：GroupBox、TabItem….共同父类HeaderedContent。

4）条目控件：ListBox、ComboBox等，可以显示一列数据。共同父类ItemsControl。

5）带标题条目控件：比条目控件多个Header。TreeVievItem、MenuItem等典型代表。基类为HeaderedItemsControl。

6）特殊内容控件：这类控件相对是独立的。有TextBox、TextBlock等等

派生关系：

继承关系

 

WPF的UI元素的类型

WPF的UI类型

 

各类内容模型详解

1)ContentControl家族

特点：

1.基类均为ContentControl

2.都是控件[Control]

3.内容属性名称为Content

4.只能由单一元素充当其内容

重点理解“只能由单一元素充当其内容”。最好的解释莫过于用Coding了。

以Button为例：第一个Button的内容为一个静态文本，第二个button的内容为一张图片

<Button Margin="5">
       <TextBlock Text="Hello Li.Lin"></TextBlock>
</Button>
<Button Grid.Row="1" Margin="5">
       <Image Source="img.jpg" Width="60" Height="60"></Image>
 </Button>

 

run:

image

假如你想在同一个Button中既显示TextBlock又要显示image:

<Button Margin="5">
      <TextBlock Text="Hello Li.Lin"></TextBlock>
      <Image Source="img.jpg" Width="60" Height="60"></Image>
</Button>

 

error:报错说[属性“Content”已设置多次]。

error

ContentControl家族的控件有：

ContentControl_Children

 

2）HeaderedContentControl家族

 

特点：

1.都派生自HeaderedContentControl，HeaderedContentControl派生自ContenControl。

2.用于显示带标题的数据。

3.除了显示主题内容的区域外，还有一个显示Header的区域。

4.内容属性分为Content和Header。

5.无论是Content还是Header都只能容纳一个元素作为其内容。

 

包含的控件有：Expander、GroupBox、headeredContentControl、TabItem。

 

做个GroupBox的Coding:

<GroupBox Margin="10" BorderBrush="SlateBlue">
    <GroupBox.Header>
        <Image Source="img.jpg" Width="20" Height="20"></Image>
    </GroupBox.Header>
    <GroupBox.Content>
        <TextBlock TextWrapping="WrapWithOverflow" Margin="10" Text="Li.Lin is a programer learning wpf..."></TextBlock>
    </GroupBox.Content>
</GroupBox>

Run:

image

 

3）ItemsControl家族

特点：

1.都派生自ItemsControl。

2.都是控件，用于显示列表化数据。

3.内容属性为Items或ItemsSource。

4.每种ItemsControl都对应有自己的条目容器(Item Container)。

 

ItemsControl家族包含控件有：

ItemsControl_Children

 

ListBox是ItemsControl的典型代表，下面以它为例：

<ListBox Margin="5">
   <ListBoxItem>
       Li.Lin
   </ListBoxItem>
   wpf
   <ListBoxItem>
       <CheckBox x:Name="checkBoxName" Content="LiLin"></CheckBox>
   </ListBoxItem>
   <ListBoxItem>
       <Button x:Name="BtnWpf" Content="WPF"></Button>
   </ListBoxItem>
/ListBox>

 

Run:

image

注意！其中的 wpf 没有包含在<ListBoxItem>…</ListBoxItem>中，是因为这对标签是可以省略的。也就是说，无论你把什么数据或数据集合丢给ListBox，它都会以<ListBoxItem>…</ListBoxItem>包装，因此我们完全可以不写。

不过，大多数情况下，ListBox是用来动态显示后台的数据，而非控件。

接着Coding：

程序中定义一个Employee类：

public class Emplayee
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}

再定义一个Employee类型的集合：

List<Emplayee> employeeList = new List<Emplayee>()
{
    new Emplayee(){Id=1,Name="LiLin",Age=23},
    new Emplayee(){Id=2,Name="Tom",Age=26},
    new Emplayee(){Id=3,Name="Guo",Age=29},
    new Emplayee(){Id=4,Name="Yan",Age=20},
    new Emplayee(){Id=5,Name="Tom",Age=30},
};

在程序的主界面上定义一个名为listBoxEmployee的ListBox。接下来我们写：

this.listBoxEmployee.DisplayMemberPath = "Name";
this.listBoxEmployee.SelectedValuePath = "Id";
this.listBoxEmployee.ItemsSource = employeeList;

 

Run:

image

DisplayMemberPath这个属性的value是只ListBox显示数据的属性。也就是说，ListBox会去调用这个属相的ToString()方法，把得到的字符串放入一个TextBlock(文本控件)，then再Textblock放入ListBoxItem中。这是简单的显示，需要复杂的显示就需要用到DataTemplate。

SelectedValuePath属性与SelectValue属性配合使用。

以下列出ItemsControl对应的Item Container：

Item Container

 

HeaderedItemsControl家族

该家族控件除了具有ItemsControl的特性外，还具有显示Header 的能力。

特点：

1.均派生自HeaderedItemsControl类。

2.都是控件，用于显示列表化数据，同事显示一个标题。

3.内容属性有：Items、ItemsSource、Header。

本家族控件有MenuItem、TreeViewItem、ToolBar。

Decorator家族

该家族在UI上期装饰效果。如Border元素把一些内容加边框；在ViewBox元素里的内容可以自由缩放。

特点：

1.均派生自Decorator类。

2.起UI装饰作用。

3.内容属性为Child。

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

家族元素：

Decorator

TextBox和TextBlock

这两个都是用来显示文本。区别是TextBlock只能显示不能编辑；TextBox允许编辑文本。除了这个区别，它们的内容属性也不一样。TextBlock由于需要操纵格式，其内容属性为InLines(行)，同时保留Text属性。而TextBox得内容属性为Text。

Sharp家族

Sharp家族元素是视觉元素，而非控件，内容自己的内容。不过可以用Fill属性填充效果，Stroke属性设置边线。

特点：

1.均派生自Sharp。

2.用于2D图形绘制。

3.无内容属性。

4.使用Fill属性设置填充，使用Stroke属性设置边线。

Panel家族

这是一个用于UI布局的家族。该家族特点:

1.均派生自Panel抽象类。

2.控制UI布局。

3.内容属性为Children。

4.内容可以为多个元素，并控制它们的布局。

本家族元素：

Panel

UI布局(Layout)简介

WPF是专门的用户界面技术，因此布局功能是它的核心功能之一。在WPF的布局元素中，既有像传统的Windows Form和APS.NET的绝对坐标定位元素，也有像HTML页面那样用行列定位的。

WPF多了一个Content的概念——包含。以窗体为根，整个WPF的UI形成树形结构，叫做可视化树。

WPF的布局元素属于Pane家族。

WPF中的布局元素：

1.Grid：网格。类似HTML中的Table。

2.StackPanel：栈式面板。竖直或水平排成一条直线。

3.Canvas：画布。绝对坐标定位，类似于Windows Form的布局。

4.DockPanel：泊靠式面板。

5.WrapPanel：自动折行面板。排满一行自动折行，类似HTML中的流式布局。

 

BTW

鄙人初涉WPF，望多多指导。