当前位置:文档之家› WPF中控件和布局

WPF中控件和布局

WPF控件和布局,根据刘铁猛《深入浅出WPF》书籍讲解内容,主要记录控件和布局的原理,如果有不足的地方,请大牛们键盘下留情--轻喷!如果还算有用,请给点动力,支持一把!一、WPF里的控件1.1 控件的实质我们先从UI上分析,UI的功能是让用户观察和操作数据,为了能显示数据和响应用户的操作通知程序(通过事件来通知,如何处理事件又是一系列的算法),所以控件就是显示数据和响应用户操作的UI元素,也即:控件就是数据和行为的载体。

1.2 WPF中的一个重要概念--数据驱动UI什么是数据驱动UI呢?我们知道传统的GUI界面都是由windows消息通过事件传递给程序,程序根据不同的操作来表达出不同的数据体现在UI界面上,这样数据在某种程度上来说,受到很大的限制。

WPF中是数据驱动UI,数据是核心,处于主动的,UI从属于数据并表达数据,是被动的。

因为以后的章节会重点介绍,在此不做过多的说明,只要记着,WPF数据第一,控件第二。

1.3 WPF中控件的知多少虽然控件没有数据重要,但是还是比较重要的,毕竟是门面啊,只是在数据面前,它比较"有礼貌"。

控件有很多,但是如果仔细去分析,也是有规律可循的,根据其作用,我们可以把控件分为6类:•布局控件:是可以容纳多个控件或者嵌套其他布局的控件,用于在UI上组织和排列控件。

其父类为Panel。

•内容控件:只能容纳一个控件或者布局控件作为他的内容。

所以经常借助布局控件来规划其内容。

其父类为ContentControl。

•带标题内容控件:相当于一个内容控件,但是可以加一个标题,标题部分也可以容纳一个控件或者布局,其父类为HeaderedContentControl。

•条目控件:可以显示一列数据,一般情况下,是数据的类型是相同的。

其共同的基类为ItemsControl。

•带标题的条目控件:和上面的带标题内容控件类同,其基类为HeaderdeItemsControl。

•特殊内容控件:这类控件比较独立,但也比较常用,如TextBox,TextBlock,Image等(由于其常用性和相对比较简单,本篇笔记不做说明)。

上面的控件的派生关系如图1:图1二、各类控件模型详解2.1 WPF中的内容模型为了理解各个控件的模型,还是先了解一下WPF中的内容模型。

在上述各类控件里,至少可以容纳一个内容,主要原因是由于每个控件对象都会有一个重要又不常写出来的属性--Content Property(有Content,Child,Items,Children几个属性,如Grid可以容纳多个控件,用的是Children)。

内容模型就是每一族的控件都含有一个或者多个元素作为其内容(其下面的元素可能是其他控件)。

为什么可以不常写出来呢?先让我们看下面两段代码:<Window x:Class="Chapter_03.MainWindow"xmlns="/winfx/2006/xaml/presentation"xmlns:x="/winfx/2006/xaml"Title="内容属性测试" Height="350" Width="525"><Grid><Grid.Children><Button Content="1" Margin="120,146,0,146"HorizontalAlignment="Left" Width="82" /><Button Content="2" x:Name="btn2" Margin="0,146,142,145" HorizontalAlignment="Right" Width="82" /></Grid.Children></Grid></Window><Window x:Class="Chapter_03.MainWindow"xmlns="/winfx/2006/xaml/presentation"xmlns:x="/winfx/2006/xaml"Title="内容属性测试" Height="350" Width="525"><Grid><Button Content="1" Margin="120,146,0,146"HorizontalAlignment="Left" Width="82" /><Button Content="2" x:Name="btn2" Margin="0,146,142,145" HorizontalAlignment="Right" Width="82" /></Grid></Window>运行两段代码效果一样。

充分说明了重要而有不常见的原因。

因为省略的省时,而且简洁明了。

所以多数引用时都省去了。

