縮小タイプのツールボックスを持ったSilverlightアプリケーションの作成

ComponentOne Studio for SilverlightのC1Accordionコントロールを使ったWebページの作成

Webページの作成

　では、さっそくWebページを作成してみましょう。ページ内にStackPanelを横方向のレイアウトで設定し、C1AccordionコントロールとTextBoxを2つ配置します。C1Accordionコントロールには、ヘッダーペインにImageコントロールを配置し、コンテンツペインにはStackPanelを縦方向のレイアウトで設定し、TextBlockとButton、CheckBoxコントロールを配置します。

　通常、コンテンツペインには1つのコントロールしか配置できませんが、StackPanelやGridを使うことで複数のコントロールをレイアウトできるようになります。

ページレイアウトとコンテンツペインのコントロールレイアウト

Silverlightプロジェクトの作成

　まずは、Silverlightプロジェクトの作成からです。

　Visual Studio 2008 Silverlight Tools 3.0をインストールすると、Visual Studioで新しいプロジェクトが作成され、「プロジェクトの種類」に［Silverlight］が追加されます。これを選んで「テンプレート」から［Silverlightアプリケーション］を選びます。

［Silverlightアプリケーション］を選ぶ

　「新しいSilverlightアプリケーション」というダイアログボックスが表示されるので、「新しいWebプロジェクトの種類」でリストから［ASP.NET Webサイト］を選びます。

リストから［ASP.NET Webサイト］を選ぶ

　プロジェクトが作成され、新しいWebサイトに「MainPage.xaml」が作られてXAMLのコードが表示されます。

C1Accordionコントロールの作成

　次に、C1Accordionコントロールを作成します。ここでは、順番にコントロールをレイアウトしていきます。このWebページでは、C1Accordionコントロールのコンテンツペインを右方向に展開するスタイルにし、ヘッダーペインにはImageコントロールでツールの絵を組み込みます。

　また、コンテンツペインには、TextBlock、Button、CheckBoxの各コントロールをイベントハンドラ付きで配置していきます。

　最初に、全体をStackPanelで囲み、横方向のレイアウトでC1AccordionコントロールとTextBoxコントロールを配置します。C1Accordionコントロールは、ツールボックスのアイコンをダブルクリックして作成し、TextBoxコントロールとともにドロップシャドウを付けます。併せて、幅と高さを設定しておきます。

<Grid x:Name="LayoutRoot">
	<StackPanel Orientation="Horizontal">

        <c1ext:C1Accordion x:Name="acc1" ExpandDirection="Right" Height="250" Width="250">
            <c1ext:C1Accordion.Effect>
                <DropShadowEffect BlurRadius="5" Color="Gray" />
            </c1ext:C1Accordion.Effect>
       </c1ext:C1Accordion>

       <TextBox Height="200" Width="200" AcceptsReturn="True" x:Name="text1" Background="LemonChiffon"
                TextWrapping="Wrap">
           <TextBox.Effect>
               <DropShadowEffect BlurRadius="5" Color="Gray" />
           </TextBox.Effect>
       </TextBox>
       <TextBox Grid.Column="1" Height="200" Width="200" AcceptsReturn="True" x:Name="text2"
                Margin="5" Background="Cyan" TextWrapping="Wrap">
           <TextBox.Effect>
               <DropShadowEffect BlurRadius="5" Color="Gray" />
           </TextBox.Effect>
       </TextBox>
   </StackPanel>
</Grid>

　次に、C1Accordionコントロール内にC1AccordionItemオブジェクトを作成します。今回のプログラムでは、1セットのヘッダペインとコンテンツペインを組み込みます。コードから操作するので名前を付けておき、ExpandDirectionプロパティでコンテンツペインの展開を横向きになるように設定します。

　今回のプログラムではヘッダーペインにマウスポインタを重ねるとコンテンツペインが展開するようにするため、「IsMouseOverChanged」というイベントに対応したイベントハンドラを作成しておきます。

<c1ext:C1Accordion x:Name="acc1" ExpandDirection="Right" Height="250" Width="250">
    <c1ext:C1Accordion.Effect>
        <DropShadowEffect BlurRadius="5" Color="Gray" />
    </c1ext:C1Accordion.Effect>

    <c1ext:C1AccordionItem x:Name="accitem1" Background="LawnGreen"
                           HeaderVerticalContentAlignment="Top"  
                           IsMouseOverChanged="accitem1_IsMouseOverChanged">

