[Windows ストアアプリ] ページをスライドインさせる

未分類

2014.03.24

Windows ストアアプリでは、簡単にアニメーション効果を追加することができます。

今回は、ページを横からスライドインする効果を追加してみたいと思います。

Gridコントロールには Transitionsプロパティがあるのですが、アニメーション効果を追加するには、このプロパティを使用します。

最初にGridコントロールを選択状態にして、プロパティウィンドウで Transitionsプロパティの欄にある[…]ボタンをクリックします。

次に「Transitoin コレクションエディター」が開くので、ダイアログの左下で「ContentThemeTransitoion」を選択して[追加]ボタンをクリックします。

次に、スライドインの開始位置を設定します。

ここでは HorizontalOffsetに「1000」を指定してみます。

設定が終わったら[OK]ボタンをクリックし、[F5]キーを押してアプリケーションを実行してみましょう。

Transitionプロパティの設定をしたページは、表示されるときに右側からスライドインするような形で表示されます。

左側から、スライドインさせたい場合は、HorizontalOffsetにマイナスの値を設定します。

また、上、または下からスライドインさせたい場合にはVerticalOffsetに値を設定します。

斜めからのスライドインをさせたい場合は、HorizontalOffsetとVerticalOffsetの両方に値を設定します。

スライドイン効果の設定を表にまとめたので参考にどうぞ。