design time

Windows Phone – design time bindings not showing?

pauliomLeave a comment

I confess that I am very stubborn about a few issues when it comes to Windows Phone development; support themes, support landscape, provide design time support. Recently I’ve been using MVVM Light to develop an application and it has great support for design time data. However, at some random point during the development the designer failed to show the sample data. This isn’t the first time I’ve seen this so I decided to have a dig and find out what was going on. Basically it’s flaky, very flaky. At first the problem seemed to be with one type of sample data I was creating. When I commented the code out, the sample data appeared, put it back the sample data vanished. So I thought I was onto something. Just a red-herring. Eventually, after I left it for a period of time, the sample data vanished and stayed away regardless of what I removed. I then looked at Task Manager for clues. Sure enough there were two instances of ‘Microsoft Visual Studio XAML UI Designer’ running, one for each xaml project I had opened. So I killed both of them off, and returned to my problem xaml page. Selected ‘reload designer’ and the sample data sprang back to life. As I said, flaky. So in summary, I still don’t know what the problem is, but killing the UI designer and reloading a new one seems to resolve it, plus you don’t have to restart VS to do that. If you do know the answer to this then please let me know!

Edit:
Aha! Turns out the bulk of my problems was an issue with the sample data. Essentially when I created my sample data I had inadvertently caused a null exception. However, rather then show any error the designer had gracefully eaten the exception and sulked. So, if your data vanishes, check out your sample data for errors.

How to use Blend sample data with a LongListSelector

pauliom9 Comments

 

The LongListSelector for Windows Phone is a great control. However, it can be a real pain to design especially when you want to use the Sample Data feature of Blend.

For example, you can  create Sample Data in Blend using a string Property called Name. When you drop it onto a List Box you are shown the data at Design time, this is really useful;

image 

However, if you try the same trick with a Long List Selector your are faced with a blank page. If you try to edit any of the templates you are faced with more blank screens. It is far from ideal. So here is one method to make your Long List Selector projects Blend friendly.

1) Create your Sample Data – if you follow my example create the default Blend Sample with a Property called Name using the format for Name

image

2) Follow the MSDN article for creating a Long List Selector, this way you can test the result and be sure you haven’t made any errors, very easy to do. Don’t worry we’ll use our Sample Data soon

3) Once you have a Long List Selector working we’ll do some surgery. Derive a new class based on our SampleDataSource (if you renamed the SampleDataSource when creating it in Blend, you’ll need to use that name)

namespace Expression.Blend.SampleData.SampleDataSource
{
    public class LongListSampleData : SampleDataSource
    {
        public LongListSampleData() : base()
        {
            dataSource = AlphaKeyGroup<Item>.CreateGroups(base.Collection,
                                System.Threading.Thread.CurrentThread.CurrentUICulture,
                                (Item i) => { return i.Name; }, true);
        }
        private List<AlphaKeyGroup<Item>> dataSource;
        public List<AlphaKeyGroup<Item>> DataSource
        {
            get
            {
                return this.dataSource;
            }
        }
    }
}

4) Add a reference to this new Data Source in App.xaml. Add it to the Resources just like the one Blend added for you;

<Application.Resources>
        <SampleData:SampleDataSource x:Key="SampleDataSource" d:IsDataSource="True"/>
        <SampleData:LongListSampleData x:Key="LongListSelectorData" d:IsDataSource="True"/>

5) Change the various data templates binding from using FirstName to Name

<DataTemplate x:Key="AddrBookItemTemplate">
           <StackPanel VerticalAlignment="Top">
               <TextBlock Text="{Binding FirstName}" />
               <TextBlock Text="{Binding Name}" />

6) Add Binding references to the LongListSelector control;

<phone:LongListSelector
                DataContext="{Binding Source={StaticResource LongListSelectorData}}"
                ItemsSource="{Binding DataSource}"

7) Build and run. You should now see something like;

 

image 

8) View it in Blend or Visual Studio designer. Please note, both designers are a bit flaky – especially Blend. You normally have to close any open window showing the page, in fact it’s often easier to just close the apps down and re-open then. You should then be able to view the selector and all of its templates at Design Time!

image