Webページの作成
では、さっそくWebページを作成してみましょう。今回のプログラムでは、グリッドを使ってコントロールを配置します。グリッドは2行1列に設定し、下の行にC1HyperPanelコントロールを配置します。C1HyperPanelコントロールの中には、Imageコントロールを6個配置し、JPEG画像を設定します。
コントロールのレイアウト（※GridのShowGridLinesプロパティを「True」にしてグリッド線を表示しています）
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のコードが表示されます。
XAMLの作成
- 最初に1列2行のグリッドを設定します。Gridに行を追加するには、RowDefinition要素を必要な行数分定義します。高さはHeightプロパティで指定します。
<Grid x:Name="LayoutRoot"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="150" /> </Grid.RowDefinitions> </Grid> </Grid>の前の行にカーソルを置き、ツールボックスにあるC1HyperPanelコントロールのアイコンをダブルクリックします。この位置に、C1HyperPanelコントロールが作成されます。<Grid x:Name="LayoutRoot"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="150" /> </Grid.RowDefinitions> <c1:C1HyperPanel></c1:C1HyperPanel> </Grid><c1:C1HyperPanel>に、グリッドの位置とサイズを設定します。グリッドは下の行を使い、VerticalAlignmentプロパティを「Top」にします。また、C1HyperPanelコントロールは、デフォルトでは垂直方向に項目を並べるので、Orientationプロパティを「Horizontal」に設定し、水平方向に並ぶようにします。<c1:C1HyperPanel Grid.Row="1" Height="100" Width="500" Orientation="Horizontal" VerticalAlignment="Top"> </c1:C1HyperPanel></c1:C1HyperPanel>の前にImageコントロールを6個作成し、それぞれ次の画像を組み込みます。- grapecity.jpg
- careerzine.jpg
- codezine.jpg
- enterprisezine.jpg
- se.jpg
- markezine.jpg
- 各Imageコントロールは、クリックされた時に、そのWebページにジャンプするコードを実行するので、
x:Nameを使って名前を付けます。サイズは、イメージ画像の表示具合を見て調節します。また、6つの画像が横に並ぶので、少し間隔をあけて並ぶようにMarginプロパティも設定します。<Image x:Name="image1" Source="grapecity.jpg" Height="50" Width="50" Margin="5" />
- Imageコントロールにイベントを組み込みます。マウスがクリックされると発生するイベントはMouseLeftButtonDownイベントなので、これをリストから選んで［＜新しいイベントハンドラ＞］をクリックします。
MouseLeftButtonDownイベントを選んで［＜新しいイベントハンドラ＞］をクリックする
<Image x:Name="image1" Source="grapecity.jpg" Height="50" Width="50" Margin="5" MouseLeftButtonDown="image1_MouseLeftButtonDown"> - イメージ画像にツールチップを表示させるため、ToolTipService.ToolTipプロパティを設定します。
<Image x:Name="image1" Source="grapecity.jpg" Height="50" Width="50" Margin="5" MouseLeftButtonDown="image1_MouseLeftButtonDown" ToolTipService.ToolTip="グレープシティ 製品ページ"/> - 残りのImageコントロールも同様に作成します。
<Image x:Name="image2" Source="careerzine.jpg" Height="80" Width="80" Margin="5" MouseLeftButtonDown="image2_MouseLeftButtonDown" ToolTipService.ToolTip="IT/Web業界の転職をサポートする CAREERzine"/> <Image x:Name="image3" Source="codezine.jpg" Height="80" Width="80" Margin="5" MouseLeftButtonDown="image3_MouseLeftButtonDown" ToolTipService.ToolTip="開発者のための実務系WebマガジンCodeZine"/> <Image x:Name="image4" Source="markezine.jpg" Height="80" Width="80" Margin="5" MouseLeftButtonDown="image4_MouseLeftButtonDown" ToolTipService.ToolTip="広告/マーケティングの最新動向がわかる！MarkeZine "/> <Image x:Name="image5" Source="se.jpg" Height="50" Width="50" Margin="5" MouseLeftButtonDown="image5_MouseLeftButtonDown" ToolTipService.ToolTip="翔泳社 SE Media"/> <Image x:Name="image6" Source="enterprisezine.jpg" Height="80" Width="80" Margin="5" MouseLeftButtonDown="image6_MouseLeftButtonDown" ToolTipService.ToolTip="企業ITとマネジメント EnterpriseZine "/>
- プロジェクトに6つの画像を組み込みます。ソリューションエクスプローラのプロジェクト名の上でマウスを右クリックし、［追加］-［既存の項目］を選択します。
- 6つのJPEG画像を選ぶので、［追加］ボタンを押します。
［追加］-［既存の項目］をクリック
6つのJPEG画像を選ぶ
ビハインドコードの作成
ひとまず、パネルのレイアウトができあがったので、イメージ画像をクリックしたときのハイパージャンプの処理を作成します。これは、すべてImageコントロールのイベントハンドラで行います。
他サイトへのジャンプは、System.Windows.Browser名前空間のHtmlPageクラスと、その下層のWindowクラスにあるNavigateメソッドを使用します。引数は2つで、ジャンプ先のURLを設定したUriオブジェクトと、ブラウザを別ウィンドウで開くかどうかのオプションです。
Visual BasicPartial Public Class MainPage Inherits UserControl Public Sub New() InitializeComponent() End Sub Private Sub image1_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Dim linkURL As Uri = New Uri("http://www.grapecity.com/japan", UriKind.Absolute) Windows.Browser.HtmlPage.Window.Navigate(linkURL, "_blank") End Sub Private Sub image2_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Dim linkURL As Uri = New Uri("http://careerzine.jp/ ", UriKind.Absolute) Windows.Browser.HtmlPage.Window.Navigate(linkURL, "_blank") End Sub Private Sub image3_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Dim linkURL As Uri = New Uri("http://codezine.jp/", UriKind.Absolute) Windows.Browser.HtmlPage.Window.Navigate(linkURL, "_blank") End Sub Private Sub image4_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Dim linkURL As Uri = New Uri("http://markezine.jp/", UriKind.Absolute) Windows.Browser.HtmlPage.Window.Navigate(linkURL, "_blank") End Sub Private Sub image5_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Dim linkURL As Uri = New Uri("http://www.shoeisha.co.jp/media/", UriKind.Absolute) Windows.Browser.HtmlPage.Window.Navigate(linkURL, "_blank") End Sub Private Sub image6_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Dim linkURL As Uri = New Uri("http://enterprisezine.jp/", UriKind.Absolute) Windows.Browser.HtmlPage.Window.Navigate(linkURL, "_blank") End Sub End ClassC#namespace sl_hyperpanel_cs { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); } private void image1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { Uri linkURL = new Uri("http://www.grapecity.com/japan", UriKind.Absolute); System.Windows.Browser.HtmlPage.Window.Navigate(linkURL, "_blank"); } private void image2_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { Uri linkURL = new Uri("http://careerzine.jp/ ", UriKind.Absolute); System.Windows.Browser.HtmlPage.Window.Navigate(linkURL, "_blank"); } private void image3_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { Uri linkURL = new Uri(" http://codezine.jp/", UriKind.Absolute); System.Windows.Browser.HtmlPage.Window.Navigate(linkURL, "_blank"); } private void image4_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { Uri linkURL = new Uri("http://markezine.jp/", UriKind.Absolute); System.Windows.Browser.HtmlPage.Window.Navigate(linkURL, "_blank"); } private void image5_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { Uri linkURL = new Uri("http://www.shoeisha.co.jp/media/", UriKind.Absolute); System.Windows.Browser.HtmlPage.Window.Navigate(linkURL, "_blank"); } private void image6_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { Uri linkURL = new Uri("http://enterprisezine.jp/", UriKind.Absolute); System.Windows.Browser.HtmlPage.Window.Navigate(linkURL, "_blank"); } } }
