Windows 8 Store Apps學習(13) SemanticZoom控制項

介紹

重新想象 Windows 8 Store Apps 之 SemanticZoom

示範 SemanticZoom 的應用

通過 ISemanticZoomInformation 介面實現自訂 SemanticZoom 的 View

樣本

1、示範 SemanticZoom 的應用

Index.xaml

<Page    x: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>