SemanticZoom Using GridView.Items Instead of GridView.ItemsSource

Question

On the main page of my application I have something like this, showing different subsections and respecting the 80 pixel margin between sections.

<GridView>
    <GridView.Style>
        <Style TargetType="GridView">
            <Setter Property="ItemContainerStyle">
                <Setter.Value>
                    <Style TargetType="GridViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                        <Setter Property="Margin" Value="0, 0, 80, 0"/>
                        <Setter Property="VerticalContentAlignment" Value="Stretch" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="GridViewItem">
                                    <ContentPresenter/>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </GridView.Style>
    <Grid>
        <TextBlock Text="SubTitle1"/>
        ...
    </Grid>
    <Grid>
        <TextBlock Text="SubTitle2"/>
        ...
    </Grid>
    <Grid>
        <TextBlock Text="SubTitle3"/>
        ...
    </Grid>
</GridView>

Now I want to add Semantic Zoom to this, so that when I zoom out I see the sub section titles a bit like the Weather app. I have used ItemsSource to do SemanticZoom in the past but how do I do it if I'm placing the actual items straight into my GridView and there is no grouping going on.

EDIT: How are other people handling creating these types of seperate sub sections seperated by 80 pixels? To get SemanticZoom working do both GridViews have to bind to the same collections?

score 1 · Answer 1 · edited Nov 20 '12 at 18:27

Your GridView above will need to have a name, let's call it ZoomedInGV. This of course becomes the control inside of SemanticZoom.ZoomedInView. Then you'll need to create another GridView, let's call it ZoomedOutGV. Finally, you'll need to create a binding between the two views. The solution should look something like this:

<SemanticZoom>
    <SemanticZoom.ZoomedInView>
        <GridView x:Name="ZoomedInGV">
        ...
        </GridView>
    </SemanticZoom.ZoomedInView>
    <SemanticZoom.ZoomedOutView>
        <GridView x:Name="ZoomedOutGV" ItemsSource="{Binding ElementName=ZoomedInGV, Path=Items}"/>
    </SemanticZoom.ZoomedOutView>
</SemanticZoom>

Doing this causes an Exception. I'd also like to somehow get the names of the sections. — Muhammad Rehan Saeed, Sep 19 '12 at 19:02

SemanticZoom Using GridView.Items Instead of GridView.ItemsSource

1 Answers1