SemanticZoomを行うには

SemanticZoomとは

セマンティックズームとは複数項目を表示するListViewやGridView、Hubにおいてピンチイン、ピンチアウトのジェスチャをすることで項目の表示範囲を変えることができる機能のことです。

Windows8でもスタート画面にセマンティックズームが使われています。

ズームイン時

 

13

 

ズームアウト時

14

 

 

SemanticZoomの実装方法

SemanticZoomは、ISemanticZoomInformationインターフェースを実装しているコントロールでないとできません。

WindowsRuntimeでは、ListViewと、GridView、そしてHubが対応しています。

 

SematicZoomコントロール内の

ZoomInViewプロパティ内にズームイン時の表示方法を、

ZoomOutViewプロパティ内にズームアウト時の表示方法を記述します。

 

今回はZoomIn時はGridViewを、ZoomOut時はListViewを表示させるようにしてみましょう。

<SemanticZoom>
    <SemanticZoom.ZoomedInView>
        <GridView x:Name="gridView">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Button Content="{Binding}" Width="200" Height="200" Foreground="Red" />
                </DataTemplate>
             </GridView.ItemTemplate>
        </GridView>
    </SemanticZoom.ZoomedInView>
    <SemanticZoom.ZoomedOutView>
        <ListView x:Name="listView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Button Content="{Binding}" Width="200" Height="100" Foreground="#FF00FF68" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </SemanticZoom.ZoomedOutView>
</SemanticZoom>

 

ズームイン時とズームアウト時に同一のコンテンツを表示するためにListViewとGridViewの両方のItemsSourceプロパティに同一のコレクションを指定します。

List<string> ItemList = new List<string>() {"あ","い","う","え","お" };
public MainPage()
{
    this.InitializeComponent();
    this.gridView.ItemsSource = ItemList;
    this.listView.ItemsSource = ItemList;
}

 

15

 

16

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください