Windows 8 Store Apps学习（13） SemanticZoom控件

Windows 8 Store Apps学习（13） SemanticZoom控件2013-12-04 cnblogs webabcd介绍
重新想象 Windows 8 Store Apps 之 SemanticZoom
演示 SemanticZoom 的应用
通过 ISemanticZoomInformation 接口实现自定义 SemanticZoom 的 View
示例
1、演示 SemanticZoom 的应用
Index.xaml
<Pagex:Class="XamlDemo.Index"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:XamlDemo"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"><Grid Background="Transparent"><SemanticZoom x:Name="semanticZoom" HorizontalAlignment="Left"><！--放大后的视图，详细数据--><SemanticZoom.ZoomedInView><GridView x:Name="gridViewDetails" SelectionMode="None" IsSwipeEnabled="false" Padding="120 0 0 0"><！--分组后，details 的数据模板--><GridView.ItemTemplate><DataTemplate><Grid Background="#022a56" Width="200" Height="65" Tapped="Grid_Tapped_1" Tag="{Binding}"><TextBlock TextWrapping="Wrap" FontSize="14.667" Foreground="#ffffff" Padding="5 0" HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding Title}"/></Grid></DataTemplate></GridView.ItemTemplate><！--分组的样式--><GridView.GroupStyle><GroupStyle><！--分组后，header 的数据模板--><GroupStyle.HeaderTemplate><DataTemplate><TextBlock Text="{Binding Title}" FontSize="26.67" Height="30" 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}"/><！--每组数据的 details 数据源来自 ICollectionViewGroup.GroupItems--><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="Vertical" Margin="0 0 50 0" ItemHeight="75" Loaded="VariableSizedWrapGrid_Loaded_1" /></ItemsPanelTemplate></GroupStyle.Panel></GroupStyle></GridView.GroupStyle><！--整体数据（一组数据算一个元素）的 panel--><GridView.ItemsPanel><ItemsPanelTemplate><StackPanel Orientation="Horizontal" /></ItemsPanelTemplate></GridView.ItemsPanel></GridView></SemanticZoom.ZoomedInView><！--缩小后的视图，概述数据--><SemanticZoom.ZoomedOutView><GridView Name="gridViewSummary" HorizontalAlignment="Left" Padding="120 0 0 0"><GridView.ItemTemplate><DataTemplate><Grid Background="#022a56" Width="100" Height="100"><！--每组数据的 header 数据源来自 ICollectionViewGroup.Group--><TextBlock Text="{Binding Group.Title}" Foreground="#ffffff" Opacity="0.9" FontSize="14.667" Margin="5" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" /></Grid></DataTemplate></GridView.ItemTemplate><GridView.ItemsPanel><ItemsPanelTemplate><WrapGrid MaximumRowsOrColumns="8" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" /></ItemsPanelTemplate></GridView.ItemsPanel><GridView.ItemContainerStyle><Style TargetType="GridViewItem"><Setter Property="Margin" Value="5 5 5 30" /><Setter Property="HorizontalContentAlignment" Value="Center" /><Setter Property="VerticalContentAlignment" Value="Center" /></Style></GridView.ItemContainerStyle></GridView></SemanticZoom.ZoomedOutView></SemanticZoom></Grid></Page>