How to implement SemanticZoom? - xaml

Question

I have an application that it's main page is organized like this:
Grid (LayoutRoot)
VisualStateManager (FullLandscape, FullPortrait, Filled, Snap)
Grid (Back button and page title)
ScrollViewer (FullLandscape View )
StackPanel (Horizontal)
GridView (non grouped GridView)
GridView (grouped GridView)
GridView (non grouped GridView)
GridView (grouped GridView)
GridView (grouped GridView)
ScrollViewer (Snap View)
Grid
ListView (Vertical)
My questions are:
Do I have to provide a SemanticZoom for each page in my application in order for the application to pass certification?
If I want to provide a SemanticZoom for this main page, how do I do it? i.e. where do I insert the SemanticZoom control?
( I read the article: Quickstart: Adding SemanticZoom controls:)
<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>
Thanks,
EitanB

Answer 1

It's a bit hard from to understand what you are trying to achieve from what you have written above, but I'll do my best to answer you questions.
1) SemanticZoom usage is not mandatory to pass certification. It's a nice feature that helps you present data in a neat way to the user and when used appropriately is pretty darn cool.
But, it's just a control. Give us some more information about your project and maybe we can help you decide if it will add something extra or not to the application.
Start easy and work into the details later.
2) Download the SemanticZoom example from MSDN and have a look at the code. BAsically it looks like this:
<Page.Resources>
<CollectionViewSource x:Name="cvs2" IsSourceGrouped="true" />
</Page.Resources>
<Grid x:Name="ContentPanel" VerticalAlignment="Top" HorizontalAlignment="Left">
<SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom">
<SemanticZoom.ZoomedOutView>
<GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock
Text="{Binding Group.Key}"
FontFamily="Segoe UI Light"
FontSize="24"/>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid ItemWidth="75" ItemHeight="75" MaximumRowsOrColumns="1" VerticalChildrenAlignment="Center" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="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>
<GridView ItemsSource="{Binding Source={StaticResource cvs2}}" IsSwipeEnabled="True" ScrollViewer.IsHorizontalScrollChainingEnabled="False">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="10,10,0,0" HorizontalAlignment="Left" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Image Source="{Binding Image}" Height="60" Width="60" VerticalAlignment="Center" Margin="0,0,10,0"/>
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource ApplicationForegroundThemeBrush}" Width="200" VerticalAlignment="Center" Text="{Binding Title}" HorizontalAlignment="Left" FontFamily="Segoe UI" />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text='{Binding Key}' Foreground="{StaticResource ApplicationForegroundThemeBrush}" Margin="5" FontSize="18" FontFamily="Segoe UI Light" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.ContainerStyle>
<Style TargetType="GroupItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupItem">
<StackPanel Orientation="Vertical">
<ContentPresenter Content="{TemplateBinding Content}" />
<ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="3" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" MaximumRowsOrColumns="1" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<Button Visibility="Collapsed"/>
</GridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
</Grid>
and codebehind:
StoreData _storeData = null;
public ScenarioOutput1()
{
InitializeComponent();
_storeData = new StoreData();
List<GroupInfoList<object>> dataCategory = _storeData.GetGroupsByCategory();
cvs1.Source = dataCategory;
}

Answer 2

Thanks for your answer.
I did see the example and it is clear to me. What is not clear to me is: I have on this one page multiple GridViews not just one like in the example. The question that is open in my mind is: Should I follow the example code for each of the GridViews on the page, or is there a way to do it once for the page that will cover all GridViews? Please see the pseudo code below.
Thanks,
EitanB
VisualStateManager (FullLandscape, FullPortrait, Filled, Snap)
Grid (Back button and page title)
ScrollViewer (FullLandscape View )
StackPanel (Horizontal)
<SemanticZoom x:Name="semanticZoom1" VerticalAlignment="Bottom">
<SemanticZoom.ZoomedOutView>
GridView (non grouped GridView)
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
GridView (non grouped GridView - Semantic Version)
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<SemanticZoom x:Name="semanticZoom2" VerticalAlignment="Bottom">
<SemanticZoom.ZoomedOutView>
GridView (grouped GridView)
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
GridView (grouped GridView - Semantic Version)
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<SemanticZoom x:Name="semanticZoom3" VerticalAlignment="Bottom">
<SemanticZoom.ZoomedOutView>
GridView (non grouped GridView)
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
GridView (non grouped GridView - Semantic Version)
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<SemanticZoom x:Name="semanticZoom4" VerticalAlignment="Bottom">
<SemanticZoom.ZoomedOutView>
GridView (grouped GridView)
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
GridView (grouped GridView - Semantic Version)
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<SemanticZoom x:Name="semanticZoom5" VerticalAlignment="Bottom">
<SemanticZoom.ZoomedOutView>
GridView (grouped GridView)
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
GridView (grouped GridView - Semantic Version)
</SemanticZoom.ZoomedInView>
</SemanticZoom>
ScrollViewer (Snap View)
Grid
ListView (Vertical)

Answer 3

The way to do it is like I posted in my question, i.e. the question was asking if it is the right way and the answer is yes.
EitanB