Silverlight 4 Composite UI 中的隐式 DataTemplate – 准备迎接 Silverlight 5–第一部分

我正在我的 Silverlight 4 Composite UI 中使用 Prism 4。使用 Prism，有两种方法可以填充 Region：你可以使用 UI 元素（即 View）填充它，或者直接放置 View-Model。就我个人而言，我支持不应该直接从 Application 逻辑处理 UI 元素的观点，并且 Application 逻辑中应该有零个 UI 元素。因此，从本质上讲，用 View-Model 而不是 View 填充 Region 对我来说更合理。

使用 WPF，事情就简单多了。你所要做的就是为 View-Model 创建一个隐式 Data Template，然后让 WPF 完成剩下的工作。

如果你是一名 Silverlight 开发人员，并且之前从未开发过 WPF，那么隐式 Data Template 听起来可能不熟悉。

隐式数据模板是一个常规的 Data Template，它针对特定的类型，在我们的例子中是一个特定的 View-Model。一旦将该类型的一个实例放置在 ContentControl 的内容中或作为 ItemsControl 中的项目，该隐式 Data Template 就会被框架自动选取，并用于创建视觉元素，添加到相关项目的视觉树中。

在 Silverlight 4 中，没有隐式 Data Template（在撰写本文时，Silverlight 5 Beta 版将提供）。在这种情况下，你应该直接在控件本身上指定 Data Template，这在很多情况下都是一个很大的劣势，包括直接将 View-Model 添加到 Region 中。

在互联网上搜索时，我发现了一个 解决方案，用于在 Silverlight 4 中实现隐式 Data Template。就我个人而言，我不喜欢它，原因有两个

1. 所有 Data Template 必须仅放置在 Application 资源中，并且无法在 Visual Tree 的较低级别中覆盖它们。
2. 没有一种简单的方法来指定隐式 Data Template，并且迁移到支持隐式 Data Template 的 Silverlight 5 将不会是原生方式。

虽然有点晚了，但我还是使用一个附加行为开发了自己的解决方案，我想与你分享。

因此，这是 ContentControl（或派生类型）和 ItemsControl（或派生类型）的用法

1.<ContentControl Grid.Column="1"
2.                VerticalAlignment="Center" HorizontalAlignment="Center"
3.                Content="{Binding SelectedShape, Mode=OneWay}" >
4.    <i:Interaction.Behaviors>
5.        <ts:ImplicitContentTemplateBehavior />
6.    </i:Interaction.Behaviors>
7.</ContentControl>

1.<ListBox Grid.Column="0"
2.            VerticalAlignment="Center" HorizontalAlignment="Center"
3.            ItemsSource="{Binding Shapes}"
4.            SelectedItem="{Binding SelectedShape, Mode=TwoWay}">
5.    <i:Interaction.Behaviors>
6.        <ts:ImplicitItemTemplateBehavior/>
7.    </i:Interaction.Behaviors>
8.</ListBox>

在上面的代码片段中，我们有一个 ContentControl，它绑定了类型为 Shape（基类）的 SelectedShape 属性，该属性可能是其中一种形状（派生类型）：Circle、Rectangle 和 Triangle，以及一个 ListBox，它绑定了一个形状的集合。

查看 ListBox，你可能会看到一个不同的 DataTemplate 被隐式选取。单击一个形状，你可以在 ContentControl 的内容中再次看到它。

这种行为由 ImplicitContentTemplateBehavior 和 ImplicitItemTemplateBehavior 相应地完成。

这是 Rectangle 类型的 DataTemplate

1.<UserControl.Resources>
2.    <DataTemplate x:Key="ImplicitDataTemplate.Rectangle">
3.        <Grid Height="120" Width="120">
4.            <Rectangle StrokeThickness="4">
5.                <Rectangle.Stroke>
6.                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
7.                        <GradientStop Color="White" Offset="0"/>
8.                        <GradientStop Color="#FFC24400" Offset="0.992"/>
9.                    </LinearGradientBrush>
10.                </Rectangle.Stroke>
11.                <Rectangle.Fill>
12.                    <LinearGradientBrush EndPoint="0.5,1" 
                           MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
13.                        <GradientStop Color="#FFFFEACA"/>
14.                        <GradientStop Color="#FFFF6200" Offset="0.989"/>
15.                    </LinearGradientBrush>
16.                </Rectangle.Fill>
17.            </Rectangle>
18.            <TextBlock Text="{Binding Name}" HorizontalAlignment="Center" 
                   VerticalAlignment="Center" />
19.        </Grid>
20.    </DataTemplate>
21.</UserControl.Resources>

正如你所看到的，我将 Rectangle 的数据模板放在了 View 本身的资源中（还有另外两个，一个位于 App 资源中，另一个位于 View 的 Grid 内部）。

每个 DataTemplate 都指定了一个唯一的键，该键是它所表示的完整类型名称（在上面的示例中：ImplicitDataTemplate.Rectangle）。

欢迎从 此处 下载此示例的代码。

在下一篇文章中，我将提供行为的源代码，并将解释我如何实现每个行为。

敬请期待！