2

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>

ご協力ありがとうございました。

4

3 に答える 3

2

なぜ機能しないのかを理解するのは少し難しいので、私の選択肢は、機能するソリューションから「戻る」ことを試すことです。http：//mikaelkoskinen.net/winrt-step-by-step-tutorial-をご覧ください。 mvvm-gridview-semanticzoom /非常に優れた詳細な例です！

于 2012-08-14T11:43:26.077 に答える
2

Depechieが投稿したリンクで解決策を見つけました。

ScrollViewerをSemanticZoomに置き換える

最初に行う最も重要なことは、Movies.xamlから「itemGridScrollViewer」という名前のScrollViewerを完全に削除することです。SemanticZoomコントロールは、ScrollViewer内にある場合は正しく機能しません。

多くの人は、ZoomedOutViewとZoomedInViewを「同期」させるのに問題があります。通常の問題は、ZoomedOutViewのアイテムをクリックすると、ZoomedInViewが正しい位置にスクロールしないことです。この問題の理由は通常、SemanticZoom –controlが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 に答える