japan.internet.com翻訳記事

Silverlightで作るVistaガジェット「ギターチューナー」

Silverlightでギターの音色を奏でる

kirants[著] / japan.internet.com[訳]

2007/11/07 14:00

ポスト

ダウンロードサンプルソース (89.8 KB)
ダウンロードメディアファイル (83.7 KB)

ギターチューナーの外観を作る（その2）

　基本的な枠組みが用意できましたので、最初に紹介したギターチューナーを構成するパーツを作り込んでいきましょう。各パーツは次のようになっています。

ギターの中央にあるサウンドホールを模した円オブジェクト（図の1）。
6本の弦（図の2）。
ブリッジを表す矩形（図の3）。弦はサウンドホールの上を通過し、ここまで伸びている。
鳴っている音を止めるための丸いボタン（図の4）。本物のギターにはないが、このガジェットでは必要。

　いずれもXAMLの要素を使い、円オブジェクトと停止ボタンはEllipseで、弦とブリッジはRectangleで表現することができます。EllipseもRectangleもShape要素に属し、塗りつぶし（図形の内部を塗りつぶすこと）や大きさなどのプロパティを持っています。

　XAMLの要素は、すべてCanvas（従来のWin32で言えばDC）に置きます。キャンバスというのは子要素を置く場です。キャンバスにはコントロール要素（ボタンなど）、Shape要素（RectangleやEllipseなど）、メディア要素などのほか、別のキャンバスを置くこともできます。

　こうした要素が集まって、下図のような階層的ツリー構造を作ります。

　ですから、ここでの目標はギターチューナーのツリー構造を作ることだとも言えます。つまり、これからXAMLで木を作り、各要素の位置を指定していくわけです。ここで、XAMLでは木の一番上にあるものから下に向かって描画される点に注意してください。したがって、木の下にある図形は上にある図形の上に重ねて描画されます（これはデフォルトで、Zオーダーを明示的に変更することもできます）。

　ギターチューナーの場合で言えば、XAMLファイルでは円オブジェクト（図の1）を最初に記述するということになります。重なっていない要素については、どのような順序でもかまいません。

　各要素は、次の設計図に従って配置します。

1

　XAMLファイルを開き、Ellipse要素（設計図の黒い円）を表す下のコードを追加します。このコードは、Ellipse Shape要素をキャンバスの左上の角を基点(0, 0)として(30, 25)の位置に配置します。幅も高さも100ピクセル、つまり半径50ピクセルで、黒で塗りつぶします。Hollowという名前が付けてあるのは、あとでこの要素を指定する必要があるからです。それでは、XAMLファイルを保存し、ブラウザのHTMLファイルを再度読み込んでください。

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/
                      presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Height="400" Width="290" >
        <Ellipse x:Name="Hollow" Height="100" Width="100"
                 Canvas.Left="30" Canvas.Top="25" Fill="Black"/>
</Canvas>

2

　Zオーダーから言って、次はブリッジ（設計図の赤い矩形）です。今度は、Rectangle Shape要素を使います。親キャンバスを基準として位置と大きさを指定し、Bridgeという名前を付けます。

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/
                      presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Height="400" Width="290" >
<Ellipse Height="100" Width="100" Canvas.Left="30"
         Canvas.Top="25" Fill="Black"/>
<Rectangle x:Name="Bridge" Width="10" Height="90"
           Canvas.Left="10" Canvas.Top="30" >
</Rectangle>
</Canvas>

　本物のギターではブリッジはかまぼこ形に作られているので、その雰囲気も再現したいですよね。実は、Fill属性を使うと簡単にそれらしく作ることができます。サウンドホールには色を一様に塗ります。穴を表現するにはこの方法が適しているからです。しかし、ブリッジのように膨らんだ感じを出すには、グラデーションの塗りを使用します。左端から中央に向けて黒から徐々に灰色になり、そこから右端に向けて再び黒くするのです。コードは次のようになります。

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/
                      presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Height="400" Width="290" >
<Ellipse Height="100" Width="100" Canvas.Left="30"
         Canvas.Top="25" Fill="Black"/>
   <Rectangle x:Name="Bridge" Width="10" Height="90"
              Canvas.Left="10" Canvas.Top="30" >
      <Rectangle.Fill>
         <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
         <GradientStop Color="Black" Offset="0.0"/>
         <GradientStop Color="Gray" Offset="0.5"/>
         <GradientStop Color="Black" Offset="1.0"/>
         </LinearGradientBrush>
      </Rectangle.Fill>
   </Rectangle>
</Canvas>

　コードを詳しく見てみましょう。StartPointとEndPointはグラデーションの方向を示します。ここでは水平方向のグラデーションですから、Y方向は位置0のままとし、X方向は位置0から位置1（要素の反対の端）までとします。GradientStopは色の変化の仕方を指定します。グラデーションする範囲の中で、位置0ではBlack、位置0.5でGray、位置1では再びBlackへと変化させることを指定しています。それでは、XAMLファイルを保存し、ブラウザのHTMLファイルを再度読み込んでください。

3

　Zオーダーから言って、次は弦（設計図の青い矩形）です。弦は6本ありますが、ここでは1本だけ取り上げて説明します（弦の位置を除き、設定の仕方はどの弦でも同じです）。ギターの弦は、上から下にそれぞれ、低いE、A、D、G、B、高いEの弦と呼びます。本物のギターでは、一番上の弦（一番低い音を出します）は太く、下に行くほど細くなります。XAMLでも、これを再現することにしましょう。そのためには矩形の高さを変えます。

