Set LongListSelector

Question

I'm developing a Windows Phone app to practice my knowledge within the control LongListSelector. One of the pages in the app, the middle one has this code:

<!--Panorama item two-->
<phone:PanoramaItem x:Name="tasksPage" Header="Tasks">
    <!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
    <phone:LongListSelector Margin="0,-38,-22,2" ItemsSource="{Binding Items}" LayoutMode="List">
        <phone:LongListSelector.ListHeaderTemplate>
            <DataTemplate>
                <Grid Margin="12,0,0,38">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TextBlock Text="second item"
                               Style="{StaticResource PanoramaItemHeaderTextStyle}"
                               Grid.Row="0"/>
                </Grid>
            </DataTemplate>
        </phone:LongListSelector.ListHeaderTemplate>
        <phone:LongListSelector.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432">
                    <!--Replace rectangle with image-->
                    <Border BorderThickness="1" Width="99" Height="99" BorderBrush="#FFFFC700" Background="#FFFFC700"/>
                    <StackPanel Width="311" Margin="8,-7,0,0">
                        <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" />
                        <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}" />
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </phone:LongListSelector.ItemTemplate>
    </phone:LongListSelector>
</phone:PanoramaItem>

Could someone please explain briefly what the DataBindings is and how to use them (I have done some research). Could I for instance bind the LongListSelector to a list in IsolatedStorage?

I have create a ListBox before in another app, loading content from IsolatedStorage into it, but I don't know if this is the right approach. Right now the items in the LongListSelector has a yellow image right left to it - can i do the same if I'm loading the content programatically from IsolatedStorage?

I know this might be a couple or three questions, but I think they're fairly simple to answer for someone experienced.

Thanks!

Answer 1

Your LongListSelector has a number of items inside. They are added there through data binding by binding the ItemsSource to items which are a part of Items collection. This collection can be a List<T> or more often ObservableCollection<T> because that way, if properly implemented, the changes in ObservableCollection will reflect in your LongListSelector. The T is the type of your item - for example, a class called Book. This collection needs to be defined as a part of the DataContext object, which you set on the whole page or a part of page.

Now, as I mentioned, the Items collection is probably full of items - objects defined to have certain properties. In your case, those properties are LineOne and LineTwo, which are probably strings.

You cannot directly bind to items in isolated storage. You first need to load those items into memory. Let's assume you have a list of items serialized to JSON or XML format in your isolated storage, which is one popular way of keeping the list in isolated storage. You need to load them into a collection (deserialize) and then bind to LongListSelector. It is the right approach, yes.

The yellow image/rectangle/border defined on the left is static, but it can be there, of course. It will simply be rendered there as a part of every item you have in your LongListSelector and it will not depend on the object which you bind to.

I suggest you read the following articles/questions and answers which may explain the concept of binding to a list easier for you to understand:

• MSDN - Quickstart: Data binding to controls for Windows Phone
• Stack Overflow - WP8 working with XML and LongListSelector
• GeekChamp - The New LongListSelector control in Windows Phone 8 SDK in depth

Answer 2

Simplest explanation (overlysimplified!) is that data binding is binding a property of an object to another property a control above, there's:

 <TextBlock Text="{Binding LineOne}" ... />

That is functionally equivalent to something like this:

TextBlock t = new TextBlock();
SomeObject o = new SomeObject() { LineOne = "The value of line 1" };
t.Text = o.LineOne;
// and then a propertychange listener to update t.text if o.lineone ever changes
o.PropertyChanged += (s,e) => { if (e.PropertyName == 'LineOne') t.Text = o.LineOne; };

You can't bind directly to something in isolated storage, but you can have an object load its content from isolated storage, expose those items through an Items property and then set that as the data context of the LLS.

In cases like LongListSelector (or other ItemsControl types) the itemscontrol's ItemsSource property is bound to some collection of objects (like an ObservableCollection<T>, which makes its items update whenever the collection updates. And then a template inside the ItemsControl has bindings to the properties of the individual items in the collection.