　そして、ヘッダーペインにImageコントロールを組み込みます。これは、Headerプロパティ内にImageコントロールを記述するだけです。Imageコントロールには、「tool.png」というイメージファイルを設定します（プロジェクトの「ClientBin」フォルダにこのイメージファイルを入れておいてください）。

<c1ext:C1AccordionItem.Header>
    <Image Source="tool.png"/>
</c1ext:C1AccordionItem.Header>

コンテンツペインの作成

　続いて、コンテンツペインを作成します。これは、<c1ext:C1Accordion>タグの中にStackPanelコントロールを配置し、その中にButtonやTextBlock・CheckBoxコントロールを記述していきます。StackPanelコントロールは、デフォルトの縦配列で使用します。

　また、Button・CheckBoxコントロールは、それぞれClickイベントハンドラを作成しておきます。

		<StackPanel>
            <StackPanel.Effect>
                <DropShadowEffect BlurRadius="5" Color="Gray" />
            </StackPanel.Effect>

            <TextBlock Text="編集操作" Margin="5" />
            <Button x:Name="button1" Height="30" Width="80" Margin="5" Content="すべて選択" Click="button1_Click"/>
            <Button x:Name="button2" Height="30" Margin="5" Content="コピー" Click="button2_Click"/>
            <Button x:Name="button3" Height="30" Margin="5" Content="クリア" Click="button3_Click"/>
            <Button x:Name="button4" Height="30"  Margin="5" Content="文字数" Click="button4_Click"/>
            <CheckBox Content="背景色の表示" x:Name="check1" Click="check1_Click" IsChecked="true" Margin="5"  />
        </StackPanel>
    </c1ext:C1AccordionItem>
</c1ext:C1Accordion>

　以上で、XAMLのコードはできあがりです。

MainPage.xamlのコード全文

<Grid x:Name="LayoutRoot">
      <StackPanel Orientation="Horizontal">

          <c1ext:C1Accordion x:Name="acc1" ExpandDirection="Right" Height="250" Width="250">
              <c1ext:C1Accordion.Effect>
                  <DropShadowEffect BlurRadius="5" Color="Gray" />
              </c1ext:C1Accordion.Effect>

              <c1ext:C1AccordionItem x:Name="accitem1" Background="LawnGreen"
                                     HeaderVerticalContentAlignment="Top"  
                                     IsMouseOverChanged="accitem1_IsMouseOverChanged">
                  <c1ext:C1AccordionItem.Header>
                      <Image Source="tool.png"/>
                  </c1ext:C1AccordionItem.Header>

                  <StackPanel>
                      <StackPanel.Effect>
                          <DropShadowEffect BlurRadius="5" Color="Gray" />
                      </StackPanel.Effect>

                      <TextBlock Text="編集操作" Margin="5" />
                      <Button x:Name="button1" Height="30" Width="80" Margin="5" Content="すべて選択" Click="button1_Click"/>
                      <Button x:Name="button2" Height="30" Margin="5" Content="コピー" Click="button2_Click"/>
                      <Button x:Name="button3" Height="30" Margin="5" Content="クリア" Click="button3_Click"/>
                      <Button x:Name="button4" Height="30"  Margin="5" Content="文字数" Click="button4_Click"/>
                      <CheckBox Content="背景色の表示" x:Name="check1" Click="check1_Click" IsChecked="true" Margin="5"  />
                  </StackPanel>
              </c1ext:C1AccordionItem>
          </c1ext:C1Accordion>

          <TextBox Height="200" Width="200" AcceptsReturn="True" x:Name="text1" Background="LemonChiffon"
                   TextWrapping="Wrap">
              <TextBox.Effect>
                  <DropShadowEffect BlurRadius="5" Color="Gray" />
              </TextBox.Effect>
          </TextBox>
          <TextBox Grid.Column="1" Height="200" Width="200" AcceptsReturn="True" x:Name="text2"
                   Margin="5" Background="Cyan" TextWrapping="Wrap">
              <TextBox.Effect>
                  <DropShadowEffect BlurRadius="5" Color="Gray" />
              </TextBox.Effect>
          </TextBox>
      </StackPanel>
</Grid>