2.2ContentControl族先说一下其特点:他们内容属性的名称为Content,只能有单一元素充当其内容。

下面通过例子说明其特点:<Button Margin="120,146,0,76" HorizontalAlignment="Left" Width="100"> <TextBox Text="测试"/><TextBox Text="测试"/><TextBox Text="测试"/></Button>上面的会报错,原因是Button里面只能有单一元素充当其内容。

去掉后面的两个TextBox,效果如图2:发现button里面不仅可以显示文字还可以用一个控件来当其内容。

其他的控件不在一一举例。

在此列出此类的主要控件:Button、ButtonBase、CheckBox、ComboBoxItem、ContentControl、Frame、GridViewColumnHeader、GropItem、Label、ListBoxItem、ListViewItem、NavigationWindow、RadioButton、ScrollViewer、StatusBarItem、ToggleButton、ToolTip、UserControl、Window。

特点:可以显示带标题的数据,内容属性为Content和Header,其这两个属性都只能容纳一个元素。

在此举例说明GroupBox的用法,然后列出其他属于此类的控件。

XAML 代码为:<Window x:Class="Chapter_03.MainWindow"xmlns="/winfx/2006/xaml/presentation"xmlns:x="/winfx/2006/xaml"Title="内容属性测试" Height="200" Width="300"><Grid Background="Gold"><GroupBox Margin="42,0,96,26"><GroupBox.Header><Label Content="我是标题"/></GroupBox.Header><Button HorizontalAlignment="Left" Width="117" Height="45"><TextBox Text="测试"/></Button></GroupBox></Grid></Window>效果图如图3:是不是看着很还好呢?现在列出同类主要的控件:Expender,GroupBox,HeaderedContentControl,TabItem。

特点:该类控件用于显示列表化的数据,内容属性为Items或ItemsSource,每种ItemsControl都对应有自己的条目容器(Item Container)。

本类元素可能会用的比较多些,也比较灵活,所以这里不做过多记录,以后的记录会经常用到,具体的再详细说明。

下面就用一个ListBox控件来小试牛刀吧!XAML代码、Cs代码如下:<Window x:Class="Chapter_03.MainWindow"xmlns="/winfx/2006/xaml/presentation"xmlns:x="/winfx/2006/xaml"Title="内容属性测试" Height="260" Width="408"><Grid Background="Gold"><ListBox x:Name="listbox" Margin="0,0,198,55"><CheckBox x:Name="cb1" Content="选择"/><CheckBox x:Name="cb2" Content="选择"/><CheckBox x:Name="cb3" Content="选择"/><CheckBox x:Name="cb4" Content="选择"/><Button x:Name="btn1" Content="按钮1"/><Button x:Name="btn2" Content="按钮1"/><Button x:Name="btn3" Content="按钮1"/></ListBox></Grid></Window>using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Windows;using System.Windows.Controls;using System.Windows.Data;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Imaging;using System.Windows.Navigation;using System.Windows.Shapes;namespace Chapter_03{///<summary>/// MainWindow.xaml 的交互逻辑///</summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();Button btn=new Button();btn.Content="另外添加一个";btn.Click += new RoutedEventHandler(btn_Click);this.listbox.Items.Add(btn);btn3.Click+=new RoutedEventHandler(btn_Click);}///<summary>///用来找到button的父级元素类型///</summary>///<param name="sender"></param>///<param name="e"></param>void btn_Click(object sender, RoutedEventArgs e){Button btn=(sender) as Button;DependencyObject level1 = VisualTreeHelper.GetParent(btn);DependencyObject level2 = VisualTreeHelper.GetParent(level1); DependencyObject level3 = VisualTreeHelper.GetParent(level2);if (btn != null)MessageBox.Show(level3.GetType().ToString());else MessageBox.Show("无找到!");}}}效果图如图4:图4先来说明一下代码:在listBox里面放了几个checkbox和button,说明ListBoxI 的Item不仅支持类型相同的元素,还支持类型不同的元素。

相关主题