Question

I’ve been using a SemanticZoom containing a GridView in both the ZommedInView and the ZoomedOutView. The one in the ZoomedOutView doesn’t seem to snap to the container though. The container is a StackPanel, located in a ScrollViewer. This means that when I zoom out, my items are offscreen if the Horizontal-alignment is set to left.
Also, when I select the zommed-in gridview in the designer, it is clearly shown in the expected place, filling the scrollviewer. The zoomed-out gridview is shown to exceed the boundaries of the page.

Swapping the content of the zoomed-in and zoomed-out views swaps the problem to the other gridview, so we can deduce the problem is not in a difference of the gridview.

Is there a way to fix it or is it a bug in the control?

<ScrollViewer
        x:Name="itemGridScrollViewer"
        AutomationProperties.AutomationId="ItemGridScrollViewer"
        Grid.Row="1"
        Margin="0,-3,0,0"
        Style="{StaticResource HorizontalScrollViewerStyle}">

        <!--
        ItemTemplateSelector="{StaticResource hubItemTemplateSelector}"
        ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
        -->
        <StackPanel
                    Margin="116,0,40,46">
        <SemanticZoom ManipulationMode="RotateInertia">
            <SemanticZoom.ZoomedInView>
                    <GridView
                    AutomationProperties.AutomationId="ItemGridView"
                    AutomationProperties.Name="Grouped Items"
                    ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
                    ItemTemplateSelector="{StaticResource hubItemTemplateSelector}"
                    SelectionMode="None"
                    IsItemClickEnabled="True"
                    ItemClick="ItemView_ItemClick"
                    IsSwipeEnabled="True">

                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VirtualizingStackPanel Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.GroupStyle>
                            <GroupStyle>
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <Grid Margin="1,0,0,6">
                                            <Button
                                            AutomationProperties.Name="Group Title"
                                            Content="{Binding Path=Title}"
                                            Click="Header_Click"
                                            Style="{StaticResource TextButtonStyle}"/>
                                        </Grid>
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                                <GroupStyle.Panel>
                                    <ItemsPanelTemplate>
                                        <VariableSizedWrapGrid MaximumRowsOrColumns="2" ItemHeight="250" ItemWidth="250" Orientation="Horizontal"/>
                                    </ItemsPanelTemplate>
                                </GroupStyle.Panel>
                            </GroupStyle>
                        </GridView.GroupStyle>
                    </GridView>
                </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                    <GridView
                        AutomationProperties.AutomationId="CategoryGridView"
                        AutomationProperties.Name="Grouped Items Zoomed Out"
                        ItemsSource="{Binding Path=ItemGroups}"
                    >

                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Button
                                    AutomationProperties.Name="Group Title"
                                    Content="{Binding Title}"
                                    Click="Header_Click"
                                    Style="{StaticResource TextButtonStyle}"/>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid ItemWidth="250" ItemHeight="250" MaximumRowsOrColumns="2" VerticalChildrenAlignment="Center" />
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.ItemContainerStyle>
                            <Style TargetType="GridViewItem">
                                <Setter Property="Margin" Value="4" />
                                <Setter Property="Padding" Value="10" />
                                <Setter Property="Background" Value="#FF25A1DB" />
                                <Setter Property="BorderThickness" Value="1" />
                            </Style>
                        </GridView.ItemContainerStyle>
                    </GridView>
                </SemanticZoom.ZoomedOutView>
        </SemanticZoom>
        </StackPanel>
    </ScrollViewer>

Answer 1

The solution seems to be to set the HorizontalAlignment attribute on the StackPanel that contains the SemanticZoom. If I set it to Left, the content aligns appropriately.