cafe. Blend

Expression Blend 勉強会

その39:TimerTriggerをつかってみる

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

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

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

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



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

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


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


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


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

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


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


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


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

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

こんなかんじですね。


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

結果の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>

ちなみにこれ、DataStoreを使わずにChangePropertyActionで直接Contentを書き換えようとすると落ちましたw
DataStoreを使うと、型を指定してデータを作って、しかもバインディングがいいかんじに型変換してくれるので便利ですね。