如何在设计时将 Sketchflow 示例数据用于 ListBoxItem 模板？

Question

我正在使用 Expression Blend 4 和 Visual Studio 2010 创建 Sketchflow 原型。

我有一个示例数据集合和一个与其绑定的列表框。这在设计时和运行时都按我的预期显示。然而，ListBoxItem 模板足够复杂，我想将其提取到自己的 XAML 文件中。即使项目仍然按预期在使用模板的主列表框中呈现，但当我打开模板本身时，所有数据绑定控件都是空的。

如果我向模板添加 DataContext，则可以在模板中查看并使用填充的对象，但本地 DataContext 会覆盖列表框中设置的 DataContext。

一些代码将说明这一点。首先创建一个 Sketchflow 项目（我使用的是 Silverlight，但它对于 WPF 应该同样工作），然后添加一个名为 SampleDataSource 的项目数据源。添加一个名为 ListData 的集合，其中包含一个名为 Title 的字符串属性。

这是主 Sketchflow 屏幕的（按比例缩小的）代码，我们将其称为 Main.xaml：

<UserControl
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 xmlns:local="clr-namespace:DemoScreens"
 mc:Ignorable="d"
 x:Class="DemoScreens.Main"
 Width="800" Height="600">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ProjectDataSources.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <DataTemplate x:Key="ListBoxItemTemplate">
             <local:DemoListBoxItemTemplate d:IsPrototypingComposition="True"     Margin="0,0,5,0" Width="748"/>
            </DataTemplate>
        </ResourceDictionary>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="#5c87b2" DataContext="{Binding Source={StaticResource SampleDataSource}}">
          <ListBox Background="White" x:Name="DemoList" Style="{StaticResource ListBox-Sketch}" Margin="20,100,20,20" ItemTemplate="{StaticResource ListBoxItemTemplate}" ItemsSource="{Binding ListData}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
    </Grid>
</UserControl>

您可以看到它引用了 DemoListBoxItemTemplate，该模板在其自己的 DemoListBoxItemTemplate.xaml 中定义：

<UserControl
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 xmlns:local="clr-namespace:DemoScreens"
 mc:Ignorable="d"
 x:Class="DemoScreens.DemoListBoxItemTemplate">
 <Grid x:Name="LayoutRoot">
  <TextBlock Text="{Binding Title}" Style="{StaticResource BasicTextBlock-Sketch}" Width="150"/>
    </Grid>
</UserControl>

显然，这比我的要简单得多实际的列表框，但它应该足以说明我的问题。当您在表达式设计器中打开 Main.xaml 时，列表框将填充示例数据。但是，当您打开 DemoListBoxItemTemplate.xaml 时，没有数据上下文，因此没有可显示的数据，这使得直观地识别控件变得更加困难。

在使用模板时如何显示示例数据，同时仍允许将更大的示例数据集用于列表框本身？

Answer 1

我相信这应该对你有用，我只是用 SL 和 Blend 4 尝试过：

1. 而不是让你的模板变成
   将其放入的用户控件
   单独的文件，移动模板
   到它自己的资源字典中。
2. 要添加新的资源字典，资源面板的右上角有一个按钮。
3. 在用户控件的资源中找到模板（默认情况下可能名为 ItemTemplate），右键单击它进行复制，将其粘贴到新的资源字典中。
4. 删除原始资源，这可能会向您发出有关引用的警告，如果您保留它们相同，它们可能仍然有效，因为名称相同，如果不是：
5. 右键单击列表框，编辑其他模板，项目模板，应用资源并从新资源字典中选择 ItemTemplate。

现在，您的模板位于单独的文件中，并且仍然可以使用数据上下文进行编辑，尽管它不会像数据模板位于同一用户控件中那样位于画板上。

希望有帮助，如果没有，请告诉我。