WPF and Silverlight 学习笔记（十一）：WPF控件内容模型

最新推荐文章于 2022-09-14 09:34:55 发布

weixin_30681615

最新推荐文章于 2022-09-14 09:34:55 发布

阅读量88

点赞数

原文链接：http://www.cnblogs.com/DragonInSea/archive/2009/04/14/1435738.html

版权

WPF控件内容模型主要指派生于System.Windows.Controls.Control类的各种控件，其主要分为四部分：

ContentControl
HeaderedContendControl
ItemsControl
HeaderedItemsControl

其继承关系请参考我上一篇博客的内容。

这四个类用作为 WPF 中大多数控件的基类。使用这些内容模型的类可以包含相同类型的内容，并以相同的方式处理该内容；可以放置在某个 ContentControl（或从 ContentControl 继承的类）中的任何类型的对象都可以放置在具有其他三个内容模型中的任何一个的控件中。如：

   1: <Window x:Class="WPFControlContentModule.winOverView"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     Title="控件内容模型概述" Height="300" Width="400">

   5:     <Grid>

   6:         <Grid.ColumnDefinitions>

   7:             <ColumnDefinition />

   8:             <ColumnDefinition />

   9:         </Grid.ColumnDefinitions>

  10:         <Grid.RowDefinitions>

  11:             <RowDefinition />

  12:             <RowDefinition />

  13:         </Grid.RowDefinitions>

14:

  15:         <!--ContentControl示例（Button）-->

  16:         <TextBlock Text="ContentControl"  Grid.Row="0" Grid.Column="0"/>

  17:         <Button Margin="5,20,5,5" Grid.Row="0" Grid.Column="0">

  18:             <Button.Content>

  19:                 <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">

  20:                     <Image Source="Images/DVD.png" Width="48" Height="48" />

  21:                     <TextBlock Text="DVD" HorizontalAlignment="Center" />

  22:                 </StackPanel>

  23:             </Button.Content>

  24:         </Button>

25:

  26:         <!--HeaderedContentControl示例（GroupBox）-->

  27:         <TextBlock Text="HeaderedContentControl"  Grid.Row="0" Grid.Column="1"/>

  28:         <GroupBox  Margin="5,20,5,5" Grid.Row="0" Grid.Column="1">

  29:             <GroupBox.Header>

  30:                 <TextBlock Text="Header Text" />

  31:             </GroupBox.Header>

  32:             <GroupBox.Content>

  33:                 <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">

  34:                     <Image Source="Images/DVD.png" Width="48" Height="48" />

  35:                     <TextBlock Text="DVD" HorizontalAlignment="Center" />

  36:                 </StackPanel>

  37:             </GroupBox.Content>

  38:         </GroupBox>

39:

  40:         <!--ItemsControl示例（ListBox）-->

  41:         <TextBlock Text="ItemsControl"  Grid.Row="1" Grid.Column="0"/>

  42:         <ListBox  Margin="5,20,5,5" Grid.Row="1" Grid.Column="0">

  43:             <ListBox.Items>

  44:                 <TextBlock Text="List Item A" />

  45:                 <Button Content="List Item B" />

  46:                 <StackPanel Orientation="Horizontal" VerticalAlignment="Center">

  47:                     <Image Source="Images/DVD.png" Width="48" Height="48" />

  48:                     <TextBlock Text="DVD" HorizontalAlignment="Center" VerticalAlignment="Center" />

  49:                 </StackPanel>

  50:             </ListBox.Items>

  51:         </ListBox>

