Semantic Zoom を簡単に試す - How to try Semantic Zoom easily

  • Article

連投です。C# + XAML 話になります。

Semantic Zoom を試したいなーと思って Semantic Zoom のタグ <SemanticZoom> を XAML に書いてみたところ、なんかうまく表示されない……という方がいらっしゃると聞きました。ということで簡単にやるコツを紹介します。

 

まずはグリッドテンプレートを作りましょう。GroupedItemsPage.xaml で試してみます。

以下のような Grid タグがあります。

  <Grid Style="{StaticResource LayoutRootStyle}">
 <Grid.RowDefinitions>
 <RowDefinition Height="140"/>
 <RowDefinition Height="*"/>
 </Grid.RowDefinitions>

この下に Semantic Zoom のタグを書いていきます。

  <SemanticZoom>
 <SemanticZoom.ZoomedInView> 
 </SemanticZoom.ZoomedInView>
 <SemanticZoom.ZoomedOutView>
 </SemanticZoom.ZoomedOutView> 
 </SemanticZoom>

青い波線が出て、値を入れるよう指示されますので、すぐ下にある GridView のタグをそのままコピーしてみましょう。

 <SemanticZoom>
 <SemanticZoom.ZoomedInView>
 <GridView
 x:Name="itemGridView" ... 
 </GridView>
 </SemanticZoom.ZoomedInView>
 <SemanticZoom.ZoomedOutView>
 <GridView
 x:Name="itemGridView2" ... 
 </GridView>
 </SemanticZoom.ZoomedOutView>
 </SemanticZoom>

名前が重複するのでふたつめの itemGridView を itemGridView2 とでも直しておきます。

通常はここで実行してみると Semantic Zoom が出てくるはず……と思われると思うのですが、出てきません。

これには理由があって、最初の Grid の定義を見てみると、二つの Row が定義されています。そして今の状態だと Height が 140 に設定されてある、ページ上側の狭い Raw に Semantic Zoom が表示されていることになります。

これを解決するには、Semantic Zoom の RowSpan を設定するだけで OK です。(GridView もよく見るとそうしています)

なので、Semantic Zoom のタグを

 <SemanticZoom Grid.RowSpan="2">

 ... ``</SemanticZoom>  

と RowSpan を設定して実行すると Semantic Zoom がきちんと見えるようになります。

あとは ZoomedOut か ZoomedIn の GridView の ItemTemplace を換えればさらに分かりやすくなると思います。

 

ということで簡単に Semantic Zoom を試す Tips でした。