Search code examples
c#windows-phone-8windows-phoneisolatedstoragelonglistselector

Set LongListSelector

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!

Solution

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