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:

1. Do I have to provide a SemanticZoom for each page in my application in order for the application to pass certification?

2. 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;
}