1，SemanticZoom 有兩個重要屬性 默認值ZoomedInView（不設置的話，默認顯示，包括分類名和分類成員）和ZoomedOutView(這個是縮小後的目錄，只要包括分類名，點擊跳到對應分類位置)。
2，綁定數據使用CollectionViewSource
要注意：1)IsSourceGrouped屬性一定要設置為true，2）ItemsPath設置為child的名字，3）ZoomedInView和CollectionViewSource的View屬性綁定，ZoomedOutView和View.CollectionGroups屬性綁定。
代碼如下：
CollectionViewSource ViewSource = new CollectionViewSource();
ViewSource.IsSourceGrouped = true;
ViewSource.ItemsPath = new PropertyPath("Datas");//對應Datas屬性
ViewSource.Source = GetItems();//所有的數據
// 綁定數據
ViewDetails.ItemsSource = ViewSource.View; // 全部數據
ViewSummary.ItemsSource = ViewSource.View.CollectionGroups; // 關聯的組數據集合
///綁定的對象類
public class Source
{
private string _Title;
public string Title
{
get { return _Title; }
set { _Title = value; }
}
private List<Data> _Datas;//不一定是Data類，可以是別的類
public List<Data> Datas
{
get { return _Datas; }
set { _Datas = value; }
}
}
public class Data
{
private string _Name;
public string Name
{
get { return _Name; }
set { _Name = value; }
}
}
3，模版的綁定問題。
ZoomedOutView可以簡單的設置ItemTemplate模版即可，但是要注意，綁定的對象不是原來的值了。
不如原來的綁定為 {Binding Title}現在應該改為 {Binding Group.Title}，Group對象為View（View.CollectionGroups）自動生成的對象。
ZoomedInView的子模版即ItemTemplate同ZoomedOutView一樣。主要的不同在於GridView.GroupStyle。
GridView.GroupStyle有三個重要屬性：HeaderTemplate(即分類名{Binding Title}不用加 Group)，Panel（設置子元素的排布），ContainerStyle（一個分類對應的模版,可以不自定義）
ContainerStyle必須包含兩個重要的對象：header(下面的ContentPresenter )和items(ItemsControl 注意它的綁定{Binding GroupItems}這個是寫死的由View決定)。
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
<ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}"/>
整個模版xaml如下,注意標紅的地方：
<SemanticZoom HorizontalAlignment="Left" Margin="0" VerticalAlignment="Center" Width="auto" Height="auto">
<SemanticZoom.ZoomedInView>
<GridView x:Name="ViewDetails" Width="1920" Height="1080" ScrollViewer.IsHorizontalScrollChainingEnabled="False" ScrollViewer.IsVerticalScrollChainingEnabled="False">
<!--分組後，details 的數據模板-->
<GridView.ItemTemplate>
<DataTemplate>
<Grid Background="#022a56" Width="200" Height="65">
<TextBlock TextWrapping="Wrap" FontSize="16" Foreground="Red" Padding="5 0" HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding Name}"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<!--分組的樣式-->
<GridView.GroupStyle>
<GroupStyle>
<!--分組後，header 的數據模板-->
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" FontSize="26.67" Height="30" Foreground="Yellow" Margin="0 0 0 20" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
<!--分組後，每組數據（包括 header 和 details）的樣式-->
<GroupStyle.ContainerStyle>
<Style TargetType="GroupItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupItem">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
<ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" Grid.Row="1"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
<!--分組後，每組數據（包括 header 和 details）的 panel-->
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" Margin="0 0 50 0" ItemHeight="75"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
<!--整體數據（一組數據算一個元素）的 panel-->
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<GridView x:Name="ViewSummary" ScrollViewer.IsHorizontalScrollChainingEnabled="False" ScrollViewer.IsVerticalScrollChainingEnabled="False">
<!--分組後，details 的數據模板-->
<GridView.ItemTemplate>
<DataTemplate>
<Grid Background="#022a56" Width="200" Height="65">
<TextBlock TextWrapping="Wrap" FontSize="16" Foreground="Red" Padding="5 0" HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding Group.Title}"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
