Windows 8 + VS 開發教學：SemanticZoom 縮放視圖實作

SemanticZoom 控制項支援 GridView 與 ListView 的縮放視圖切換，提供詳細資訊視圖與縮小索引視圖。需搭配 CollectionViewSource 進行資料分組綁定。本文提供 XAML 程式碼範例與屬性說明，示範如何建立 ZoomedInView 與 ZoomedOutView 雙視圖。

核心控制項與屬性

• SemanticZoom：包含 ZoomedInView (詳細視圖) 與 ZoomedOutView (索引視圖)。
• CollectionViewSource：資料來源，關鍵屬性 IsSourceGrouped="true"、ItemsPath 指定子項目路徑。

XAML 實作範例

<Grid.Resources>
    <CollectionViewSource x:Name="itemcollectSource" IsSourceGrouped="true" ItemsPath="ItemContent"/>
</Grid.Resources>

<SemanticZoom x:Name="semanticZoom" VerticalAlignment="Center">
    <SemanticZoom.ZoomedOutView>
        <GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Group.GroupTitle}" FontSize="24"/>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid ItemWidth="150" ItemHeight="75" MaximumRowsOrColumns="1" VerticalChildrenAlignment="Center"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>
    </SemanticZoom.ZoomedOutView>

    <SemanticZoom.ZoomedInView>
        <GridView Name="gv_Item" ItemsSource="{Binding Source={StaticResource itemcollectSource}}"
                  ScrollViewer.IsHorizontalScrollChainingEnabled="False" Margin="20,140,40,20" IsSwipeEnabled="True">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid Width="250" Height="200" Background="#33CCCCCC">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="110"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Margin="5,0,0,0" Source="{Binding ImageUrl}" Stretch="None"/>
                        <TextBlock Grid.Column="1" Margin="15,15,0,0" Text="{Binding txtTitle}" FontWeight="Bold" FontSize="16" TextWrapping="Wrap"/>
                        <TextBlock Grid.Column="1" Margin="15,40,0,0" Text="{Binding txtContent}" FontWeight="Light" FontSize="14" TextWrapping="Wrap"/>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="3"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="1,0,0,6"><Button Content="{Binding GroupTitle}"/></Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,50,0"/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>
    </SemanticZoom.ZoomedInView>
</SemanticZoom>

此範例展示分組資料在縮放視圖間的切換與呈現方式。