Question

我正在尝试在Windows 8的C＃/ Xaml中实现语义缩放。我成功地显示缩小和放大。但是当我点击缩小视图中的项目时，我总是回到第一个项目放大视图。

这是我如何对项目进行分组：

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

我用它来显示缩小和放大视图的相同分组项目集合：

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

有点难以理解为什么它不起作用，所以我的选择是尝试从一个有效的解决方案中“退回”：看看http://mikaelkoskinen.net/winrt-step-by-step-tutorial-mvvm-gridview-semanticzoom/的一个非常好的详细示例！

Answer 2

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

用SemanticZoom替换ScrollViewer

要做的第一件也是最重要的事情是从Movies.xaml中完全删除名为“itemGridScrollViewer”的ScrollViewer。如果它在ScrollViewer中，则SemanticZoom控件将无法正常工作。

许多人在使ZoomedOutView和ZoomedInView“同步”时遇到问题。通常的问题是，当单击ZoomedOutView中的项目时，ZoomedInView不会滚动到正确的位置。出现此问题的原因通常是SemanticZoom控件位于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>

Answer 3

我认为分组可能是关键所在。确保您的CollectionViewSource具有 IsSourceGrouped =“True”。

此外，您无需设置

ItemsSource = this.cvs1.View.CollectionGroups;

可以设置

ItemsSource = this.cvs1;

语义缩放始终带回第一个项目

3 个答案: