Silverlight 的编号和项目符号列表
3.89/5 (5投票s)
Silverlight 中 HTML ol 和 ul 标签的对应项。
引言
Silverlight 2 是个很棒的主意，但有些地方确实做得不够。我怀念的功能之一就是对有序和无序列表的支持——它相当于 HTML 的 <ol> 和 <ul> 标签。这个库填补了这一空白。
- 支持十进制数字、罗马数字和字母。
- 内置多种多样的项目符号。
- 允许您使用图像作为项目符号。
- 为每个列表项编号添加固定文本 - 因此您可以将“1”变成“第 1 步：”。
- 精确控制缩进以及编号与文本之间的间距。
- 自定义颜色、大小等。
- 可以设置非 1 的起始编号。或非 1 的增量。
- 通过 ListBox 的数据模板，在每个列表项中包含一个项目编号。
要求
- Visual Studio 2008
- Microsoft Silverlight Tools Beta 2 for Visual Studio 2008
安装
- 下载包含源代码的 zip 文件，并在一个目录中解压缩。
- 在 Visual Studio 中打开 OrderedList.sln 文件。
- 您会发现这些源文件在一个解决方案中组织起来，包含以下元素：
- Project OrderedList 是实际的库。
- Project Test 包含一系列有序列表，用来测试该库的各种功能。在此处查找各种选项的工作示例。
- Example 项目包含本文所示的示例代码。
- 编译解决方案。这将在 OrderedList\ClientBin 目录中生成一个 OrderedList.dll 文件。您需要在自己的项目中才能使用该库。
将 OrderedList 控件添加到工具箱
- 构建解决方案。
- 右键单击工具栏并选择“添加选项卡”。
- 为新选项卡输入一个名称，例如“Ordered List”。
- 右键单击新选项卡“Ordered List”并选择“选择项”。这将打开“选择工具箱项”窗口。
- 单击 Silverlight 选项卡。
- 单击“浏览”按钮，找到您刚刚创建的 OrderedList.dll 文件。
- 双击 OrderedList.dll。
- 单击“确定”将控件添加到工具箱。
新控件仅在您打开 .xaml 文件时可见。在查看 .aspx 文件时看不到它们。
快速入门
添加库引用
当您将 OrderedList 控件从工具箱拖到页面上时，编辑器会自动将所需的命名空间/程序集声明添加到您的页面，并为项目添加对 OrderedList.dll 的引用。
但是，如果您仅手动输入 XAML 或进行复制粘贴，请务必按照以下步骤自己添加这些内容：
- 在您的项目中，添加对您在 安装过程中生成的 OrderedList.dll 文件的引用。
-
在 .xaml 文件的顶部，向
UserControl定义添加一个命名空间声明，如下所示：<UserControl xmlns:my="clr-namespace:OrderedList;assembly=OrderedList" ...... >
简单列表
要在页面上添加有序列表，只需在 XAML 中添加类似以下内容：
<my:OrderedList> <StackPanel> <my:ListItem> <TextBlock>First text item</TextBlock> </my:ListItem> <my:ListItem> <TextBlock>Second text item</TextBlock> </my:ListItem> <my:ListItem> <TextBlock>Third text item</TextBlock> </my:ListItem> </StackPanel> </my:OrderedList>
OrderedList 元素设置列表，就像 HTML 中的 <ol> 和 <ul> 标签一样。ListItem 元素创建单个列表项，就像 HTML 中的 <li> 一样。
OrderedList 继承自 ContentControl，因此它只能包含一个元素。因此，您需要将 ListItem 元素放在 StackPanel 或 Grid 中。
每个项目多个元素
ListItem 也继承自 ContentControl，因此如果您在一个列表项中有多个元素，也需要将它们放在 StackPanel 或 Grid 中。如下所示：
<my:ListItem> <StackPanel> <TextBlock>First text item, first text block</TextBlock> <TextBlock>First text item, second text block</TextBlock> <TextBlock>First text item, third text block</TextBlock> </StackPanel> </my:ListItem>
嵌套列表
最后，您可以在 ListItem 中放置任何元素，包括更多的 OrderedList 元素——以创建嵌套列表。
<my:ListItem> <StackPanel> <TextBlock>First text item</TextBlock> <my:OrderedList> <StackPanel> <my:ListItem> <TextBlock>First nested text item</TextBlock> </my:ListItem> <my:ListItem> <TextBlock>Second nested text item</TextBlock> </my:ListItem> <my:ListItem> <TextBlock>Third nested text item</TextBlock> </my:ListItem> </StackPanel> </my:OrderedList> </StackPanel> </my:ListItem>
整合所有内容
以下是一个包含完整示例的页面。您可以在下载的源文件中找到它，在 Example1 项目中。<UserControl x:Class="Example1.Page" xmlns:my="clr-namespace:OrderedList;assembly=OrderedList" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <my:OrderedList> <StackPanel> <my:ListItem> <StackPanel> <TextBlock>First text item</TextBlock> <my:OrderedList> <StackPanel> <my:ListItem> <TextBlock>First nested text item</TextBlock> </my:ListItem> <my:ListItem> <TextBlock>Second nested text item</TextBlock> </my:ListItem> <my:ListItem> <TextBlock>Third nested text item</TextBlock> </my:ListItem> </StackPanel> </my:OrderedList> </StackPanel> </my:ListItem> <my:ListItem> <StackPanel> <TextBlock>Second text item, first text block</TextBlock> <TextBlock>Second text item, second text block</TextBlock> <TextBlock>Second text item, third text block</TextBlock> </StackPanel> </my:ListItem> <my:ListItem> <TextBlock>Third text item</TextBlock> </my:ListItem> </StackPanel> </my:OrderedList> </Grid> </UserControl>
数据模板
您可以使用 OrderedList 来为 ItemsControl（例如 ListBox）的项编号，如下所示：
<my:OrderedList> <ListBox x:Name="MyBooks" ItemsSource="{Binding Mode=OneWay}"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" > <my:ListNumber/> <TextBlock Text="{Binding Title}" Width="150" Margin="0,0,5,0" /> <TextBlock Text="{Binding ISBN}" Width="120" Margin="0,0,5,0" /> <TextBlock Text="{Binding PublishDate}" Width="200" Margin="0,0,5,0" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </my:OrderedList>
请注意
ListBox位于OrderedList内部。- 您可能会使用 DataTemplate 来定义数据的哪些部分在哪里显示以及如何显示。在该 DataTemplate 中，在您想要显示项目编号的位置包含一个
ListNumber。
ListNumber 和 ListItem 的区别在于，ListNumber 仅代表编号本身，而 ListItem 则负责缩进编号后面的元素。查看 OrderedList 项目中的 generic.xaml 文件，您会发现 ListItem 实际上使用 ListNumber 来显示实际的编号。
下载的解决方案中的 Example2 项目包含了所有这些功能的实际工作示例。
编号类型
除了十进制数字，您还可以使用大写和小写的字母以及大写和小写的罗马数字。您通过 OrderedList 的 NumberType 属性指定编号类型。
例如，要使用小写罗马数字，您可以这样写：
<my:OrderedList NumberType="LowerRoman"> ..... </my:OrderedList>
| 生成... | 使用 NumberType... |
| 1, 2, 3, 4, ... | 十进制（默认） |
| i, ii, iii, iv, ... | LowerRoman |
| I, II, III, IV, ... | UpperRoman |
| a, b, c, d, ... | LowerAlpha |
| A, B, C, D, ... | UpperAlpha |
项目符号
为了方便使用项目符号而不是编号，NumberType 属性还允许您指定项目符号类型。这为您提供了 HTML <ul> 标签的对应功能。
例如，要使用黑色方块作为您的项目符号，您可以这样写：
<my:OrderedList NumberType="Square"> ..... </my:OrderedList>
| 生成... | 使用 NumberType... |
| • | 实心圆 |
| ● | 大实心圆 |
| ◦ | 圆 |
| ○ | 大圆 |
| ♦ | 菱形。 |
| ◊ | 菱形 |
| ▪ | 平方 |
| ■ | 大方块 |
| ► | 指针 |
更多项目符号
如果您想要的符号列表中没有，您可以使用 NumberFormat 属性使用任何您想要的 Unicode 字符。
例如，要使用笑脸作为您的项目符号，您可以这样写：
<my:OrderedList NumberFormat="☺"> ..... </my:OrderedList>
您会在 Unicode 几何形状块和 杂项符号块中找到许多有趣的字符。
使用图像作为项目符号
假设您的 Silverlight 应用程序的 `images` 目录中有一个名为 `greentick.png` 的图像，高度为 20 像素，宽度为 20 像素。
以下是如何将该图像用作项目符号：
<my:OrderedList NumberType="Image" ImageHeight="20" ImageWidth="20" ImageSource="images/greentick.png"> ..... </my:OrderedList>
请注意，您需要将 NumberType 设置为 Image。
为了使此功能正常工作，当您的 Silverlight 页面显示时，您的图像需要位于正确的目录中。为确保这一点：
- 在 Visual Studio 中，右键单击图像文件并选择“属性”；
- 将“复制到输出目录”设置为“始终复制”。
此外，Silverlight 似乎不支持 .gif 文件，因此您只能使用 .jpg 和 .png 文件。
Example3 项目包含所有项目符号的实际工作示例。
隐藏项目符号
如果出于某种原因您根本不想要项目符号（或编号），您可以这样写：
<my:OrderedList NumberType="None"> ..... </my:OrderedList>
但这也会隐藏缩进。如果您想要缩进（但没有项目符号或编号），只需使用空字符串作为项目符号即可：
<my:OrderedList NumberFormat=""> ..... </my:OrderedList>
父级编号
在嵌套列表中，有时需要显示“父”项在“子”项中的编号，如下所示：
要实现这种效果，请在嵌套列表上使用 ShowParentNumbers 属性，如下所示：
<my:OrderedList ShowParentNumbers="True"> ..... </my:OrderedList>
Example4 项目中有一个实际的例子。您可以根据需要设置任意多层嵌套。
起始值和增量
在使用编号时，您不必从 1 开始，也不必以 1 为增量。
如果您想从 10 开始，以 5 为增量，只需这样写：
<my:OrderedList Start="10" Increment="5"> ..... </my:OrderedList>
添加固定文本
假设您想用一些文本来修饰项目编号，如下所示：
1) .....
2) .....
3) .....
甚至这样：
第 1 步：.....
第 2 步：.....
第 3 步：.....
使用 NumberFormat 属性可以轻松实现这一点：
<my:OrderedList NumberFormat="{}Step {0}:"> ..... </my:OrderedList>
{0} 是实际数字或项目符号的占位符。
开头的 {} 告诉 XAML {0} 应按字面意思解释，而不是作为标记扩展。
如果您只需要固定文本（没有编号），请省略 {0} 和 {}。
间距和对齐
数字或项目符号的位置，以及文本的缩进，由这些属性决定：
| NumberIndent | 数字或项目符号前方的间距 |
| NumberWidth | 数字或项目符号占用的空间 |
| NumberTextAlignment | 数字或项目符号在给定空间内的对齐方式（左对齐或右对齐） |
| NumberPostdent | 数字或项目符号与文本之间的间距 |
如果您不设置任何这些属性，您将获得一个默认的 NumberWidth，该宽度足以容纳几个数字，NumberTextAlignment 为“右对齐”，NumberPostdent 较小，以避免文本紧贴数字。在大多数情况下，这就是您想要的。
有时您需要自己设置宽度，例如，使其足够大以容纳固定文本：
<my:OrderedList NumberIndent="10" NumberWidth="40" NumberPostdent="5" NumberTextAlignment="Left" NumberFormat="{}Step {0}:"> ..... </my:OrderedList>
Example5 包含这方面的实际工作示例。
图像项目符号的间距
使用图像项目符号时，情况略有不同。在这里，使用 ImageWidth 属性代替 NumberWidth，并且 NumberTextAlignment 被忽略。
| NumberIndent | 图像项目符号前方的间距 |
| ImageWidth | 图像项目符号的宽度 |
| NumberPostdent | 图像项目符号与文本之间的间距 |
编号外观
红色项目符号？或者非常大的带下划线的数字？
如果您查看 OrderedList 项目中 generic.xaml 文件末尾的 ListNumber 样式，您会发现数字或项目符号位于一个 TextBlock 元素中。您可以通过 OrderedList 元素的属性来设置包含数字或项目符号的 TextBlock 的最重要属性。属性名称与相应的 TextBlock 属性相同，只是前面加了“Number”。所以您可以这样写：
<my:OrderedList NumberForeground="Red" NumberFontFamily="Arial" NumberFontSize="24"> ..... </my:OrderedList>
您可以使用这些属性：
NumberFontFamily |
数字的字体系列，例如“Arial”或“Times New Roman”（完整列表）。 |
NumberFontStyle |
“Normal”或“Italic” |
NumberFontWeight |
设置为“Bold”以获得粗重的数字（更多选项） |
NumberFontSize |
字体大小（以像素为单位） |
NumberForeground |
您的数字或项目符号的颜色（颜色列表） |
NumberTextDecorations |
设置为“Underline”以获得带下划线的文本 |
解决方案中的 Test 项目展示了其中一些属性的用法。
历史
2008 年 6 月 9 日：首次发布，适用于 Silverlight 2 Beta 1
2008 年 6 月 11 日：转换为 Silverlight 2 Beta 2