APR
21

Expression Blend 3のBehaviorサポート

Published:2009-04-21 16:38:44 UTC
WPF

昨日はMicrosoft新宿本社で開かれたCodeseek勉強会に参加させて頂きました。今回はMicrosoftのエバンジェリストである大西さんによるSilverlight3とExpression Blend 3についての話でした。大変興味深い話ばかりが凝縮された二時間で、大いに勉強になりました。皆様どうも有難うございました。

全体を通して感じたのは、Expression Blendのツールとしての有用性。正直、今まで自分はExpression BlendをVisualStudioよりちょっとデザイナが使いやすいXAMLエディタとしてしか使えておらず、タグは手書きすることが多くて有効活用できているとは言い難かったのですが、これからはBlendの支援機能も使いこなせるようになったほうが得だなと感じました。

さて、紹介された中で、特に自分が気になったのはExpression Blend 3によるBehaviorのサポート。Expression Blend3ではBehaviorがサポートされ、それはどうも添付ビヘイビアのことらしい…、というのはネットでちらちら聞いていたのですが、実際にBehaviorを使った開発のデモを見せて頂いて、動いているのを見ると非常に便利そうな印象を受けたので、早速自分でも試してみました。

実際のExpression Blendの操作については大西さんによるAkira Onishi’s weblog : Expression Blend 3: Behaviorを使ったコーディングレスでのSilverlight 3アプリのインタラクションデザインというエントリに詳しいのですが、一点補足しますと、Expression Blend 3 PreviewでBehaviorを使うに当たっては、Behaviorを定義したアセンブリを自分で参照に加える必要があります。kirupaBlog – If it isn’t broken, take it apart and fix it! » Blog Archive » Using Behaviors : A Quick Walkthroughというエントリにある通り、Sample Silverlight 3 Behaviors辺りから適切なのを探してMicrosoft.Expression.Interactivity.dllと、ビヘイビアのdllを参照に加えて下さい。そうしないと、[Asset Library]の[Behaviors]の項には何も表示されません。製品版ではMSお手製ビヘイビアのアセンブリもFCLに同梱されるか、Silverlight Extentionに同梱されてほしいですね。

この例ではBehaviorである必要ありませんが、一応、テストしてみたときのXAMLソースを載せておきます。もちろんコードビハインドはありません。
ボタンがY軸を中心に回転する例:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="clr-namespace:Microsoft.Expression.Interactivity;assembly=Microsoft.Expression.Interactivity" xmlns:SLPreviewBehaviorsLibrary="clr-namespace:SLPreviewBehaviorsLibrary;assembly=SLPreviewBehaviorsLibrary" x:Class="Silverlight3Testbed.MainPage" 
    Width="400" Height="300" mc:Ignorable="d">
	<UserControl.Resources>
		<Storyboard x:Name="Storyboard1" AutoReverse="True" RepeatBehavior="Forever">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)">
				<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:03" Value="180"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Duration="00:00:00.0010000">
				<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)" Duration="00:00:00.0010000">
				<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
    	<Button x:Name="button" Height="57" Margin="84,86,196,0" VerticalAlignment="Top" Content="Button">
    		<Button.Projection>
    			<PlaneProjection RotationX="0" RotationY="0" RotationZ="0"/>
    		</Button.Projection>
    		<i:Interaction.Triggers>
    			<i:EventTrigger EventName="Click">
    				<SLPreviewBehaviorsLibrary:PlayStoryboardAction StoryboardName="Storyboard1"/>
    			</i:EventTrigger>
    		</i:Interaction.Triggers>
    	</Button>

    </Grid>
</UserControl>

Behaviorについては、もう少し追ってみようと思います。