52:

  53:         <!--HeaderedItemsControl示例（TreeView）-->

  54:         <TextBlock Text="HeaderedItemsControl"  Grid.Row="1" Grid.Column="1"/>

  55:         <TreeView Margin="5,20,5,5" Grid.Row="1" Grid.Column="1">

  56:             <TreeViewItem>

  57:                 <TreeViewItem.Header>

  58:                     Tree Node A

  59:                 </TreeViewItem.Header>

  60:                 <TreeViewItem.Items>

  61:                     <TextBlock Text="Node A - 1" />

  62:                     <Button Content="Node A - 2" />

  63:                     <StackPanel Orientation="Horizontal" VerticalAlignment="Center">

  64:                         <Image Source="Images/DVD.png" Width="48" Height="48" />

  65:                         <TextBlock Text="DVD" HorizontalAlignment="Center" VerticalAlignment="Center" />

  66:                     </StackPanel>

  67:                 </TreeViewItem.Items>

  68:             </TreeViewItem>

  69:             <TreeViewItem>

  70:                 <TreeViewItem.Header>

  71:                     Tree Node B

  72:                 </TreeViewItem.Header>

  73:                 <TreeViewItem.Items>

  74:                     <TextBlock Text="Node B - 1" />

  75:                     <Button Content="Node B - 2" />

  76:                 </TreeViewItem.Items>

  77:             </TreeViewItem>

  78:         </TreeView>

  79:     </Grid>

  80: </Window>

应用程序执行的结果如下：

一、ContentControl模型

ContentControl模型的类型具有一个 Content 属性。Content 属性的类型为 Object，因此，对于您在 ContentControl 中可以放置的内容没有任何限制。可以使用可扩展应用程序标记语言 (XAML) 或代码来设置 Content。

以下控件使用 ContentControl 内容模型：

Button、ButtonBase、CheckBox、ComboBoxItem、ContentControl、Frame、GridViewColumnHeader、GroupItem、Label、ListBoxItem、ListViewItem、NavigationWindow、RadioButton、RepeatButton、ScrollViewer、StatusBarItem、ToggleButton、ToolTip、UserControl、Window

在Content中只能放置一个控件（可以放置一个容器，然后再在容器中放置多个控件）。

严格地说，Content的内容应该放置于<XXX.Content></XXX.Content>内部，但也可以省略此标记。如在按钮中放置一图片可以有以下几种写法：

   1: <!--方法一-->

   2: <Button Margin="5">

   3:     <Button.Content>

   4:         <Image Source="Images/DVD.png" Width="48" Height="48" />

   5:     </Button.Content>

   6: </Button>

7:

   8: <!--方法二-->

   9: <Button Margin="5">

  10:     <Image Source="Images/DVD.png" Width="48" Height="48" />

  11: </Button>

12:

  13: <!--如果是字符串，或者是数组绑定、资源引用还可以-->

  14: <Button Margin="5" Content="Button Text" />

另外，还可以使用代码来为ContentControl指定相应的Content属性，如：

   1: TextBlock date = new TextBlock();

   2: date.Text = DateTime.Now.ToString("yyyy-MM-dd");

3:

   4: TextBlock time = new TextBlock();

   5: time.Text = DateTime.Now.ToString("hh:mm:ss");

6:

   7: StackPanel panel = new StackPanel();

   8: panel.Children.Add(date);

   9: panel.Children.Add(time);

10:

  11: btn.Content = panel;

二、HeaderedContentControl模型

HeaderedContentControl类继承ContentControl类，表示带有Header的ContentControl，其除了具有ContentControl的Content属性外，还具有一个Header属性，Header的类型也是Object对象，与Content属性的用法类似。

从 HeaderedContentControl 继承的控件有：Expander、GroupBox、TabItem。

如定义一个带有图片和文字标题的Expander：

   1: <Window x:Class="WPFControlContentModule.winHeaderedContentControl"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     Title="Headered Content Control" Height="200" Width="300">

   5:     <Canvas>

   6:         <Expander Margin="5" HorizontalAlignment="Center">

   7:             <Expander.Header>

   8:                 <StackPanel Orientation="Horizontal">

   9:                     <Image Source="Images/Users.png" Width="32" Height="32" />

  10:                     <TextBlock Text="User Info" VerticalAlignment="Center" />

  11:                 </StackPanel>

  12:             </Expander.Header>

  13:             <Expander.Content>

  14:                 <Grid>

  15:                     <Grid.RowDefinitions>

  16:                         <RowDefinition />

  17:                         <RowDefinition />

  18:                         <RowDefinition />

  19:                     </Grid.RowDefinitions>

  20:                     <Grid.ColumnDefinitions>

  21:                         <ColumnDefinition />

  22:                         <ColumnDefinition />

  23:                     </Grid.ColumnDefinitions>

