Как использовать образцы данных Sketchflow для шаблона ListBoxItem во время разработки?

Question

Я использую Expression Blend 4 и Visual Studio 2010 для создания прототипа Sketchflow.

У меня есть коллекция образцов данных и ListBox, который связан с ним. Это отображается так, как я ожидаю, как во время разработки, так и во время выполнения. Тем не менее, шаблон ListBoxItem это просто достаточно сложный, чтобы я хотел вытащить его в свой собственный файл XAML. Несмотря на то, что элементы по-прежнему отображаются так, как и ожидалось, в основном ListBox, где используется шаблон, при открытии самого шаблона все элементы управления с привязкой к данным пусты.

Если я добавлю DataContext в шаблон, я смогу видеть и работать с заполненными объектами, находясь в шаблоне, но затем этот локальный DataContext переопределяет набор DataContext в списке.

Немного кода проиллюстрируем. Начните с создания проекта Sketchflow (я использую Silverlight, но он должен работать так же для WPF), затем добавьте источник данных проекта с именем SampleDataSource. Добавьте коллекцию с именем ListData с единственным свойством String с именем 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, отсутствует контекст данных и, следовательно, нет данных для отображения, что затрудняет визуальную идентификацию элементов управления.

Как я могу отображать образцы данных, когда я работаю с шаблоном, и в то же время разрешать использовать больший набор данных образца для самого ListBox?

Answer 1

Я считаю, что это должно работать для вас, я только что попробовал это с SL и Blend 4:

1. Вместо того, чтобы превратить ваш шаблон в пользовательский элемент управления, чтобы поместить его в отдельный файл, переместите шаблон в свой собственный словарь ресурсов.
2. Чтобы добавить новый словарь ресурсов, в правом верхнем углу панели ресурсов есть кнопка.
3. Найдите шаблон (по умолчанию он может называться ItemTemplate) в ресурсах вашего usercontrol, щелкните его правой кнопкой мыши и скопируйте в новый словарь ресурсов.
4. Удалите исходный ресурс, это, скорее всего, даст вам предупреждение о ссылках, если вы оставите их такими же, они все равно могут работать, потому что имена будут одинаковыми, если нет:
5. Щелкните правой кнопкой мыши по списку, отредактируйте дополнительные шаблоны, шаблон элементов, примените ресурс и выберите шаблон элемента из вашего нового словаря ресурсов.

Теперь ваш шаблон находится в отдельном файле и по-прежнему должен редактироваться с помощью текста данных, хотя он не будет на месте в монтажной области, как если бы шаблон данных находился в том же пользовательском контроле.

Надеюсь, это поможет, дайте мне знать, если это не так.