　弦は丸いので、その雰囲気も再現したいですよね。この場合も矩形とグラデーションを使えば再現できます。ただし、弦に似た色で縦方向にグラデーションします（ブリッジとはStartPointとEndPointが異なります）。

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/
                      presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Height="400" Width="290" >
<Ellipse Height="100" Width="100" Canvas.Left="30"
         Canvas.Top="25" Fill="Black"/>
<Rectangle x:Name="Bridge" Width="10" Height="90"
           Canvas.Left="10" Canvas.Top="30" >
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
         <GradientStop Color="Black" Offset="0.0"/>
         <GradientStop Color="Gray" Offset="0.5"/>
         <GradientStop Color="Black" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>

<Rectangle x:Name="LowEString" Width="315" Height="5"
           Canvas.Left="15" Canvas.Top="37">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Brown" Offset="0.0"/>
<GradientStop Color="White" Offset="0.5"/>
<GradientStop Color="Brown" Offset="1.0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>

　XAMLファイルを保存し、ブラウザのHTMLファイルを再度読み込んでください。

5

　最後は、停止ボタン（設計図の緑の円）です。サウンドホールのときと同じEllipse Shape要素を使います。立体的に見えるように、放射状のグラデーションを使いましょう。コードは次のようになります。

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/
                      presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Height="400" Width="290" >
<Ellipse Height="100" Width="100" Canvas.Left="30"
         Canvas.Top="25" Fill="Black"/>
<Rectangle x:Name="Bridge" Width="10" Height="90"
           Canvas.Left="10" Canvas.Top="30" >
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
         <GradientStop Color="Black" Offset="0.0"/>
         <GradientStop Color="Gray" Offset="0.5"/>
         <GradientStop Color="Black" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="LowEString" Width="315" Height="5"
           Canvas.Left="15" Canvas.Top="37">
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
         <GradientStop Color="Brown" Offset="0.0"/>
         <GradientStop Color="White" Offset="0.5"/>
         <GradientStop Color="Brown" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
<Ellipse x:Name="StopButtonb" Height="15" Width="15"
         Canvas.Left="8" Canvas.Top="125" Stroke="Black"
         StrokeThickness="1" >
   <Ellipse.Fill>
      <RadialGradientBrush>
         <GradientStop Color="Red"   Offset="1.0"/>
         <GradientStop Color="White" Offset="0.0"/>
      </RadialGradientBrush>
   </Ellipse.Fill>
</Ellipse>
</Canvas>

　XAMLファイルを保存し、ブラウザのHTMLファイルを再度読み込んでください。

6

　残り5本の弦も入れて完成させます。コードは次のようになっているはずです。

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/
                      presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Height="400" Width="290" ><Ellipse Height="100"
   Width="100" Canvas.Left="30" Canvas.Top="25" Fill="Black"/>
<Rectangle x:Name="Bridge" Width="10" Height="90"
           Canvas.Left="10" Canvas.Top="30" >
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
         <GradientStop Color="Black" Offset="0.0"/>
         <GradientStop Color="Gray" Offset="0.5"/>
         <GradientStop Color="Black" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="LowEString" Width="315" Height="5"
           Canvas.Left="15" Canvas.Top="37">
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
         <GradientStop Color="Brown" Offset="0.0"/>
         <GradientStop Color="White" Offset="0.5"/>
         <GradientStop Color="Brown" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="AString" Width="315" Height="5"
           Canvas.Left="15" Canvas.Top="52">
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
         <GradientStop Color="Brown" Offset="0.0"/>
         <GradientStop Color="White" Offset="0.5"/>
         <GradientStop Color="Brown" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="DString" Width="315" Height="4"
           Canvas.Left="15" Canvas.Top="67">
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
         <GradientStop Color="Brown" Offset="0.0"/>
         <GradientStop Color="White" Offset="0.5"/>
         <GradientStop Color="Brown" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="GString" Width="315" Height="4"
           Canvas.Left="15" Canvas.Top="82">
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
         <GradientStop Color="Brown" Offset="0.0"/>
         <GradientStop Color="White" Offset="0.5"/>
         <GradientStop Color="Brown" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="BString" Width="315" Height="3"
           Canvas.Left="15" Canvas.Top="97">
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
         <GradientStop Color="Brown" Offset="0.0"/>
         <GradientStop Color="White" Offset="0.5"/>
         <GradientStop Color="Brown" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="HighEString" Width="315" Height="3"
           Canvas.Left="15" Canvas.Top="112">
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
         <GradientStop Color="Brown" Offset="0.0"/>
         <GradientStop Color="White" Offset="0.5"/>
         <GradientStop Color="Brown" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
<Ellipse x:Name="StopButtonb" Height="15" Width="15"
         Canvas.Left="8" Canvas.Top="125" Stroke="Black"
         StrokeThickness="1" >
   <Ellipse.Fill>
      <RadialGradientBrush>
         <GradientStop Color="Red" Offset="1.0"/>
         <GradientStop Color="White" Offset="0.0"/>
      </RadialGradientBrush>
   </Ellipse.Fill>
</Ellipse>
</Canvas>

　XAMLファイルを保存し、ブラウザのHTMLファイルを再度読み込んでください。下の図のようになりましたか？

次のページ
ギターチューナーに動作を加える

この記事は参考になりましたか？

印刷用を表示

ポスト

japan.internet.com翻訳記事連載記事一覧: 式ツリーからラムダ式を構築する

Microsoft Visual Studio 2010の紹介

分散DBMS「Mnesia」の並列処理

もっと読む

この記事の著者: japan.internet.com（ジャパンインターネットコム）

japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.com や EarthWeb.com からの最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事; kirants（kirants）

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事