マウス位置によってイメージ画像の大きさが変化するSilverlightアプリケーションの作成

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

2010/11/22 14:00

ポスト

ダウンロードサンプルソース（C#） (647.0 KB)
ダウンロードサンプルソース（VB） (651.2 KB)

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 Basic

Partial 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 Class

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");

        }
    }
}

次のページ
C1HyperPanelのカスタマイズ

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

印刷用を表示

ポスト

ComponentZine（ComponentOne）連載記事一覧: 【ComponentOne Data Services活用術】kintoneのデータをWi...

業務アプリ開発用UIコンポーネント「ComponentOne」がBlazorに対応！サン...

WPF／WinFormsアプリをマイグレーションして、ComponentOneを利用したモ...

もっと読む

この記事の著者: 瀬戸遥（セトハルカ）

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

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

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