How do I make my ListPicker(From WP Toolkit) Blendable(MVVM Light)

Question

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.

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

what gets me to 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.

Answer 1

My guess would be that the designer somehow loses the data context when editing that full-mode item template. However, I was able to make it blendable by adding d:DataContext="{Binding Stores[0]}" declaration on the Grid inside the data template. And by the way, the third TextBlock binding was misspelled as FullAddress whereas the model only has Address. All in all, it looks fine by modifying the template to following (irrelevant parts omitted):

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

Tested in WP8.0 project with VS & Blend 2012, works fine for me.