Windows 8 practical tips series: 22. Windows 8 semanticzoom zoom View

In Windows 8, The semanticzoom zoom view allows you to scale the view effects of the gridview and listview controls. It provides a detailed view (zoomedinview) for users to view details, in addition, the zoomedoutview allows you to quickly locate the approximate range of information you want to view.

1. To achieve this effect, we need to use the semanticzoom control and the collectionviewsource control in combination:

Semanticzoom control:

<Semanticzoom. zoomedoutview> <! -- Fill in the gridview to narrow the index view. Generally, bind group. Title --> </semanticzoom. zoomedoutview> <semanticzoom. zoomedinview> <! -- Fill in the common gridview to display details --> </semanticzoom. zoomedinview>

Collectionviewsource is a set of sources that interact with the foreground UI control.

Source: Source Data Binding attribute

Issourcegrouped: whether to allow grouping

View: obtains the view object associated with this instance of collectionviewsource.

View. collectiongroups: returns all set groups associated with the view.

2. Now we can use an example to see how to use semanticzoom to zoom the view. This example is based on the previous article.

1. Set the collectionviewsource control on the foreground

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

2. Draw the zoomedinview and zoomedoutview gridview on the foreground.

<Semanticzoom X: Name = "semanticzoom" verticalignment = "center"> <semanticzoom. zoomedoutview> <gridview scrollviewer. Category = "false"> <gridview. itemtemplate> <datatemplate> <! -- Note that the grouptitle attribute of the object set is bound here --> <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 prop Erty = "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> <! -- Set scrollviewer. ishorizontalscrollchainingenabled = "false" --> <gridview name = "gv_item" itemssource = "{binding source = {staticresource itemcollectsource}" selecteditem = "{binding itemcontent, mode = twoway} "scrollviewer. ishorizontalscrollchainingenabled = "false" margin = "20,140," isswipeenabled = "true"> <gridview. itemtemplate> <datatemplate> <grid width = "250" Height = "200" background = "#33 cccccc"> <grid. columndefinitions> <columndefinition width = "110"> </columndefinition> </grid. columndefinitions> <image grid. column = "0" margin = "5, 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. headertemplate> <datatemplate> <grid margin = ","> <button automationproperties. name = "group 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. Set the background data source and associate zoomedoutview data

Public mainpage () {This. initializecomponent (); this. itemcollectsource. source = new viewmodeldata (). sourcedata; // The View data of zoomedoutview must be associated with the set of zoomedinview (semanticzoom. zoomedoutview as listviewbase ). itemssource = itemcollectsource. view. collectiongroups ;}

3. See the following. If you need the source code, click win8gridview3.rar to download it.

Zoomedoutview

Zoomedinview