如何使我的ListPicker(来自WP Toolkit)可混合(MVVM Light)

时间:2013-07-11 18:41:59

标签: windows-phone-7 mvvm-light expression-blend listpicker

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

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

但是我没有看到混合中的值。其中一个优点是“blendablity”,它允许我在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}"/>

就像我说的那样在现场模式下工作但不是混合。 enter image description here

上面的

是在Blend Expression 4中,你可以看到我看到了我的虚拟值(我想要的)。

但是当我尝试在Blend

中编辑数据模板时

enter image description here

是什么让我到这里

enter image description here

我只看到我的硬编码值,而不是别的。

在我身边,我看到3个文本块和一个行分隔符。如果我看,我发现它们是正确的数据绑定。

他们只是没有露面。如果我希望它出现,我必须再次对它们进行数据绑定,但它会像这样绑定

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

然后我得到了混合性,但是生活根本不起作用(有点奇怪)因为它被硬编码到我的集合的第一个索引。

1 个答案:

答案 0 :(得分:1)

我的猜测是设计师在编辑全模式项目模板时会以某种方式丢失数据上下文。但是,我能够通过在数据模板内的Grid上添加d:DataContext="{Binding Stores[0]}"声明来使其可混合。顺便说一句,第三个TextBlock绑定拼写错误为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&amp; amp ;;在WP8.0项目中测试Blend 2012,对我来说很好。