SemanticZoom с использованием GridView.Items вместо GridView.ItemsSource

Question

На главной странице моего приложения у меня есть что-то вроде этого, показывая различные подразделы и соблюдая 80-пиксельное поле между разделами.

<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>

Теперь я хочу добавить к этому семантическое масштабирование, чтобы при уменьшении масштаба я видел заголовки подразделов, похожие на приложение "Погода". Я использовал ItemsSource для создания Semantic Zoom в прошлом, но как мне это сделать, если я помещаю фактические элементы прямо в мой GridView и не происходит группировка.

РЕДАКТИРОВАТЬ: Как другие люди занимаются созданием этих типов отдельных подразделов, разделенных на 80 пикселей? Чтобы заставить Semantic Zoom работать, оба GridView должны быть привязаны к одним и тем же коллекциям?

Answer 1

Ваш GridView выше должен иметь имя, назовем его ZoomedInGV. Это, конечно, становится элементом управления внутри SemanticZoom.ZoomedInView. Затем вам нужно будет создать еще один GridView, назовем его ZoomedOutGV. Наконец, вам нужно создать связь между двумя представлениями. Решение должно выглядеть примерно так:

<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>