その３９：TimerTriggerをつかってみる

ただいま0から始めるExpression Blend をシアトルからお届けしております！

これまで、ビヘイビアの挙動や振る舞いについてはいくつかご紹介しましたが、そういえばTriggerについてはあんまり紹介してなかったですね。

というわけで、しばらくはTrigger回でもやりますか。

Triggerはデフォルトでいろいろ用意されていて、いろんなタイミングでビヘイビアを発火させることができます。

今回はTimerTriggerを使ってみましょう。
TimerTriggerは名前の通り、ビヘイビアで設定した処理をくるくる一定時間まわし続けるトリガーです。
まずはボタンを１つ用意して、SetDataStoreを設置します。こんなかんじですね。

つぎに、オブジェクトパネルからChangePropertyActionを選択し、プロパティパネルのトリガー欄から新規作成をクリックします。

そのなかからTimerTriggerを選択します。

すると、トリガー欄のプロパティが変更されました。

今回はボタンをタップすると、タイマーが実行されて１秒ごとにインクリメントされるようにしてみましょう。

まずは、DataStoreにNumber型のプロパティを１つ作成します。
データストアパネルの新しいデータの作成をクリックします。

で、こんなかんじに設定ですね。

ボタンのContentにDataStoreのProperty1をバインディングしましょう。
Contentが0になります。

次に、ChangePropertyActionを以下のように設定します。

Trigger / EventName：ボタンがタップされたら
Trigger / MillisecondsPerTicks：1000 msごとに
Trigger / TotalTicks：永遠に
共通プロパティ / プロパティ：Property1に
共通プロパティ / Value：１
共通プロパティ / Increment：追加する

こんなかんじですね。

実行してみましょう。ボタンを１度タップすると、１秒ごとに数字がカウントアップされるはずです。

結果のxamlはこうなります。

<phone:PhoneApplicationPage
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
	x:Class="WindowsPhoneApplication29.MainPage"
	FontFamily="{StaticResource PhoneFontFamilyNormal}"
	FontSize="{StaticResource PhoneFontSizeNormal}"
	Foreground="{StaticResource PhoneForegroundBrush}"
	SupportedOrientations="Portrait" Orientation="Portrait"
	shell:SystemTray.IsVisible="True">

	<!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
	<Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{Binding Source={StaticResource DataStore}}">
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="*"/>
		</Grid.RowDefinitions>

		<!--TitlePanel には、アプリケーションの名前とページ タイトルが含まれています。-->
		<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
			<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
			<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
		</StackPanel>

		<!--ContentPanel - 追加のコンテンツを配置します-->
		<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
			<Button Content="{Binding Property1}" VerticalAlignment="Top" d:LayoutOverrides="Width" Height="173" Margin="0,121,0,0">
				<i:Interaction.Triggers>
					<ec:TimerTrigger EventName="Tap">
						<ec:SetDataStoreValueAction PropertyName="Property1" TargetObject="{Binding Mode=OneWay, Source={StaticResource DataStore}}" Increment="True" Value="1"/>
					</ec:TimerTrigger>
				</i:Interaction.Triggers>
			</Button>
		</Grid>
	</Grid>
</phone:PhoneApplicationPage>