<vm:MainPage_Model x:Name="MainVM" x:Key="DesignVM"/>
<CollectionViewSource x:Name="GroupData" x:Key="GroupData" IsSourceGrouped="True"  Source="{Binding StartCityGroup, Source={StaticResource DesignVM}}"/>

//将输入的数据源进行拼音分组，返回CollectionViewSource可以接受的数据结构public class AlphaKeyGroup<T>:List<T>{const string GlobeGroupKey = "?";public string Key { get; private set; }//public List<T> this { get; private set; }public AlphaKeyGroup(string key){Key = key;}private static List<AlphaKeyGroup<T>> CreateDefaultGroups(CharacterGroupings slg){List<AlphaKeyGroup<T>> list = new List<AlphaKeyGroup<T>>();foreach (CharacterGrouping cg in slg){if (cg.Label == "") continue;else if (cg.Label == "...") { list.Add(new AlphaKeyGroup<T>(GlobeGroupKey)); }elselist.Add(new AlphaKeyGroup<T>(cg.Label));}return list;}public static List<AlphaKeyGroup<T>> CreateGroups(IEnumerable<T> items, Func<T, string> keySelector, bool sort){CharacterGroupings slg = new CharacterGroupings();List<AlphaKeyGroup<T>> list = CreateDefaultGroups(slg);foreach (T item in items){int index = 0;string label = slg.Lookup(keySelector(item));index = list.FindIndex(alphagroupkey => (alphagroupkey.Key.Equals(label, StringComparison.CurrentCulture)));if (index > -1 && index < list.Count) list[index].Add(item);}if (sort){foreach (AlphaKeyGroup<T> group in list){group.Sort((c0, c1) => { return keySelector(c0).CompareTo(keySelector(c1)); });}}return list;}}

//这里的代码是MVVM－Sidekick框架自动生成的，主要就是第一行的定义代码public List<AlphaKeyGroup<City>> StartCityGroup{get { return _StartCityGroupLocator(this).Value; }set { _StartCityGroupLocator(this).SetValueAndTryNotify(value); }}#region Property List<AlphaKeyGroup<City>> StartCityGroup Setupprotected Property<List<AlphaKeyGroup<City>>> _StartCityGroup = new Property<List<AlphaKeyGroup<City>>> { LocatorFunc = _StartCityGroupLocator };static Func<BindableBase, ValueContainer<List<AlphaKeyGroup<City>>>> _StartCityGroupLocator = RegisterContainerLocator<List<AlphaKeyGroup<City>>>("StartCityGroup", model => model.Initialize("StartCityGroup", ref model._StartCityGroup, ref _StartCityGroupLocator, _StartCityGroupDefaultValueFactory));static Func<BindableBase, List<AlphaKeyGroup<City>>> _StartCityGroupDefaultValueFactory =model =>{var vm = CastToCurrentType(model);//TODO: Add the logic that produce default value from vm current status.return default(List<AlphaKeyGroup<City>>);};#endregion

//StartCity是List<City>类型的源数据集合
StartCityGroup = AlphaKeyGroup<City>.CreateGroups(StartCity, (City s) => { return s.Name; }, true);

<ListView Margin="15,10" x:Name="StartCityList" ItemsSource="{Binding Source={StaticResource GroupData}}"  Foreground="Black" Background="White" SelectionChanged="StartCityList_SelectionChanged" ><ListView.GroupStyle><GroupStyle HidesIfEmpty="True"><GroupStyle.HeaderTemplate><DataTemplate><Border Background="{StaticResource PhoneAccentBrush}" BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="2" Width="62" Height="62" Margin="0,0,18,0" HorizontalAlignment="Stretch"><TextBlock Text="{Binding Key}" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="48" Padding="6" FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Center"/></Border></DataTemplate></GroupStyle.HeaderTemplate></GroupStyle></ListView.GroupStyle><ListView.ItemTemplate><DataTemplate><StackPanel Orientation="Horizontal"><TextBlock Text="{Binding Name}" FontSize="20"/><TextBlock Margin="10,0,0,0" FontSize="20" Text="{Binding CityCode}"/></StackPanel></DataTemplate></ListView.ItemTemplate></ListView>

<SemanticZoom  Background="White" x:Name="semanticZoom" ViewChangeStarted="SemanticZoom_ViewChangeStarted"><SemanticZoom.ZoomedInView><ListView Margin="15,10" x:Name="StartCityList" ItemsSource="{Binding Source={StaticResource GroupData}}"  Foreground="Black" Background="White" SelectionChanged="StartCityList_SelectionChanged" ><ListView.GroupStyle><GroupStyle HidesIfEmpty="True"><GroupStyle.HeaderTemplate><DataTemplate><Border Background="{StaticResource PhoneAccentBrush}" BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="2" Width="62" Height="62" Margin="0,0,18,0" HorizontalAlignment="Stretch"><TextBlock Text="{Binding Key}" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="48" Padding="6" FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Center"/></Border></DataTemplate></GroupStyle.HeaderTemplate></GroupStyle></ListView.GroupStyle><ListView.ItemTemplate><DataTemplate><StackPanel Orientation="Horizontal"><TextBlock Text="{Binding Name}" FontSize="20"/><TextBlock Margin="10,0,0,0" FontSize="20" Text="{Binding CityCode}"/></StackPanel></DataTemplate></ListView.ItemTemplate></ListView></SemanticZoom.ZoomedInView><SemanticZoom.ZoomedOutView><!-- 缩放后的跳转界面 --><GridView x:Name="ZoomGridView"  ItemsSource="{Binding View.CollectionGroups ,Source={StaticResource GroupData}}" HorizontalAlignment="Center" Background="Gray" VerticalAlignment="Center"><GridView.ItemTemplate><DataTemplate><Border Background="White" ><Border Margin="2" Width="90" Height="90" HorizontalAlignment="Left" Background="{Binding Group.Count,Converter={StaticResource BackgroundConverter}}"><TextBlock Text="{Binding Group.Key}" Foreground="White" FontSize="48" Padding="6" HorizontalAlignment="Left" VerticalAlignment="Center"/></Border></Border></DataTemplate></GridView.ItemTemplate></GridView></SemanticZoom.ZoomedOutView></SemanticZoom>

class BackgroundConverter:IValueConverter{public object Convert(object value, Type targetType, object parameter, string language){if(value!=null){var count = int.Parse(value.ToString());if (count > 0)return new SolidColorBrush(Windows.UI.Colors.Blue);}return new SolidColorBrush(Windows.UI.Colors.Gray);}public object ConvertBack(object value, Type targetType, object parameter, string language){throw new NotImplementedException();}}