24:

  25:                     <TextBlock Text="UserName:" HorizontalAlignment="Right"

  26:                                Grid.Row="0" Grid.Column="0" Margin="3"/>

  27:                     <TextBlock Text="Tom" HorizontalAlignment="Left"

  28:                                Grid.Row="0" Grid.Column="1" Margin="3"/>

  29:                     <TextBlock Text="Gender:" HorizontalAlignment="Right"

  30:                                Grid.Row="1" Grid.Column="0" Margin="3"/>

  31:                     <TextBlock Text="Male" HorizontalAlignment="Left"

  32:                                Grid.Row="1" Grid.Column="1" Margin="3"/>

  33:                     <TextBlock Text="Age:" HorizontalAlignment="Right"

  34:                                Grid.Row="2" Grid.Column="0" Margin="3"/>

  35:                     <TextBlock Text="23" HorizontalAlignment="Left"

  36:                                Grid.Row="2" Grid.Column="1" Margin="3"/>

  37:                 </Grid>

  38:             </Expander.Content>

  39:         </Expander>

  40:     </Canvas>

  41: </Window>

三、ItemsControl模型

从 ItemsControl 继承的控件包含一个对象集合。 ItemsControl 的一个示例是 ListBox。可以使用 ItemsSource 属性或 Items 属性来填充一个 ItemsControl。

1、使用ItemSource属性

使用ItemSource属性，需将其绑定到一个实现IEnumerable接口的类型的实例上，系统会枚举其成员做为ItemsControl的Item。如在一个ListBox中列出系统的所有字体，并在每一项中显示字体的样式（类似于Office系列中的字体下拉菜单）：

   1: <Window x:Class="WPFControlContentModule.winItemsControl"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     Title="Items Control" Height="300" Width="300">

   5:     <Grid>

   6:         <ListBox x:Name="lstFont"/>

   7:     </Grid>

   8: </Window>

   1: using System.Collections.Generic;

   2: using System.Windows;

   3: using System.Windows.Controls;

   4: using System.Windows.Data;

   5: using System.Windows.Markup;

   6: using System.Windows.Media;

7:

   8: namespace WPFControlContentModule

   9: {

  10:     /// <summary>

  11:     /// Interaction logic for winItemsControl.xaml

  12:     /// </summary>

  13:     public partial class winItemsControl : Window

  14:     {

  15:         public winItemsControl()

  16:         {

  17:             InitializeComponent();

18:

  19:             // 设置绑定的数据源

  20:             Binding binding = new Binding();

  21:             binding.Source = Items;

22:

  23:             // 绑定

  24:             lstFont.SetBinding(ListBox.ItemsSourceProperty, binding);

  25:         }

26:

  27:         private List<TextBlock> Items

  28:         {

  29:             get

  30:             {

  31:                 List<TextBlock> result = new List<TextBlock>();

32:

  33:                 // 遍历系统的所有字体

  34:                 foreach (FontFamily family in Fonts.SystemFontFamilies)

  35:                 {

  36:                     foreach (KeyValuePair<XmlLanguage, string> pair in family.FamilyNames)

  37:                     {

  38:                         TextBlock t = new TextBlock();

  39:                         // 设置字体名称

  40:                         t.Text = pair.Value;

41:

  42:                         // 设置字体样式

  43:                         t.FontFamily = family;

  44:                         t.FontSize = 12;

45:

  46:                         result.Add(t);

  47:                     }

  48:                 }

49:

  50:                 // 返回一个TextBlock的控件对象集合

  51:                 return result;

  52:             }

  53:         }

  54:     }

  55: }

2、使用Items属性

随 WPF 附带的每个 ItemsControl 具有一个对应的类，该类代表 ItemsControl 中的一个项。下表列出了随 WPF 附带的 ItemsControl 对象及其相应的项容器。

ItemsControl	项容器
ComboBox	ComboBoxItem
ContextMenu	MenuItem
ListBox	ListBoxItem
ListView	ListViewItem
Menu	MenuItem
StatusBar	StatusBarItem
TabControl	TabItem
TreeView	TreeViewItem

