xaml - 语义缩放总是带回第一个项目

Question

我正在尝试在 Windows 8 的 C#/Xaml 中实现语义缩放。我成功显示了缩小和放大。但是当我单击缩小 View 中的项目时，我总是回到我的缩放的第一项- 在 View 中。

这是我对项目进行分组的方式:

public IEnumerable<object> ListByCategory()
{
    var query = from item in listArticles.listArticles 
                orderby item.categorie
                group item by item.categorie into g
                select g;
    return query;
}

我用它来显示相同​​的分组项目集合以缩小和放大 View :

this.cvs1.Source = App.api.ListByCategory();
(semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = 
    this.cvs1.View.CollectionGroups;

我的 xaml 代码是

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

<SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom">
<SemanticZoom.ZoomedOutView>
                <GridView Foreground="Black" SelectionMode="None">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock
                    Text="{Binding Group.Key}"
                    FontFamily="Segoe UI Light"
                    FontSize="24" />
                        </DataTemplate>
                    </GridView.ItemTemplate>
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid ItemWidth="200" ItemHeight="200" 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" />
                            <Setter Property="HorizontalContentAlignment" Value="Left" />
                            <Setter Property="VerticalContentAlignment" Value="Bottom" />
                        </Style>
                    </GridView.ItemContainerStyle>
                </GridView>
            </SemanticZoom.ZoomedOutView>
 <SemanticZoom.ZoomedInView>
<local:MyGridView  x:Name="PicturesGridView" SelectionMode="None"
 ItemsSource="{Binding Source={StaticResource cvs1}}" IsItemClickEnabled="True"      ItemTemplate="{StaticResource CustomTileItem}" ItemClick="ItemView_ItemClick"   IsSwipeEnabled="True">
        <local:MyGridView.ItemsPanel>
            <ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </local:MyGridView.ItemsPanel>
        <local:MyGridView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Button  Click="Button_Click_1" Content="{Binding Key}" Foreground="Black" Background="White" FontSize="30" Margin="0,0,0,-10" ></Button>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
<VariableSizedWrapGrid ItemWidth="75" ItemHeight="150" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/>
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
        </local:MyGridView.GroupStyle>
    </local:MyGridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
    </ScrollViewer>

谢谢您的帮助。

Answer 1

我在 Depechie 发布的链接中找到了解决方案。

Replacing the ScrollViewer with SemanticZoom

The first and most important thing to do is to completely remove the ScrollViewer named “itemGridScrollViewer” from the Movies.xaml. The SemanticZoom control won’t work correctly if it’s inside the ScrollViewer.

Many people have problems getting the ZoomedOutView and ZoomedInView “in sync”. The usual problem is that when the item in ZoomedOutView is clicked, the ZoomedInView doesn’t scroll to the correct position. The reason for this problem usually is that the SemanticZoom –control is inside a ScrollViewer.

如此有效，我只是删除了 scrollViewer ，它就像一个魅力:

 <SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom"         
        Grid.Row="1"
        Margin="0,-3,0,0">
  <SemanticZoom.ZoomedOutView>
            <GridView Foreground="Black" SelectionMode="None">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock
                Text="{Binding Group.Key}"
                FontFamily="Segoe UI Light"
                FontSize="24" />
                    </DataTemplate>
                </GridView.ItemTemplate>
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid ItemWidth="200" ItemHeight="200" 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" />
                        <Setter Property="HorizontalContentAlignment" Value="Left" />
                        <Setter Property="VerticalContentAlignment" Value="Bottom" />
                    </Style>
                </GridView.ItemContainerStyle>
            </GridView>
        </SemanticZoom.ZoomedOutView>
  <SemanticZoom.ZoomedInView>
<local:MyGridView  x:Name="PicturesGridView" SelectionMode="None"
 ItemsSource="{Binding Source={StaticResource cvs1}}" IsItemClickEnabled="True"    ItemTemplate="{StaticResource CustomTileItem}" ItemClick="ItemView_ItemClick"   IsSwipeEnabled="True">
       <local:MyGridView.ItemsPanel>
        <ItemsPanelTemplate>
 <VirtualizingStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </local:MyGridView.ItemsPanel>
    <local:MyGridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <Button  Click="Button_Click_1" Content="{Binding Key}" Foreground="Black" Background="White" FontSize="30" Margin="0,0,0,-10" ></Button>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
            <GroupStyle.Panel>
                <ItemsPanelTemplate>
 <VariableSizedWrapGrid ItemWidth="75" ItemHeight="150" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/>
                </ItemsPanelTemplate>
            </GroupStyle.Panel>
        </GroupStyle>
    </local:MyGridView.GroupStyle>
</local:MyGridView>
 </SemanticZoom.ZoomedInView>
</SemanticZoom>