windows-phone-7 - 如何使我的 ListPicker(来自 WP 工具包)可混合(MVVM Light)

Question

我正在使用 MVVM light，我正在尝试将我的 ListPicker 连接到我的 View 模型中的可观察集合。

我能够通过将它绑定(bind)到 listPicker 中的 itemSource 来做到这一点。我的问题是我想进入“FullScreenOnly”模式。我认为我的数据模板必须继承自 itemSource，因为我能够将我的集合中的属性名称提取到数据模板中，并且它们会在我运行应用程序时显示。

但是我没有看到 blend 中的值。优点之一是“可混合性”，它允许我在 Expression Blend 中看到虚拟值，使其更易于使用。

查看模型

 public class AddProductPriceVm : ViewModelBase
    {
        /// <summary>
        /// Initializes a new instance of the AddProductPrice class.
        /// </summary>
        public AddProductPriceVm()
        {
            if (ViewModelBase.IsInDesignModeStatic)
            {
                Stores = new ObservableCollection<Store>
                {
                     new Store
                     {
                             Name = "test1",
                             Address = "123 fake street",
                             City = "Fake City",
                             Region = "FC",
                             PostalCode = "123414",
                     },
                      new Store
                     {
                              Name = "test2",
                             Address = "123 fake street",
                             City = "Fake City",
                             Region = "FC",
                             PostalCode = "123414",
                     }
                };
            }
            else
            {
                Stores = new ObservableCollection<Store>
                {
                     new Store
                     {
                             Name = "test1",
                             Address = "123 fake street",
                             City = "Fake City",
                             Region = "FC",
                             PostalCode = "123414",
                     },
                      new Store
                     {
                              Name = "test2",
                             Address = "123 fake street",
                             City = "Fake City",
                             Region = "FC",
                             PostalCode = "123414",
                     }
                };
            }
            //Stores = new ObservableCollection<Store>();

        }


        public ObservableCollection<Store> Stores { get; set; }
    }

因此，在设计模式下，它应该填充我的虚拟数据，而当它实时启动时，它应该填充我的虚拟数据。现在只有在实时模式下它才会填充数据。

这是我的标记

<Grid.Resources>
        <DataTemplate x:Name="PickerItemTemplate">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}" Margin="12 0 0 0"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Name="PickerFullModeItemTemplate">
            <Grid Height="129" Margin="16 21 0 20" Width="294" d:DesignWidth="198" d:DesignHeight="80">
                <TextBlock Text="{Binding Name}" FontSize="24" FontFamily="{StaticResource PhoneFontFamilyLight}" Height="34" VerticalAlignment="Top" TextWrapping="Wrap" Margin="0,0,8,0"/>
                <TextBlock Text="Address: " HorizontalAlignment="Left" Margin="0,38,0,0" Width="92" Height="31" VerticalAlignment="Top"/>
                <TextBlock Foreground="Green" TextWrapping="Wrap" Margin="0,69,0,0" Height="54" VerticalAlignment="Top" FontSize="18.667" Text="{Binding FullAddress}"/>
                <Line x:Name="lineDivider" Stroke="White"  RenderTransformOrigin="0.488,0.437" VerticalAlignment="Bottom" X2="500" StrokeThickness="3" Opacity="0.5" />
            </Grid>
        </DataTemplate>
  </Grid.Resources>




  <toolkit:ListPicker ExpansionMode="FullScreenOnly"  x:Name="lpStores" ItemTemplate="{StaticResource PickerItemTemplate}"    FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}"  Header="Cities" FullModeHeader="Cities"  CacheMode="BitmapCache" Margin="22,173,35,0" Height="101" VerticalAlignment="Top" ItemsSource="{Binding Stores, Mode=TwoWay}"/>

就像我说的那样，这项工作在实时模式下工作，但不是在混合模式下工作。

以上是在 Blend Expression 4 中，如您所见，我看到了我的虚拟值(我想要的)。

但是当我尝试在 Blend 中编辑数据模板时

是什么让我来到这里

我只看到我的硬编码值，没有别的。

在我这边，我看到了 3 个文本 block 和一个分隔线。如果我看，我会发现它们的数据绑定(bind)正确。

他们就是不出现。如果我想让它显示出来，我必须再次对它们进行数据绑定(bind)，但它会像这样进行绑定(bind)

Text="{Binding Stores[0].Name}

然后我得到了可混合性，但 live 根本无法工作(有点奇怪)，因为它被硬编码到我收藏的第一个索引中。

Answer 1

我的猜测是，设计者在编辑该完整模式项目模板时以某种方式丢失了数据上下文。但是，我能够通过在数据模板内的网格上添加 d:DataContext="{Binding Stores[0]}" 声明来使其可混合。顺便说一下，第三个 TextBlock 绑定(bind)被错误拼写为 FullAddress，而模型只有 Address。总而言之，通过将模板修改为以下内容(无关部分省略)看起来很好:

<DataTemplate x:Name="PickerFullModeItemTemplate">
    <Grid Height="129" Margin="16 21 0 20" Width="294" d:DesignWidth="198" d:DesignHeight="80" d:DataContext="{Binding Stores[0]}">
        ...
        <TextBlock Foreground="Green" TextWrapping="Wrap" Margin="0,69,0,0" Height="54" VerticalAlignment="Top" FontSize="18.667" Text="{Binding Address}"/>
        ...
    </Grid>
</DataTemplate>

使用 VS & Blend 2012 在 WP8.0 项目中测试，对我来说工作正常。