|
In this article we will discuss about Jumplist using LongListSelector of Silverlight Windows Phone toolkit. LongListSelector is basically advanced listbox which supports flat lists and grouped lists.
Let's write some code:
Download Silverlight Windows Phone Toolkit
Step 1: Create a silverlight for Windows Phone project.
Step 2: Add reference of Microsoft.Phone.Controls.Toolkit.dll
Step 3: Add namespace of Microsoft.Phone.Controls.Toolkit in MainPage.xaml.
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
Step 4: Add below code above Grid LayoutRoot. Below code is to create DataTemplate of group header, jumpListItem and group item template.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="groupHeaderTemplate">
<Grid Margin="12,0,0,0">
<Grid Width="60" Height="60" HorizontalAlignment="Left">
<Border Background="Blue">
<TextBlock Margin="10,0,1,5" Foreground="Black" Style="{StaticResource PhoneTextLargeStyle}" Text="{Binding Title}" TextAlignment="Left" VerticalAlignment="Center"/>
</Border>
</Grid>
</Grid>
</DataTemplate>
<DataTemplate x:Key="jumpListItemTemplate">
<Border Background="{Binding GroupBackgroundBrush}" Margin="0">
<TextBlock Text="{Binding Name}" Tap="tap_JumpListItem" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="24" Height="30" Margin="{StaticResource PhoneTouchTargetOverhang}" Foreground="{StaticResource PhoneForegroundBrush}" VerticalAlignment="Bottom"/>
</Border>
</DataTemplate>
<DataTemplate x:Key="groupItemTemplate" >
<Border Background="Blue" Width="60" Height="60" Margin="6">
<TextBlock Text="{Binding Title}" Margin="10,0,1,5" Foreground="Black" Style="{StaticResource PhoneTextLargeStyle}" TextAlignment="Left" VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
Step 5: Add LongListSelector inside ContentPanel of Grid. I have used wrappanel to arrange the grouplist in proper order.
<toolkit:LongListSelector x:Name="citiesListGropus" Background="Transparent" ItemTemplate="{StaticResource jumpListItemTemplate}" GroupHeaderTemplate="{StaticResource groupHeaderTemplate}" GroupItemTemplate="{StaticResource groupItemTemplate}" >
<toolkit:LongListSelector.GroupItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel/>
</ItemsPanelTemplate>
</toolkit:LongListSelector.GroupItemsPanel>
</toolkit:LongListSelector>
Step 6: Create a JumpDemo class.
public class JumpDemo
{
public string Name
{
get;
set;
}
public string GroupBy
{
get;
set;
}
}
Step 7: Create a Group class like below which will arrange the list in groups. Grouping of LongListSelector will only work if IsFlatList property is set to false which is by default.
public class Group<T> : IEnumerable<T>
{
public Group(string name, IEnumerable<T> items)
{
this.Title = name;
this.Items = new List<T>(items);
}
public override bool Equals(object obj)
{
Group<T> that = obj as Group<T>;
return (that != null) && (this.Title.Equals(that.Title));
}
public string Title
{
get;
set;
}
public IList<T> Items
{
get;
set;
}
#region IEnumerable<T> Members
public IEnumerator<T> GetEnumerator()
{
return this.Items.GetEnumerator();
}
#endregion
#region IEnumerable Members
System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
{
return this.Items.GetEnumerator();
}
#endregion
}
Step 8: Now place below code in the constructor of MainPage.xaml.cs to bind it to LongListSelector.
List <JumpDemo> source = new List<JumpDemo>();
source.Add(new JumpDemo() { Name = "A-Name 1", GroupBy = "A" });
source.Add(new JumpDemo() { Name = "A-Name 2", GroupBy = "A" });
source.Add(new JumpDemo() { Name = "A-Name 3", GroupBy = "A" });
source.Add(new JumpDemo() { Name = "A-Name 4", GroupBy = "A" });
source.Add(new JumpDemo() { Name = "A-Name 5", GroupBy = "A" });
source.Add(new JumpDemo() { Name = "B-Name 1", GroupBy = "B" });
source.Add(new JumpDemo() { Name = "B-Name 2", GroupBy = "B" });
source.Add(new JumpDemo() { Name = "C-Name 1", GroupBy = "C" });
source.Add(new JumpDemo() { Name = "C-Name 2", GroupBy = "C" });
source.Add(new JumpDemo() { Name = "C-Name 3", GroupBy = "C" });
source.Add(new JumpDemo() { Name = "C-Name 4", GroupBy = "C" });
source.Add(new JumpDemo() { Name = "D-Name 1", GroupBy = "D" });
source.Add(new JumpDemo() { Name = "D-Name 2", GroupBy = "D" });
source.Add(new JumpDemo() { Name = "D-Name 3", GroupBy = "D" });
source.Add(new JumpDemo() { Name = "E-Name 1", GroupBy = "E" });
source.Add(new JumpDemo() { Name = "E-Name 2", GroupBy = "E" });
source.Add(new JumpDemo() { Name = "F-Name 2", GroupBy = "F" });
source.Add(new JumpDemo() { Name = "G-Name 2", GroupBy = "G" });
source.Add(new JumpDemo() { Name = "G-Name 2", GroupBy = "G" });
Group the item list and then bind it to LongListSelector.
var groupBy = from jumpdemo in source
group jumpdemo by jumpdemo.GroupBy into c
orderby c.Key
select new Group<JumpDemo>(c.Key, c);
this.citiesListGropus.ItemsSource = groupBy;
Step 9: Now add tap_JumpListItem method which will be triggered on tap of TextBlock which is used to display items of LongListSelector.
void tap_JumpListItem(object sender, System.Windows.Input.GestureEventArgs e)
{
TextBlock hb = sender as TextBlock;
MessageBox.Show(hb.Text + " " + "tapped");
}
Step 10: Now run the application and you will get screen like shown below.
On tap of alphabets with blue background you will get screen like below.
This ends the article of JumpList using LongListSelector in Windows Phone
|