PR

バックグラウンドで音楽を再生する(後編)

2011年9月5日(月)
PROJECT KySS

ButtonのStoryboardを作成

「オブジェクトとタイムライン(B)」の下にある+ボタン(新規作成)をクリックし、新規のStoryboardを作成します(図8)。

図8:Storyboardの新規作成ボタン(+)をクリックする

「Storyboardリソースの作成」画面が表示されますので、「名前(キー)に「prevStoryboard」と入力し、[OK]ボタンをクリックします(図9)。

図9:「prevStoryboard」を作成する

アートボード全体が赤い枠線で囲まれタイムラインの記録が可能になります。「オブジェクトとタイムライン(B)」からPrevButtonを選択します。黄色の再生ヘッドが0の位置で、楕円に+マークの「キーフレームの記録」アイコンをクリックします。タイムライン上に楕円のマークが追加されます。次に、黄色の再生ヘッドを0.2の位置に移動し、プロパティウィンドウ内の[レイアウト] パネルにあるWidthに121、Heightに99と指定します。次に黄色の再生ヘッドを0.4の位置に移動し、Widthに131、Heightに109と指定します。タイムラインのコントロールパネルから[先頭のフレームに移動]アイコンをクリックして先頭のフレームに戻り、[再生]アイコンをクリックして、動きを確認してください(図10)。

図10:PrevButtonのStoryboardの動きを確認する

同様に、PlayButton、NextButtonにも+ボタン(新規作成)をクリックして新規Storyboardを作成していきます。PlayButtonはplayStoryboard、NextButtonにはnextStoryboardという名前にします。再生ヘッドは0.2と0.4の位置でWidthとHeightの値を変更してください。

またButton1にはbrowserStoryboardを作成し、上記と同様の手順でボタンのWidthとHeightの値を変更してください。

全て設定すると表1のようになります。

表1:各ボタンのタイムラインの設定

コントロール名 タイムライン(秒)
0 0.2 0.4
PrevButton Width=131
Height=109
Width=121
Height=99
Width=131
Height=109
PlayButton Width=131
Height=109
Width=121
Height=99
Width=131
Height=109
NextButton Width=131
Height=109
Width=121
Height=99
Width=131
Height=109
Button1(WebBrowser) Width=343
Height=82
Width=333
Height=72
Width=343
Height=82
uriGoButton Width=85
Height=76
Width=75
Height=66
Width=85
Height=76
 

次に今作成したStoryboardと各Buttonを関連付けます。[アセット]パネルの「ビヘイビアー」を選択し、ControlStoryboardActionを「オブジェクトとタイムライン(B)」内のPrevButton上にドラッグ&ドロップします。プロパティ画面が表示されますので、[共通プロパティ]パネル内のStoryboardにprevStoryboardを指定します(図11)。

図11:ControlStoryboardActionをPrevButton上にドラッグドロップし、プロパティのStoryboardにprevStoryboardを指定する(クリックで拡大)

同様に、PlayButton、NextButton、Button1上にもControlStoryboardActionをドラッグ&ドロップします。各プロパティのStoryboardにはplayStoryboard、nextStoryboard、browserStoryboardを指定します。

Expression Blendを終了してVS2010に戻ります。

実行して動作を確認してください。 実行した際にエラーが表示される場合があります。その時は、VS2010メニューの「ビルド(B)」から「ソリューションのクリーン(C)」、「ソリューションのリビルド(R)」を実行してください。それでもエラーが出る場合は、一度VS2010を終了して再起動してください。

WebBrowser.xaml上の[実行]ボタンにも同様にExpression Blend 4からStoryboardを設定してください。Storyboardの名前はgoStoryboardにします(図12)。Button(uriGoButton)のタイムラインの値は表1を参照してください。

図12:ControlStoryboardActionをuriGoButton上にドラッグ&ドロップし、プロパティのStoryboardにgoStoryboardを指定する(クリックで拡大)

Expression Blend 4で設定した「四角形」のButtonは、App.xamlの中にリスト4のように定義されています。

リスト4 (App.xaml)

~コード略~
  <Application.Resources>
  <Style TargetType="Button">
  <Setter Property="Template">
  <Setter.Value>
  <ControlTemplate TargetType="Button">
  <Grid>
  <Rectangle Fill="#FF1F1FCE" Stroke="#FFC61212" StrokeThickness="5"/>
  <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
  </Grid>
  </ControlTemplate>
  </Setter.Value>
  </Setter>
  </Style>
  </Application.Resources>
  ~コード略~

Buttonを元の形に戻したい場合は、の内容を削除すれば元の形のButtonに戻ります。

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています