3

I am using MVVM light and I am trying to hook up my ListPicker to my observable collection in my View Model.

I was able to do this by binding it to the itemSource from the listPicker. My problem is that I want to go into "FullScreenOnly" mode. I figured that my datatemplate must inherit from the itemSource as I am able to pull property names from my collection into the data template and they show up when I run the application.

However I don't see the values in blend. One of the advantages is "blendablity" which would allow me to see dummy values in Expression Blend to make it easier to work with.

View Model

 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; }
    }

So in design mode it should populate with my dummy data and when it launched live it should populate my dummy data. Right now only in live mode does it populate the data.

Here is what I have for my markup

<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}"/>

Like I said this work in live mode but not in blend. enter image description here

above is in Blend Expression 4 and as you can see I am seeing my dummy value(what I want).

However when I try to edit the data template in Blend

enter image description here

what gets me to here

enter image description here

I only see my hardcoded value and nothing else.

To my side I see 3 textblocks and one line divider. If I look I see that they are databound properly.

They just don't show up. If I want it to show up I have to databind them again but it puts in a binding like this

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

Then I get blendablity but live won't work at all(what is kind strange) as it is hard coded to the first index of my collection.

4

1 回答 1

1

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

于 2013-07-30T07:25:13.880 回答