Windows 8實用竅門系列：22.Windows 8 的SemanticZoom縮放視圖

　　在Windows 8中SemanticZoom縮放視圖支援對GridView和ListView控制項的視圖效果進行縮放，它提供一個詳細資料檢視(ZoomedInView)以讓使用者查看詳細資料，另外提供一個縮小索引檢視表(ZoomedOutView)讓使用者快速定位想要查看資訊的大概範圍。

　　一.想要實現這種效果我們需要使用SemanticZoom控制項和CollectionViewSource控制項配合使用：

　　　　SemanticZoom控制項:

    <SemanticZoom.ZoomedOutView>       <!--此處填充縮小索引檢視表的GridView,一般情況下綁定Group.Title-->    </SemanticZoom.ZoomedOutView>    <SemanticZoom.ZoomedInView>        <!--此處填充平常普通的GridView,顯示詳細資料-->    </SemanticZoom.ZoomedInView>

　　　　CollectionViewSource是一個和前台UI控制項進行互動的集合源。

　　　　　　Source:來源資料綁定屬性

　　　　　　IsSourceGrouped：是否允許分組

　　　　　　View:擷取當前與 CollectionViewSource 的此執行個體關聯的視圖對象

　　　　　　 View.CollectionGroups：返回該視圖關聯的所有集合組。

　　二.現在通過一個執行個體來看如何使用SemanticZoom實現縮放視圖，本執行個體接前一篇文章執行個體。

　　　　1.前台設定CollectionViewSource控制項

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

　　　　2.前台繪製ZoomedInView視圖和ZoomedOutView視圖GridView

        <SemanticZoom x:Name="semanticZoom" VerticalAlignment="Center">            <SemanticZoom.ZoomedOutView>                <GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False" >                    <GridView.ItemTemplate>                        <DataTemplate>                            <!--注意此處綁定的是實體集的GroupTitle屬性-->                            <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.ItemContainerStyle>                        <Style TargetType="GridViewItem">                            <Setter Property="Margin" Value="4" />                            <Setter Property="Padding" Value="10" />                            <Setter Property="BorderBrush" Value="Gray" />                            <Setter Property="BorderThickness" Value="1" />                            <Setter Property="HorizontalContentAlignment" Value="Center" />                            <Setter Property="VerticalContentAlignment" Value="Center" />                        </Style>                    </GridView.ItemContainerStyle>                </GridView>            </SemanticZoom.ZoomedOutView>            <SemanticZoom.ZoomedInView>                <!--設定ScrollViewer.IsHorizontalScrollChainingEnabled="False"-->                <GridView Name="gv_Item" ItemsSource="{Binding Source={StaticResource itemcollectSource}}"                   SelectedItem="{Binding ItemContent, Mode=TwoWay}" 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>                                    <ColumnDefinition></ColumnDefinition>                                </Grid.ColumnDefinitions>                                <Image Grid.Column="0" Margin="5,0,0,0" Source="{Binding ImageUrl}" Stretch="None"></Image>                                <TextBlock Grid.Column="1" Margin="15,15,0,0" Foreground="Black" Text="{Binding txtTitle}"                                    FontWeight="Bold" FontSize="16" TextWrapping="Wrap"/>                                <TextBlock Grid.Column="1" Margin="15,40,0,0" Foreground="Black" 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 AutomationProperties.Name="組名稱" 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>

　　　　3.設定後台資料來源和關聯ZoomedOutView視圖資料

        public MainPage()        {            this.InitializeComponent();            this.itemcollectSource.Source = new ViewModelData().Sourcedata;            //此處需要將ZoomedOutView的視圖資料結合關聯ZoomedInView的集合組            (semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = itemcollectSource.View.CollectionGroups;        }

　　三.我們看如下，如需源碼請點擊 win8Gridview3.rar 下載。

　　　　ZoomedOutView

　　　　ZoomedInView