The LongListSelector control is shown in the LongListSelectorSample.xaml file. This page implements the Pivot control you saw in the previous recipe. In the first part of the LongListSelectorSample.xaml code, the resources used to populate the LongListSelector control are defined. Data is taken from reading some external source text files and using classes contained in the Data folder of the project. As shown in the following code, the data is movie resources.
. . .
<phone:PhoneApplicationPage.Resources>
<!-- MOVIE RESOURCES -->
<!-- The template for the list header. This will scroll as a part of the list. -->
<DataTemplate x:Key="movieListHeader">
<TextBlock Text="new releases" Style="{StaticResource PhoneTextTitle1Style}"/>
</DataTemplate>
<!-- The group header template, for groups in the main list -->
<DataTemplate x:Key="movieGroupHeader">
<Border Background="{StaticResource PhoneAccentBrush}"
Padding="{StaticResource PhoneTouchTargetOverhang}">
<TextBlock Text="{Binding Key}"
Style="{StaticResource PhoneTextLargeStyle}"/>
</Border>
</DataTemplate>
<!-- The template for groups when they are items in the "jump list". Not setting -->
<!-- the GroupItemTemplate property will disable "jump list" functionality. -->
<DataTemplate x:Key="groupItemHeader">
<Border Background="{StaticResource PhoneAccentBrush}"
Margin="{StaticResource PhoneTouchTargetOverhang}"
Padding="{StaticResource PhoneTouchTargetOverhang}">
<TextBlock Text="{Binding Key}"
Style="{StaticResource PhoneTextLargeStyle}"/>
</Border>
</DataTemplate>
<!-- The template for movie items -->
<DataTemplate x:Key="movieItemTemplate">
<Grid Margin="{StaticResource PhoneTouchTargetOverhang}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Width="110" Height="150" Source="{Binding ImageUrl}"
VerticalAlignment="Top"/>
<StackPanel Grid.Column="1" VerticalAlignment="Top">
<TextBlock Text="{Binding Title}"
Style="{StaticResource PhoneTextLargeStyle}"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"
TextWrapping="Wrap" Margin="12,-12,12,6"/>
<TextBlock Text="{Binding Stars}"
Style="{StaticResource PhoneTextNormalStyle}"
TextWrapping="Wrap"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
<TextBlock Text="{Binding Information}"
Style="{StaticResource PhoneTextSmallStyle}"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
<TextBlock Text="{Binding Description}"
Style="{StaticResource PhoneTextNormalStyle}"
TextWrapping="Wrap"
FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
</StackPanel>
</Grid>
</DataTemplate>
<data:MoviesByCategory x:Key="movies"/>
<data:MoreCommand x:Key="moreCommand"/>
<!-- BUDDIES RESOURCES -->
<data:PeopleByFirstName x:Key="buddies"/>
<data:GroupToBrushValueConverter x:Key="groupBrush"/>
</phone:PhoneApplicationPage.Resources>
In the first Pivot item, the basic version of the LongListSelector is used to show movies separated by categories. These data are retrieved by using a LINQ query that is assigned to the ItemSource property in the code. Each LongListSelector section is associated to the resources defined in the preceding code. The ListHeaderTemplate is used to add some header text to the list. The GroupHeaderTemplate and GroupItemTemplate are used when a grouping operation is accomplished on the data. Finally, ItemTemplate is the template used to show items.
<Grid x:Name="LayoutRoot" Background="Transparent">
<controls:Pivot Title="LONGLISTSELECTOR SAMPLES">
<controls:PivotItem Header="linq">
<toolkit:LongListSelector x:Name="linqMovies" Background="Transparent"
ListHeaderTemplate="{StaticResource movieListHeader}"
GroupHeaderTemplate="{StaticResource movieGroupHeader}"
GroupItemTemplate="{StaticResource groupItemHeader}"
ItemTemplate="{StaticResource movieItemTemplate}">
</toolkit:LongListSelector>
</controls:PivotItem>
The next Pivot item provides a LongListSelector that has a GroupFooterTemplate defined to add a button that shows other results when pressed.
<controls:PivotItem Header="code">
<toolkit:LongListSelector x:Name="codeMovies" Background="Transparent"
ItemsSource="{StaticResource movies}"
ListHeaderTemplate="{StaticResource movieListHeader}"
GroupHeaderTemplate="{StaticResource movieGroupHeader}"
GroupItemTemplate="{StaticResource groupItemHeader}"
ItemTemplate="{StaticResource movieItemTemplate}">
<!-- The group footer template, for groups in the main list -->
<toolkit:LongListSelector.GroupFooterTemplate>
<DataTemplate>
<local:CommandButton DataContext="{Binding}"
Content="{Binding GetMore}"
Command="{StaticResource moreCommand}"
CommandParameter="{Binding}"/>
</DataTemplate>
</toolkit:LongListSelector.GroupFooterTemplate>
</toolkit:LongListSelector>
</controls:PivotItem>
The third Pivot item contains a LongListSelector control in which each section is defined by a DataTemplate
different from the one defined in the resources. This is because the
information to show is different; in this case, a list of people is
retrieved by using the PeopleByFirstName class. The LongListSelector provides the item's selection too. In the code behind the XAML file, in the class's constructor, the SelectionChanged event is hooked and the personal details are shown on a different page.
<controls:PivotItem Header="buddies">
<toolkit:LongListSelector x:Name="buddies" Background="Transparent"
ItemsSource="{StaticResource buddies}">
<toolkit:LongListSelector.GroupItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</toolkit:LongListSelector.GroupItemsPanel>
<toolkit:LongListSelector.GroupItemTemplate>
<DataTemplate>
<Border
Background="{Binding Converter={StaticResource groupBrush}}"
Width="99" Height="99" Margin="6"
IsHitTestVisible="{Binding HasItems}">
<TextBlock Text="{Binding Key}"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="36"
Margin="{StaticResource PhoneTouchTargetOverhang}"
Foreground="{StaticResource PhoneForegroundBrush}"
VerticalAlignment="Bottom"/>
</Border>
</DataTemplate>
</toolkit:LongListSelector.GroupItemTemplate>
<toolkit:LongListSelector.GroupHeaderTemplate>
<DataTemplate>
<Border Background="Transparent">
<Border Background="{StaticResource PhoneAccentBrush}"
Width="75" Height="75" HorizontalAlignment="Left">
<TextBlock Text="{Binding Key}"
Foreground="{StaticResource PhoneForegroundBrush}"
Style="{StaticResource PhoneTextExtraLargeStyle}"
VerticalAlignment="Bottom"/>
</Border>
</Border>
</DataTemplate>
</toolkit:LongListSelector.GroupHeaderTemplate>
<toolkit:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid Margin="{StaticResource PhoneTouchTargetOverhang}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Width="110" Height="150" Source="{Binding ImageUrl}"
VerticalAlignment="Top"/>
<StackPanel Grid.Column="1" VerticalAlignment="Top">
<TextBlock Text="{Binding FullName}"
Style="{StaticResource PhoneTextLargeStyle}"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"
Margin="12,-12,12,6"/>
<TextBlock Text="{Binding Email}"
Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Mobile:"
Style="{StaticResource PhoneTextSmallStyle}"/>
<TextBlock Text="{Binding Mobile}"
Style="{StaticResource PhoneTextSmallStyle}"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Home:"
Style="{StaticResource PhoneTextSmallStyle}"/>
<TextBlock Text="{Binding Home}"
Style="{StaticResource PhoneTextSmallStyle}"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</toolkit:LongListSelector.ItemTemplate>
</toolkit:LongListSelector>
</controls:PivotItem>
</controls:Pivot>
</Grid>
. . .
The PerformanceProgressBar control is defined in the PerformanceProgressBarSample.xaml file. This is an enhanced version of the ProgressBar control because it uses the compositor thread. Its usage is very simple; you can specify the PerformanceProgressBar tag as shown in the following code.
. . .
<toolkit:PerformanceProgressBar
VerticalAlignment="Top"
x:Name="_performanceProgressBar"/>
. . .
This progress bar is activated by setting its IsIndeterminate property to true, and deactivated by setting it to false.
In this example, this property is both activated and deactivated by a
check box that uses a Silverlight binding feature. It binds its own IsChecked Boolean property to the IsIndeterminate property so that when the check box is selected, the progress bar appears at the top of the screen.
. . .
<CheckBox Content="Show performance progress bar"
IsChecked="{Binding IsIndeterminate,
ElementName=_performanceProgressBar, Mode=TwoWay}"/>
. . .
The ToggleSwitch control is shown in the ToggleSwitchSample.xaml file. This control is a switch that assumes two states: on and off. It provides the Header
property used to show text associated with the control. When you need
to show more text or other controls near the switch control, you can
define how the template should look by using both the HeaderTemplate and the ContentTemplate.
<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<toolkit:ToggleSwitch Header="Wi Fi networking"/>
<toolkit:ToggleSwitch Header="Set automatically"/>
<toolkit:ToggleSwitch Header="5:45 AM">
<toolkit:ToggleSwitch.HeaderTemplate>
<DataTemplate>
<ContentControl FontSize="{StaticResource PhoneFontSizeLarge}"
Foreground="{StaticResource PhoneForegroundBrush}"
Content="{Binding}"/>
</DataTemplate>
</toolkit:ToggleSwitch.HeaderTemplate>
<toolkit:ToggleSwitch.ContentTemplate>
<DataTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Alarm: "
FontSize="{StaticResource PhoneFontSizeSmall}"/>
<ContentControl HorizontalAlignment="Left"
FontSize="{StaticResource PhoneFontSizeSmall}"
Content="{Binding}"/>
</StackPanel>
<TextBlock Text="every schoolday"
FontSize="{StaticResource PhoneFontSizeSmall}"
Foreground="{StaticResource PhoneSubtleBrush}"/>
</StackPanel>
</DataTemplate>
</toolkit:ToggleSwitch.ContentTemplate>
</toolkit:ToggleSwitch>
</StackPanel>
