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 Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

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