[Windows ストア アプリ] Storyboardでアニメーション(Storyboardの基礎)

今回はStoryboardによるアニメーションをやってみます。

Storyboardは、あるオブジェクトに対するアニメーション設定を入れる器になります。

たとえば、画面上にTextBlockがあるとします。

このボタンのサイズは5秒間かけてフォントサイズが10→200に変化する というようなアニメーションの設定をStoryBoardに入れておきます。

StoryboardのXAMLコードは以下のようになります。

<Page.Resources>
	<Storyboard x:Name="Storyboard1">
        <DoubleAnimation Storyboard.TargetName="txtMessage"
                         Storyboard.TargetProperty="FontSize"
                         EnableDependentAnimation="True"
                         From="10" To="200" Duration="0:0:5" />
	</Storyboard>
</Page.Resources>

XAML中のDoubleAnimation は Double型のプロパティをターゲットにすることを意味します。

StoryBoard.TargetNameには、アニメーション動作を設定したいコントロールのオブジェクト名称を設定します。ここでは txtMessage という名前のコントロールを対象にしています。

Storyboard.TargetPropertyは、アニメーション時に実際に動かす対象となるプロパティ名をセットします。ここでは、フォントサイズを変化させたいので”FontSize”を設定しています。

次のEnabledDependentAnimationは、UIスレッドでアニメーションを実行するよ、ということを認識させるためのものです。

さいごにFrom, Toですが、先ほど指定したプロパティに対する移動量を指定します。

フォントサイズを10→200に変更したいので、Fromに10、Toに200を設定しています。

最後にDurationですが、ここにはアニメーションの再生時間を設定します。
0:0:5とすると5秒間を意味し、先ほど設定したフォントサイズが5秒間かけて10→2ooに変化します。

上記で下準備は完了です。

後はアニメーションを実行するだけです。

アニメーションを実行するにはStoryboardのBeginメソッドを実行します。

ページロード時にアニメーションを実行するコードは以下のようになります。

C#の例

using Windows.UI.Xaml.Media.Animation;

public MainPage()
{
    this.InitializeComponent();

    // ストーリーボードのアニメーションを開始
    (this.Resources["Storyboard1"] as Storyboard).Begin();
}

VBの例

Imports Windows.UI.Xaml.Media.Animation

Public Sub New()

    ' この呼び出しはデザイナーで必要です。
    InitializeComponent()

    ' InitializeComponent() 呼び出しの後で初期化を追加します。
    TryCast(Me.Resources("Storyboard1"), Storyboard).Begin()
End Sub

[Windows ストア アプリ] ページ間ナビゲーション3

今回は、ページ間でのデータの受け渡しについて説明します。

あるページから、ほかのページに遷移するためには Frame.Navigateメソッドを使用します。このメソッドの第2引数には、遷移先のページに渡したいデータをセットすることができます。

遷移元のコード例は以下の通りです。

遷移先はSubPageで、遷移先に渡すデータはtextBox1.Textとしています。

VBの例

Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
    Me.Frame.Navigate(GetType(SubPage), TextBox1.Text)
End Sub

C#の例

private void Button_Click(object sender, RoutedEventArgs e)
{
    this.Frame.Navigate(typeof(SubPage), textBox1.Text);
}

次に、遷移先ですが、遷移元から送られてきたデータを受け取るには、navigationHelper_LoadStateイベントを使用します。このイベントの第2引数LoadStateEventArgsの NavigationParameter に遷移元のデータが入っています。

以下は、遷移元のページから送られてきたデータを、navigationHelper_LoadStateイベントで受け取って、TextBlockコントロールに表示する例です。

VBの例

Private Sub NavigationHelper_LoadState(sender As Object, e As Common.LoadStateEventArgs)
    Me.TextBlock1.Text =
        e.NavigationParameter.ToString()
End Sub

C#の例

private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
    textBlock1.Text =
        e.NavigationParameter.ToString();
}

 

[Windows ストア アプリ] ページ間ナビゲーション2

前回はページ間の移動について説明し、最後の方で「ページを移動した後に、入力しておいた文字が消えてしまう」ことについても説明をしました。

この問題は、NavigationCacheModeEnabledに設定することで、解決できます。

コード例は以下の通りです(コンストラクタの中で設定しています)。

VBの例

Public Sub New()

    ' この呼び出しはデザイナーで必要です。
    InitializeComponent()

    Me.NavigationCacheMode = 
        Navigation.NavigationCacheMode.Enabled;
End Sub

C#の例

public MainPage()
{
    this.InitializeComponent();

    this.NavigationCacheMode = 
        Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
}

では実行例を見てみましょう。(ページ移動についてのコードは、前回のコードを参照してください)。

前回同様、TextBoxには「ページ遷移のテスト」と入力して、ButtonをクリックするとSubPageへ移動します。

ページ遷移の例
ページ遷移の例

次に、タイトル「My Application」の左側に表示されている[←]ボタンをクリックします。

最初に表示されていたページに戻ります。TextBoxには入力してあった「ページ遷移のテスト」という文字が残っていることを確認できます。

入力されていた文字が残っていることを確認