ホーム > Expression Blend > 0からはじめるExpression Blend再入門

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

0からはじめるExpression Blend再入門
蜜葉 優@Silverlight Square & Windows Phone Arch[著], わにちゃん@ExpressionTech.jp[編集]
2012年2月28日 from Atelier:Mitsuba

はじめに

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

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

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

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

f:id:c-mitsuba:20120228181550p:image

今回はTimerTriggerを使ってみましょう。

詳細

TimerTriggerは名前の通り、ビヘイビアで設定した処理をくるくる一定時間まわし続けるトリガーです。

まずはボタンを1つ用意して、SetDataStoreを設置します。こんなかんじですね。

f:id:c-mitsuba:20120228181549p:image

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

f:id:c-mitsuba:20120228181548p:image


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

f:id:c-mitsuba:20120228181547p:image


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

f:id:c-mitsuba:20120228181546p:image


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

まずは、DataStoreにNumber型のプロパティを1つ作成します。

データストアパネルの新しいデータの作成をクリックします。

f:id:c-mitsuba:20120228181545p:image


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

f:id:c-mitsuba:20120228181544p:image


ボタンのContentにDataStoreのProperty1をバインディングしましょう。

Contentが0になります。

f:id:c-mitsuba:20120228181543p:image


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

Trigger / EventName:ボタンがタップされたら

Trigger / MillsecondsPerTicks:1000 msごとに

Trigger / TotalTicks:永遠に

共通プロパティ / プロパティ:Property1に

共通プロパティ / Value:1

共通プロパティ / Increment:追加する

こんなかんじですね。

f:id:c-mitsuba:20120228181542p:image


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

f:id:c-mitsuba:20120228181540p:image

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

<phone:PhoneApplicationPage
	xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="https://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="https://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="https://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を使うと、型を指定してデータを作って、しかもバインディングがいいかんじに型変換してくれるので便利ですね。

次の記事

0からはじめるExpression Blend再入門』最新記事

コメント

▲このページのトップへ