Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Alphabetic JumpList contact names
<phone:LongListSelector
ItemsSource="{Binding}"
IsGroupingEnabled="True"
HideEmptyGroups="True"
LayoutMode="List"
toolkit:TiltEffect.IsTiltEnabled="True">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Grid Background="#333" Margin="12,0,0,12">
<Image Source="{Binding Contact, Converter={StaticResource Picture}}"
Width="62" Height="62" Stretch="Fill" />
</Grid>
<TextBlock Text="{Binding Name}" VerticalAlignment="Center"
Style="{StaticResource PhoneTextLargeStyle}"
FontSize="37.333" Margin="18,-19,12,0"/>
</StackPanel>
</Grid>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
<phone:LongListSelector.JumpListStyle>
<Style TargetType="phone:LongListSelector">
<Setter Property="GridCellSize" Value="111,111"/>
<Setter Property="LayoutMode" Value="Grid" />
<Setter Property="Margin" Value="24,19,0,0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Width" Value="480" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="{Binding Converter={StaticResource BackgroundConverter}}"
Width="111" Height="111" Margin="0,0,12,12" >
<TextBlock Text="{Binding Key}"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="48" Padding="6,0,6,12" Margin="6,31,0,0"
Foreground="White"
VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:LongListSelector.JumpListStyle>
<phone:LongListSelector.GroupHeaderTemplate>
<DataTemplate>
<Border Background="Transparent" Padding="12,0,0,12">
<Border Background="{StaticResource PhoneAccentBrush}"
BorderBrush="{StaticResource PhoneAccentBrush}"
BorderThickness="1" Width="62" Height="62"
Margin="0,0,18,0" HorizontalAlignment="Left">
<TextBlock Text="{Binding Key}"
Foreground="{StaticResource PhoneForegroundBrush}"
FontSize="48" Padding="6" Margin="0,-5,0,0"
FontFamily="{StaticResource PhoneFontFamilySemiLight}"
HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Border>
</Border>
</DataTemplate>
</phone:LongListSelector.GroupHeaderTemplate>
</phone:LongListSelector>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.