深入浅出WPF-05.控件与布局

控件与布局

突出特点：1、专门的UI设计语言XAML，无需像MFC那样使用编程语言设计UI。2、前几代在UI和数据交互方面是由消息Message到控件事件，始终是把UI控件放在主导位置而把数据放在了次要位置，用UI驱动数据的改变。WPF在事件驱动的基础上引入了数据驱动的概念，让数据作为主导位置。UI的主要作用就是数据展示，故而数据是核心，WPF正是这样的。

以后的WPF学习，一定要树立一种观念，UI是作为数据的展示，数据才是核心。UI要由数据进行驱动，UI只是数据的表达。

在WPF中，何为控件？我们把那些能够展示数据、响应用户操作的UI元素称之为控件。控件所展示的数据，称之为控件的数据内容，控件在响应用户的操作后，会执行自己的一些方法或者以事件Event的形式通知应用程序，这些称之为控件的行为或者算法内容。所以，控件就是数据和行为的载体，而无需强调调试的长相。

我们将常用的控件大致分为6类：

• 布局控件：可以容纳多个控件或者嵌套其他布局控件，比如Grid、StackPanel、DockPanel等。他们共同的父类是Panel

• 内容控件：只能容纳一个其他控件或者布局控件作为他的内容。Window、Button等。他们共同的父类是ContentControl，只能由单一元素充当其内容

  <StackPanel>
      <Button Width="163" Height="93" Click="Button_Click_1" Margin="10">
          <Button Content="Button" Width="91" Height="42" Click="Button_Click"/>
      </Button>
      <Button Width="163" Height="93" Click="Button_Click_1" Margin="10">
          <TextBlock Text="TextBlock"/>
      </Button>
      <Button Width="163" Height="93" Margin="10">
          <Image Source="avatar2.png"/>
      </Button>
  </StackPanel>
  

  Button控件中只能包含一个其他控件，如果需要包含多个，需要将多个控件放入一个布局中进行实现。

  <Button Width="163" Height="93" Margin="10">
      <StackPanel Orientation="Horizontal">
          <TextBlock Text="TextBlock" VerticalAlignment="Center"/>
          <Image Source="avatar2.png"/>
      </StackPanel>
  </Button>
  

• 带标题的内容控件：相当于一个内容控件，但是可以加一个标题Header。标题部分也可以是一个控件或者布局。共同的父类HeaderedContentControl。内容属性为Content和Header。无论是Content还是Header，都只能容纳一个元素作为其内容。

  Expander，GroupBox，HeaderedContentControl，TabItem

• 条目控件：可现实一列数据，一般情况下这列的数据类型相同。ListBox，ComboBox，主要用于展示集合类型的数据，共同父类ItemsControl。内容属性是Items或者ItemSource。每种ItemsControl都有自己对应的条目容器Item Container。

  Menu（MenuItem），MenuBase，ContextMenu（MenuItem），ComboBox（ComboBoxItem），ItemsControl，ListBox（ListBoxItem），ListView（ListViewItem），Tabcontrol（TabItem），TreeView（TreeViewItem），Selector，StatusBar（StatusBarItem）

• 带标题的条目控件：相当于在条目控件上增加了一个标题显示区域。这类控件往往用于显示层级关系的数据。TreeViewItem、MenuItem、ToolBar三种，结点显示在Header区域，子级结点则显示在条目控件区域。共同父类HeaderedItemsControl。内容属性：Items，ItemsSource，Header

• 特殊内容控件：这些控件比较独立

  起装饰作用的Decorator族。Border可以为一组控件增加边框。ViewBox可以对组织在一起的内容进行自由缩放。内容属性是Child，只能由单以元素充当内容。

  TextBlock可以容纳自由控制格式的文本，只能显示不能编辑。TextBox只能容纳一个字符串，不需要太多的格式显示，但是可以编辑。

  Image容纳图片。

  Shape族：用于装饰，没有具体的内容。使用属性Fill进行填充，使用Stroke属性设置边线。

  Panel族：主要控制UI的布局，内容可以是多个元素。Canvas，Grid，DockPanel，TabPanel，UniformGrid，WrapPanel等