The SemanticZoom zoom view in Windows 8 supports zooming the view effects of the GridView and ListView controls. It provides a detail view (ZoomedInView) for users to view details and a reduced index. The ZoomedOutView allows the user to quickly locate the approximate range of information they want to view.
One. To achieve this effect we need to use the SemanticZoom control and the CollectionViewSource control together:
SemanticZoom control:
<SemanticZoom.ZoomedOutView>
<!--fill the reduced index here View of the GridView, generally bound Group.Title-->
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<!--fill the usual plain GridView here , Show Details-->
</SemanticZoom.ZoomedInView>
CollectionViewSource is a collection source that interacts with the foreground UI controls.
Source: Source Data Binding Properties
IsSourceGrouped: Whether to allow grouping
View: Get the view object currently associated with this instance of CollectionViewSource
View.CollectionGroups: Returns all the collection groups associated with this view.
2. Now let's look at how to use ZoomanZoom to achieve zoomed view. This example is based on the previous article.
1. Front provided CollectionViewSource control
& lt; Grid.Resources & gt;
& lt; CollectionViewSourcex: Name = " itemcollectSource " IsSourceGrouped = " true " ItemsPath = " ItemContent " /& gt;
& lt ; /Grid.Resources>
2. drawing ZoomedInView front view and a view ZoomedOutView GridView
& lt; SemanticZoomx: Name = " semanticZoom " VerticalAlignment = " Center " & gt;
& lt; SemanticZoom.ZoomedOutView & gt; < Br><GridViewScrollViewer.IsHorizontalScrollChainingEnabled="False">
<GridView.ItemTemplate>
<DataTemplate>
<!--Note that the GroupTitle attribute of the entity set is bound here - & gt;
& lt; TextBlockText = " {BindingGroup.GroupTitle} " FontSize = " 24 " /& gt;
& lt; /DataTemplate & gt;
& lt; /GridView.ItemTemplate>
& lt; GridView.ItemsPanel & gt;
& lt; ItemsPanelTemplate & gt;
& lt; WrapGridItemWidth = " 150 " ItemHeight = " 75 " MaximumRowsOrColumns = " 1 " VerticalChildrenAlignment = " Center " /& gt;
& lt; /ItemsPanelTemplate & gt;
& lt; /GridView.ItemsPanel>
& lt; GridView.ItemContainerStyle & gt;
& lt; StyleTargetType = " GridViewItem " & gt;
& lt; SetterProperty = " Margin " Value = " 4 " /& gt;
& lt; SetterProperty = " Padding " Value = " 10 " /& gt;
& lt; SetterProperty = " BorderBrush " Value = " Gray " /& gt;
& lt; SetterProperty = " BorderThickness " Value = " 1 " /& gt;
& lt; SetterProperty = " HorizontalContentAlignment " Value = " Center " /& gt;
& lt; SetterProperty = " VerticalContentAlignment " Value = " Center " /& gt;
& lt; /Style & gt;
& lt; /GridView.ItemContainerStyle>
& lt; /GridView & gt;
& lt; /SemanticZoom.ZoomedOutView>
& lt; SemanticZoom.ZoomedInView & gt;
& lt; -! disposed ScrollViewer.IsHorizontalScrollChainingEnabled = " False " - & gt;
& lt; GridViewName = " gv_Item " ItemsSource = " {BindingSource = {StaticResourceitemcollectSource}} "
SelectedItem = "{BindingItemContent , Mode=TwoWay}"ScrollViewer.IsHorizontalScrollChainingEnabled="False"
Margin="20,140,40,20"IsSwipeEnabled="True">
<GridView.ItemTemplate>
< DataTemplate>
<GridWidth="250"Height="200"Background="#33CCCCCC">
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="110"> </ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<ImageGrid.Column="0"Margin="5,0,0, 0"Source="{BindingImageUrl}"Stretch="None"></Image>
<TextBlockGrid.Column="1"Margin="15,15,0,0"Foreground ="Black"Text="{BindingtxtTitle}"
FontWeight="Bold"FontSize="16"TextWrapping="Wrap"/>
<TextBlockGrid.Column="1" ; Margin = " 15,40,0,0 " Foreground = " Black " Text = " {BindingtxtContent} "
Fon tWeight = " Light " FontSize = " 14 " TextWrapping = " Wrap " /& gt;
& lt; /Grid & gt;
& lt; /DataTemplate & gt;
& lt; /GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGridOrientation="Vertical"MaximumRowsOrColumns="3"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel> ;
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<GridMargin="1,0,0,6" >
<ButtonAutomationProperties.Name="Group Name"Content="{BindingGroupTitle}"/>
</Grid>
</DataTemplate>
< /GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGridOrientation="Vertical"Margin="0,0,50,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</Gr idView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>