四十一、缩放试图

参照连接：http://blog.csdn.net/tcjiaan/article/details/8120584

参照官方实例：TravelJourney-语义缩放

1.1            语义缩放的Markup

 

语义缩放的并不是UI的放大与缩小，具体的含义请看：http://msdn.microsoft.com/en-us/library/windows/apps/hh465319.aspx

语义缩放的相关的XAML的markup为SemanticZoom，其中ZoomIn为默认显示，ZoomOut为缩小显示

             

   

   

<SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom" Grid.Row =”1”>

   

 

   

    <SemanticZoom.ZoomedOutView>

   

            <!-- Put the     GridView for the zoomed out view here. -->  

   

    </SemanticZoom.ZoomedOutView>

   

 

   

    <SemanticZoom.ZoomedInView>

   

            <!-- Put the     GridView for the zoomed in view here. -->          

   

    </SemanticZoom.ZoomedInView>

   

 

   

</SemanticZoom>

   

 

   

 

   

   

                       

 

1.2            实现语义缩放

我们将ZoomOut与ZoomIn的视图设计分别放入上面的Markup里面, 就能实现语义缩放。对于我们的project而言，我们需要在缩小后能够让图标变小，并且group的header能显示有多少张图片。

-         1、在Grid.RowDefinitions 标签之后添加上面表格中的框架

-         2、将原来的GridView标签放入ZoomIn中

-         3、在ZoomOut中建立新的View（注意要将SemanticZoom设置在Grid的第2行，也就是Grid.Row =1）

• 缩小图片的大小，并使他们可以竖排
• 在这里我们在groupheader中加入了一个新的textblock用来显示图片的数量。为此，我们需要在SampleDataGroup类中加入一个新的Property来实现绑定 （第4步）

 

4、在SampleDataSource类中的SampleDataGroup类中加入一个新的方法。

             

   

   

        public int GroupItemCount

   

        {

   

            get { return _items.Count(); }

   

        }

   

   

 

             

   

   

<SemanticZoom     Grid.Row="1">

   

            <SemanticZoom.ZoomedOutView>

   

                <GridView

   

                    x:Name="groupItemsGridView"

   

                    AutomationProperties.AutomationId="ItemGridView"

   

                    AutomationProperties.Name="Grouped Items"

   

                    Grid.Row="1"

   

                    Margin="0,-3,0,0"

   

                    Padding="116,0,40,46"

   

                    ItemsSource="{Binding     Source={StaticResource groupedItemsViewSource}}"

   

                    ItemTemplate="{StaticResource Standard250x250ItemTemplate}"

   

                    SelectionMode="None"

   

                    IsItemClickEnabled="True"

   

                    ItemClick="ItemView_ItemClick">

   

 

   

                    <GridView.ItemsPanel>

   

                        <ItemsPanelTemplate>

   

                            <VirtualizingStackPanel Orientation="Horizontal"/>

   

                        </ItemsPanelTemplate>

   

                    </GridView.ItemsPanel>

   

                    <GridView.GroupStyle>

   

                        <GroupStyle>

   

                            <GroupStyle.HeaderTemplate>

   

                                <DataTemplate>

   

                                    <StackPanel     Margin="1,0,0,6" Orientation="Horizontal" HorizontalAlignment="Stretch">

   

                                        <Button

   

                                            AutomationProperties.Name="Group Title"

   

                                            Content="{Binding Title}"

   

                                            Click="Header_Click"

   

                                            Style="{StaticResource TextButtonStyle}"/>

   

                                        <TextBlock     Text="{Binding GroupItemCount}"

   

                                                       HorizontalAlignment="Right"

   

                                                   VerticalAlignment="Center"

   

                                                       FontSize="24"/>

   

                                    </StackPanel>

   

                                </DataTemplate>

   

                            </GroupStyle.HeaderTemplate>

   

                            <GroupStyle.Panel>

   

                                <ItemsPanelTemplate>

   

                                    <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>

   

                                </ItemsPanelTemplate>

   

                            </GroupStyle.Panel>

   

                        </GroupStyle>

   

                    </GridView.GroupStyle>

   

                </GridView>

   

            </SemanticZoom.ZoomedOutView>

   

            <SemanticZoom.ZoomedInView>

   

                <!-- Horizontal scrolling grid used in most view     states -->

   

                <GridView

   

                    x:Name="groupGridView"

   

                    AutomationProperties.AutomationId="ItemGridView"

   

                    AutomationProperties.Name="Grouped Items"

   

                    Grid.RowSpan="2"

   

                    Padding="116,137,40,46"

   

                    ItemsSource="{Binding     Source={StaticResource groupedItemsViewSource}}"

   

                    ItemTemplate="{StaticResource Standard350x350ItemTemplate}"

   

                    SelectionMode="None"

   

                    IsSwipeEnabled="false"

   

                    IsItemClickEnabled="True"

   

                    ItemClick="ItemView_ItemClick">

   

 

   

 

   

                    <GridView.ItemsPanel>

   

                        <ItemsPanelTemplate>

   

                            <VirtualizingStackPanel Orientation="Horizontal"/>

   

                        </ItemsPanelTemplate>

   

                    </GridView.ItemsPanel>

   

                    <GridView.GroupStyle>

   

                        <GroupStyle>

   

                            <GroupStyle.HeaderTemplate>

   

                                <DataTemplate>

   

                                    <Grid     Margin="1,0,0,6">

   

                                        <Button

   

                                            AutomationProperties.Name="Group Title"

   

                                            Click="Header_Click"

   

                                            Style="{StaticResource TextPrimaryButtonStyle}" >

   

                                                <StackPanel     Orientation="Horizontal">

   

                                                    <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />

   

                                                <TextBlock Text="{StaticResource ChevronGlyph}"     FontFamily="Segoe UI     Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>

   

                                                </StackPanel>

   

                                        </Button>

   

                                    </Grid>

   

                                </DataTemplate>

   

                            </GroupStyle.HeaderTemplate>

   

                            <GroupStyle.Panel>

   

                                <ItemsPanelTemplate>

   

                                    <VariableSizedWrapGrid Orientation="Horizontal" Margin="0,0,80,0"/>

   

                                </ItemsPanelTemplate>

   

                            </GroupStyle.Panel>

   

                        </GroupStyle>

   

                    </GridView.GroupStyle>

   

                </GridView>

   

            </SemanticZoom.ZoomedInView>

   

        </SemanticZoom>