SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

Webページの作成

 では、さっそくWebページを作成してみましょう。今回のプログラムでは、グリッドを使ってコントロールを配置します。グリッドは2行1列に設定し、下の行にC1HyperPanelコントロールを配置します。C1HyperPanelコントロールの中には、Imageコントロールを6個配置し、JPEG画像を設定します。

コントロールのレイアウト(※GridのShowGridLinesプロパティを「True」にしてグリッド線を表示しています)
コントロールのレイアウト(※GridのShowGridLinesプロパティを「True」にしてグリッド線を表示しています)

Silverlightプロジェクトの作成

 まずは、Silverlightプロジェクトを作成します。

  1. Visual Studio 2008 Silverlight Tools 3.0をインストールし、Visual Studioで新しいプロジェクトを作成すると、「プロジェクトの種類」に[Silverlight]が追加されています。これを選んで「テンプレート」から[Silverlightアプリケーション]を選択します。
    [Silverlightアプリケーション]を選ぶ
    [Silverlightアプリケーション]を選ぶ
  2. 「新しいSilverlightアプリケーション」というダイアログボックスが表示されるので、「新しいWebプロジェクトの種類」でリストから[ASP.NET Webサイト]を選びます。
    リストから[ASP.NET Webサイト]を選ぶ
    リストから[ASP.NET Webサイト]を選ぶ
  3. プロジェクトが作成され、新しいWebサイトに「MainPage.xaml」が作られてXAMLのコードが表示されます。

XAMLの作成

  1. 最初に1列2行のグリッドを設定します。Gridに行を追加するには、RowDefinition要素を必要な行数分定義します。高さはHeightプロパティで指定します。
    <Grid x:Name="LayoutRoot">
           <Grid.RowDefinitions>
               <RowDefinition Height="*" />
               <RowDefinition Height="150" />
           </Grid.RowDefinitions>
    </Grid>
    
  2. </Grid>の前の行にカーソルを置き、ツールボックスにあるC1HyperPanelコントロールのアイコンをダブルクリックします。この位置に、C1HyperPanelコントロールが作成されます。
    <Grid x:Name="LayoutRoot">
           <Grid.RowDefinitions>
               <RowDefinition Height="*" />
               <RowDefinition Height="150" />
           </Grid.RowDefinitions>
         <c1:C1HyperPanel></c1:C1HyperPanel>
          
    </Grid>
    
  3. <c1:C1HyperPanel>に、グリッドの位置とサイズを設定します。グリッドは下の行を使い、VerticalAlignmentプロパティを「Top」にします。また、C1HyperPanelコントロールは、デフォルトでは垂直方向に項目を並べるので、Orientationプロパティを「Horizontal」に設定し、水平方向に並ぶようにします。
    <c1:C1HyperPanel Grid.Row="1" Height="100" Width="500" 
                     Orientation="Horizontal" VerticalAlignment="Top">
    </c1:C1HyperPanel>
    
  4. </c1:C1HyperPanel>の前にImageコントロールを6個作成し、それぞれ次の画像を組み込みます。
    • grapecity.jpg
    • careerzine.jpg
    • codezine.jpg
    • enterprisezine.jpg
    • se.jpg
    • markezine.jpg
  5. 各Imageコントロールは、クリックされた時に、そのWebページにジャンプするコードを実行するので、x:Nameを使って名前を付けます。サイズは、イメージ画像の表示具合を見て調節します。また、6つの画像が横に並ぶので、少し間隔をあけて並ぶようにMarginプロパティも設定します。
    <Image x:Name="image1" Source="grapecity.jpg" Height="50" Width="50" Margin="5" />
    
  6. Imageコントロールにイベントを組み込みます。マウスがクリックされると発生するイベントはMouseLeftButtonDownイベントなので、これをリストから選んで[<新しいイベントハンドラ>]をクリックします。
    MouseLeftButtonDownイベントを選んで[<新しいイベントハンドラ>]をクリックする
    MouseLeftButtonDownイベントを選んで[<新しいイベントハンドラ>]をクリックする
    <Image x:Name="image1" Source="grapecity.jpg" Height="50" Width="50" 
           Margin="5" MouseLeftButtonDown="image1_MouseLeftButtonDown">
    
  7. イメージ画像にツールチップを表示させるため、ToolTipService.ToolTipプロパティを設定します。
    <Image x:Name="image1" Source="grapecity.jpg" Height="50" Width="50" 
           Margin="5" MouseLeftButtonDown="image1_MouseLeftButtonDown"
           ToolTipService.ToolTip="グレープシティ 製品ページ"/>
    
  8. 残りの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 "/>
  9. プロジェクトに6つの画像を組み込みます。ソリューションエクスプローラのプロジェクト名の上でマウスを右クリックし、[追加]-[既存の項目]を選択します。
  10. 6つのJPEG画像を選ぶので、[追加]ボタンを押します。
    [追加]-[既存の項目]をクリック
    [追加]-[既存の項目]をクリック
    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
    
    C#
    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のカスタマイズ

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

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

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5577 2010/11/22 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング