WebページでSilverlightのグラフを使ってみる

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

Silverlightプロジェクトの作成

　では、さっそくWebページを作成していきましょう。まずは、Silverlightプロジェクトの作成からです。

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

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

   
3. プロジェクトが作成され、新しいWebサイトに「MainPage.xaml」が作られてXAMLのコードが表示されます。
4. C1Chartコントロールを使えるようにするために、参照設定にC1.Silverlightアセンブリへの参照の追加を行います。ソリューションエクスプローラの「参照設定」の上でショートカットメニューを表示し、［参照の追加］を選び、次の2つの参照設定を追加します。
   
   

   追加する参照設定

   C1.Silverlight.dll	ComponentOne Studio for Silverlightのメインアセンブリ
   C1.Silverlight.Chart.dll	C1Chartコントロールとその補助クラスのアセンブリ

   2つのアセンブリへの参照を追加する

   
5. 「MainPage.xaml」の<UserControl>に、「C1.Silverlight」と「C1.Silverlight.Chart」の2つの名前空間を追加します。

   xmlns:c1chart="clr-namespace:C1.Silverlight.Chart;assembly=C1.Silverlight.Chart"
   xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight" Width="400" Height="500">
   

6. 「C1.Silverlight」名前空間では、WidthとHeightプロパティでWebページ内のSilverlight領域を確保します。この領域は、あとでGridを設定する際のサイズと一致するように設定します。
   ここまでのMainPage.xamlのコード

   <UserControl x:Class="sl_graph_vb.MainPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
       xmlns:c1chart="clr-namespace:C1.Silverlight.Chart;assembly=C1.Silverlight.Chart"
       xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight" Width="400" Height="500">
   
       <Grid x:Name="LayoutRoot">
   
     </Grid>
   </UserControl>
   

7. 続いて、Gridを作成します。ここには、1列2行のグリッドを作成してC1ChartとButtonを縦に並べます。Gridはデフォルトで1行1列なので、行列を設定するには<Grid.ColumnDefinitions>と<Grid.RowDefinitions>を設定し、<Grid.ColumnDefinitions>には列数分の<ColumnDefinition/>を、<Grid.RowDefinitions>には行数分の<RowDefinition/>を設定します。それぞれ、WidthとHeightプロパティで幅と高さを設定できます。今回は、次のように2行1列のグリッドを作成しています。

   <Grid x:Name="LayoutRoot" Background="White">
           <Grid.ColumnDefinitions>
               <ColumnDefinition Width="400"/>
           </Grid.ColumnDefinitions>
           <Grid.RowDefinitions>
               <RowDefinition Height="300"/>
               <RowDefinition Height="150"/>
           </Grid.RowDefinitions>
   </Grid>
   

　これで、下準備ができました。

※注

もし、Gridのサイズを確認したい場合は、Backgroundプロパティを「Yellow」などの色に変え、ShowGridLinesプロパティを「True」にします。

<Grid x:Name="LayoutRoot" Background="Yellow" ShowGridLines="True">

Gridの設定状態が見えるようになる