PR

Windows Phone マイクからオーディオ入力を取得する

2011年10月3日(月)
PROJECT KySS

ButtonのStoryboardを作成

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

図9:Storyboardの新規作成ボタンをクリックする

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

図10:「recordStoryboard」を作成する

アートボード全体が赤い枠線で囲まれタイムラインの記録が可能になります。「オブジェクトとタイムライン(B)」からrecordButtonを選択します。再生ヘッドが0の位置で、楕円に+アイコンの「キーフレームの記録」をクリックします。楕円のマークがキーフレーム内に表示されます。次に、黄色の再生ヘッドを0.1の位置に移動し、プロパティウィンドウから[レイアウト]パネルにあるWidthに101、Heightに74と指定します。次に再生ヘッドを0.2の位置に移動し、Widthに111、Heightに84を指定して元のサイズに戻します。

タイムラインのコントロールパネルから[先頭のフレームに移動]アイコンをクリックして先頭のフレームに戻り、[再生]アイコンをクリックして、動きを確認してください(図11)。

図11:recordButtonのStoryboardの動きを確認する

同様に、playButton、stopButtonにも+ボタン(新規作成)をクリックして新規Storyboardを作成していきます。playButtonはplayStoryboard、stopButtonにはstopStoryboardという名前にします。各再生ヘッドの位置とボタンのWidthとHeightの値は表1を参考にしてください。

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

コントロール名 タイムライン(秒)
0 0.1 0.2
recordButton Width=111、Height=84 Width=101、Height=74 Width=111、Height=84
playButton Width=111、Height=84 Width=101、Height=74 Width=111、Height=84
stopButton Width=111、Height=84 Width=101、Height=74 Width=111、Height=84

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

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

同様に、playButton、stopButton上にもControlStoryboardActionをドラッグドロップします。各プロパティのStoryboardにはplayStoryboard、stopStoryboardを指定します。

Expression Blendを終了してVS2010に戻ります。実行して動作を確認してください。

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

リスト2 (App.xaml)

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

またMainPage.xaml内の各

Buttonを元の形に戻したい場合は、App.xaml内の、の内容を削除し、MainPage.xaml内の

図13:実機(IS12T)で実行した画面(クリックで拡大)

四国の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会員サービスの概要とメリットをチェック

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