Windows 8 Store Apps Learning (semanticzoom) control

Introduced

Re-imagine the semanticzoom of Windows 8 Store Apps

Demo Semanticzoom's Application

View of custom semanticzoom through Isemanticzoominformation interface

Example

1. Demo Semanticzoom Application

Index.xaml

<page x:class= "Xamldemo.index" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" Http://schemas.microsoft.com/winfx/2006/xaml "xmlns:local=" Using:xamldemo "xmlns:d=" http://schemas.microsoft.com /expression/blend/2008 "xmlns:mc=" http://schemas.openxmlformats.org/markup-compatibility/2006 "mc:ignorable=" D "&
    
    Gt
            <grid background= "Transparent" > <semanticzoom x:name= "semanticzoom" horizontalalignment= "left" >
                <!--enlarged view, detailed data--> <SemanticZoom.ZoomedInView>
    
                    <gridview x:name= "Gridviewdetails" selectionmode= "None" isswipeenabled= "false" padding= "0 0 0" > After the <!--grouped, details of the data template--> <GridView.ItemTemplate> &L t;datatemplate> <grid background= "#022a56" width= "height=" "tapped=" grid_tapped_1 "Tag=" {Binding} "> <textblock textwrapping=" Wrap "fontsize=" 14.667 "foreground=" #ffffff "padding=" 5
                                   0 "horizontalalignment=" left "verticalalignment=" Center
                    text= "{Binding Title}"/> </Grid> </DataTemplate> </GridView.ItemTemplate> <!--grouping styles--> <gridview .
                            Groupstyle> <GroupStyle> <!--grouped, header data template-->
                                    <GroupStyle.HeaderTemplate> <DataTemplate>
                                <textblock text= "{Binding Title}" fontsize= 26.67 "height=" margin= "0 0 0"/>
                            </DataTemplate> </GroupStyle.HeaderTemplate> <!--GroupAfter each group of data (including header and details) style--> <GroupStyle.ContainerStyle>
                                        <style targettype= "Groupitem" > <setter property= "Template" > <Setter.Value> <controltemplate Ta Rgettype= "Groupitem" > <border borderbrush= "{TemplateBinding BORDERBR
                                                    Ush} "borderthickness=" {templatebinding borderthickness} "background=" {TemplateBinding Background} "> <Grid> <grid.rowdefin
                                                            itions> <rowdefinition height= "Auto"/>
                                                        <rowdefinition height= "*"/> </grid.Rowdefinitions> <contentpresenter contenttemplate= "{Template
                                                        Binding ContentTemplate} "content=" {templatebinding Content} "margin=" {templatebinding Padding} "/> <!--details data for each group of data
                                                        Source from Icollectionviewgroup.groupitems--> <itemscontrol x:name= "ItemsControl" itemssource= "{Binding groupitems}" grid.row= "1"/&G
                                                    T
                                            </Grid> </Border>
                                    </ControlTemplate> </Setter.Value>
                           </Setter> </Style> </GroupStyle.ContainerStyle> <!--after grouping, panel--> for each set of data (including header and details)
                                    <GroupStyle.Panel> <ItemsPanelTemplate> <variablesizedwrapgrid orientation= "Vertical" margin= "0 0 0" itemheight= "" loaded= "variablesized Wrapgrid_loaded_1 "/> </ItemsPanelTemplate> </grou
                    Pstyle.panel> </GroupStyle> </GridView.GroupStyle> <!--panel--> <GridView.ItemsPanel> <it of overall data (a group of data counts as an element) emspaneltemplate> <stackpanel orientation= "Horizontal"/> ;/itemspaneltemplate> </GridView.ItemsPanel> </GridView> &L T;/semanticzoom.zoomedinView> <!--shrinking view, overview data--> <semanticzoom.zoomedoutvie
                    w> <gridview name= "gridviewsummary" horizontalalignment= "left" padding= "0 0 0" > <GridView.ItemTemplate> <DataTemplate> <grid Bac
                                    Kground= "#022a56" width= "height=" > <!-- Header data source for each group of data from Icollectionviewgroup.group--> < TextBlock text= "{Binding group.title}" foreground= "#ffffff" opacity= "0.9" fontsize= "14.667" margin= "5" textalignment= "Center" horizontalalignment= "center" verticalalignment= "center" textwrapping= "Wrap"/> &
                    Lt;/grid> </DataTemplate> </GridView.ItemTemplate> <gridview.itemspanel> <ItemsPanelTemplate> <wrapgrid maximumrowsorcolumns= "8 "horizontalalignment=" center "verticalalignment=" center "orientation=" horizontal "/> </item Spaneltemplate> </GridView.ItemsPanel> <gridview.itemcontainerstyle&gt
                        ;
                            <style targettype= "Gridviewitem" > <setter property= "Margin" value= "5 5 5"/>
                            <setter property= "horizontalcontentalignment" value= "Center"/>
                    <setter property= "verticalcontentalignment" value= "Center"/> </Style> </GridView.ItemContainerStyle> </GridView> </semanticzoom.zoomedoutview&
        Gt </SemanticZoom> </Grid> </Page>