控件与布局(WPF)

最新推荐文章于 2023-12-06 07:45:36 发布

kingwebo'sZone

最新推荐文章于 2023-12-06 07:45:36 发布

阅读量1.3k

点赞数

分类专栏：关于程序文章标签： wpf ui

原文链接：https://www.cnblogs.com/lnetmor/archive/2011/11/20/2256251.html

版权

关于程序专栏收录该内容

421 篇文章 11 订阅

订阅专栏

内容大概：
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的内容为一张图片
在这里插入图片描述

run:

image

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

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:

image

3）ItemsControl家族

特点：

1.都派生自ItemsControl。

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

3.内容属性为Items或ItemsSource。

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

ItemsControl家族包含控件有：

ItemsControl_Children

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

Li.Lin wpf /ListBox>

Run:

image

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

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

接着Coding：

程序中定义一个Employee类：

public class Emplayee
{
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
再定义一个Employee类型的集合：

List employeeList = new List()
{
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类。