在做相应的项的时候可以有三种做法：

   1: <!--方法一-->

   2: <ListBox>

   3:     <ListBox.Items>

   4:         <ListBoxItem>

   5:             Item A

   6:         </ListBoxItem>

   7:         <ListBoxItem>

   8:             <TextBlock Text="Item B" />

   9:         </ListBoxItem>

  10:     </ListBox.Items>

  11: </ListBox>

12:

  13: <!--方法二，省略ListBox.Items-->

  14: <ListBox>

  15:     <ListBoxItem>

  16:         Item A

  17:     </ListBoxItem>

  18:     <ListBoxItem>

  19:         <TextBlock Text="Item B" />

  20:     </ListBoxItem>

  21: </ListBox>

22:

  23: <!--方法三，省略ListBoxItem-->

  24: <ListBox>

  25:     <ListBox.Items>

  26:         Item A

  27:         <TextBlock Text="Item B" />

  28:     </ListBox.Items>

  29: </ListBox>

四、HeaderedItemsControl模型

HeaderedItemsControl 从 ItemsControl 类继承。HeaderedItemsControl 定义 Header 属性，该属性遵从相同的规则，因为 HeaderedContentControl. WPF 的 Header 属性附带三个从 HeaderedItemsControl 继承的控件：MenuItem、ToolBar、TreeViewItem

HeaderedItemsControl模型可以理解为如下结构：一个HeaderedItemsControl包含一个Items集合，每一个Item包含一个Header属性，一个子Items集合，以TreeView和TreeViewItem为例：

   1: <TreeView>

   2:     <TreeView.Items>

   3:         <TreeViewItem>

   4:             <TreeViewItem.Header>

   5:                 <TextBlock Text="Root Node A" />

   6:             </TreeViewItem.Header>

   7:             <TreeViewItem.Items>

   8:                 <TextBlock Text="A - 1" />

   9:                 <TreeViewItem>

  10:                     <TreeViewItem.Header>

  11:                         <TextBlock Text="A - 2" />

  12:                     </TreeViewItem.Header>

  13:                     <TreeViewItem.Items>

  14:                         <TextBlock Text="A - 2 - 1" />

  15:                         <TextBlock Text="A - 2 - 2" />

  16:                         <TextBlock Text="A - 2 - 3" />

  17:                     </TreeViewItem.Items>

  18:                 </TreeViewItem>

  19:             </TreeViewItem.Items>

  20:         </TreeViewItem>

  21:         <TreeViewItem>

  22:             <TreeViewItem.Header>

  23:                 <TextBlock Text="Root Node B" />

  24:             </TreeViewItem.Header>

  25:             <TreeViewItem.Items>

  26:                 <TreeViewItem>

  27:                     <TreeViewItem.Header>

  28:                         <TextBlock Text="B - 1" />

  29:                     </TreeViewItem.Header>

  30:                     <TreeViewItem.Items>

  31:                         <TextBlock Text="B - 1 - 1" />

  32:                         <TextBlock Text="B - 1 - 2" />

  33:                         <TextBlock Text="B - 1 - 3" />

  34:                     </TreeViewItem.Items>

  35:                 </TreeViewItem>

  36:                 <TreeViewItem>

  37:                     <TreeViewItem.Header>

  38:                         <TextBlock Text="B - 2" />

  39:                     </TreeViewItem.Header>

  40:                     <TreeViewItem.Items>

  41:                         <TextBlock Text="B - 2 - 1" />

  42:                         <TextBlock Text="B - 2 - 2" />

  43:                         <TextBlock Text="B - 2 - 3" />

  44:                     </TreeViewItem.Items>

  45:                 </TreeViewItem>

  46:             </TreeViewItem.Items>

  47:         </TreeViewItem>

  48:     </TreeView.Items>

  49: </TreeView>

本文的示例代码下载

转载于:https://www.cnblogs.com/DragonInSea/archive/2009/04/14/1435738.html

weixin_30681615

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WPF and Silverlight 学习笔记（十一）：WPF控件内容模型

WPF控件内容模型主要指派生于System.Windows.Controls.Control类的各种控件，其主要分为四部分： ContentControl HeaderedContendControl ItemsControl HeaderedItemsControl 其继承关系请参考我上一篇博客的内容。这四个类用作为 WPF 中大多数控件的基类。使用这些内容模型...
复制链接

扫一扫