Getting Started with Windows 8 Development (22) Windows 8 Semanticzoom zoom view

The Semanticzoom zoom view in Windows 8 supports scaling the view effects of the GridView and ListView controls, providing a detailed view (Zoomedinview) to allow the user to view the details and provide a smaller indexed view ( Zoomedoutview) lets users quickly locate the approximate range of information they want to see.

A. To achieve this effect we need to use the Semanticzoom control and the CollectionViewSource control to work together:

Semanticzoom Control:

<SemanticZoom.ZoomedOutView>
       <!--Here populate the GridView that narrows the indexed view, and generally bind group.title-->
    </ semanticzoom.zoomedoutview>
    <SemanticZoom.ZoomedInView>
        <!--populate the common GridView with details-->
    </SemanticZoom.ZoomedInView>

CollectionViewSource is a collection source that interacts with the foreground UI controls.

Source: Data Binding properties

Issourcegrouped: whether to allow grouping

View: Gets the Views object that is currently associated with this instance of CollectionViewSource

View.collectiongroups: Returns all the collection groups associated with this view.

Two. Now through an example to see how to use Semanticzoom to implement the zoom view, this example will be followed by an example of the previous story.

1. Foreground Settings CollectionViewSource control

<Grid.Resources>
            <collectionviewsource x:name= "Itemcollectsource" issourcegrouped= "true" 

Itemspath= "Itemcontent"/>
        </Grid.Resources>

2. Foreground draw Zoomedinview View and Zoomedoutview view GridView

<semanticzoom x:name= "Semanticzoom" verticalalignment= "Center" > <SemanticZoom.ZoomedOutView> <gridview scrollviewer.ishorizontalscrollchainingenabled= "False" > <gridview.item Template> <DataTemplate> <!--Note that the GroupTitle property of the entity set is bound here
                            ;
                    <textblock text= "{Binding group.grouptitle}" fontsize= "/>" </DataTemplate> </GridView.ItemTemplate> <GridView.ItemsPanel> <item spaneltemplate> <wrapgrid itemwidth= "itemheight=" maximumrowsorcolumns= "1" Verti calchildrenalignment= "Center"/> </ItemsPanelTemplate> </gridview. itemspanel> <GridView.ItemContainerStyle> <style targettype="Gridviewitem" > <setter property= "Margin" value= "4"/> &L T Setter property= "Padding" value= "ten"/> <setter property= "BorderBrush" value= "Gray"/&gt
                            ; <setter property= "BorderThickness" value= "1"/> <setter property= "Horizontalcontental" Ignment "value=" center "/> <setter property=" verticalcontentalignment "value=" center "/&
                        Gt </Style> </GridView.ItemContainerStyle> </GridView> < /semanticzoom.zoomedoutview> <SemanticZoom.ZoomedInView> <!--settings Scrollviewer.ishori Zontalscrollchainingenabled= "False"--> <gridview name= "Gv_item" itemssource= "{Binding source={static Resource Itemcollectsource}} "selecteditem=" {Binding itemcontent, MoDe=twoway} "scrollviewer.ishorizontalscrollchainingenabled= False" margin= "20,140,40,20" IsSwipeEnabled
                            = "True" > <GridView.ItemTemplate> <DataTemplate> <grid width= "height=" background= "#33CCCCCC" > <grid.colum
                                    ndefinitions> <columndefinition width= "></ColumnDefinition>" <ColumnDefinition></ColumnDefinition> &LT;/GRID.C olumndefinitions> <image grid.column= "0" margin= "5,0,0,0" source= "{Binding ImageUrl}" "Stretch=" None "></Image> <textblock grid.column=" 1 "margin=" 15,15,0,0 "Foregr Ound= "Black" text= "{Binding txttitle}" fontweight= "Bold" fontsize= "textwrapping=" W
              Rap "/>                  <textblock grid.column= "1" margin= "15,40,0,0" foreground= "Black" text= "{Binding txtcontent}" fontweight= "Light" fontsize= "textwrapping=" Wrap/>
                    D> </DataTemplate> </GridView.ItemTemplate> <GridView.ItemsPanel> <ItemsPanelTemplate> <variablesi
                    Zedwrapgrid orientation= "Vertical" maximumrowsorcolumns= "3"/> </ItemsPanelTemplate> </GridView.ItemsPanel> <GridView.GroupStyle> <g Roupstyle> <GroupStyle.HeaderTemplate> <datatempla te> <grid margin= "1,0,0,6" > <butto N AUTOMATIONPROPERTIES.NAme= "group name" content= "{Binding grouptitle}"/> </Grid> </DataTemplate> </GroupStyle.HeaderTemplate> ; Groupstyle.panel> <ItemsPanelTemplate> <va Riablesizedwrapgrid orientation= "Vertical" margin= "0,0,50,0"/> </itemspaneltemplate&
                            Gt
                </GroupStyle.Panel> </GroupStyle> </GridView.GroupStyle> </GridView> </SemanticZoom.ZoomedInView> </SemanticZoom>