2

I am trying to implement a semantic zoom in C#/Xaml for Windows 8. I succeed in displaying the zoom out and the zoom in. But when i click on item in the zoom out view I always come back to the first item of my zoom-in view.

here is how I grouped my items : 

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

I used this to display the same collection of grouped items to the zoom out and zoom in views : 

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

and my xaml code is 

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

Thank you for your help.

4

3 回答 3

2

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

于 2012-08-14T11:43:26.077 回答
2

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

用 SemanticZoom 替换 ScrollViewer

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

许多人在使 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>
于 2012-08-28T10:38:38.417 回答
0

我认为分组可能是这里的关键。确保您的 CollectionViewSource 具有IsSourceGrouped="True"。

另外，你不需要设置

ItemsSource = this.cvs1.View.CollectionGroups;

可以设置

ItemsSource = this.cvs1;

于 2012-08-14T15:05:35.970 回答