SHOEISHA iD

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

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

WebSplitter for .NET

.NETで縮小・展開可能な分割パネルを持ったWebページを作る

コンポーネントを使った分割パネルを持つWebページの作成

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

イメージの入れ替え

 C1WebSplitterコンポーネントは、コンテナコントロールになっているので、各パネル内に他のコントロールを組み込むことができます。

 ここでは、ASP.NET標準コントロールのButtonを組み込み、クリックするとImageコントロールのImageUrlプロパティの値を入れ替えるようにしています。

Visual Basic
Protected Sub Button1_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Button1.Click
    Me.Image1.ImageUrl = "oya-0308.jpg"
End Sub

Protected Sub Button2_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Button2.Click
    Me.Image1.ImageUrl = "uch-076.jpg"
End Sub

Protected Sub Button3_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Button3.Click
    Me.Image1.ImageUrl = "305.jpg"
End Sub

Protected Sub Button4_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Button4.Click
    Me.Image1.ImageUrl = "412.jpg"
End Sub

Protected Sub Button5_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Button5.Click
    Me.Image1.ImageUrl = "iwa-044.jpg"
End Sub
C#
protected void Button1_Click(object sender, EventArgs e)
{
    this.Image1.ImageUrl = "oya-0308.jpg";
}
protected void Button2_Click(object sender, EventArgs e)
{
    this.Image1.ImageUrl = "uch-076.jpg";
}
protected void Button3_Click(object sender, EventArgs e)
{
    this.Image1.ImageUrl = "305.jpg";
}    
protected void Button4_Click(object sender, EventArgs e)
{
    this.Image1.ImageUrl = "412.jpg";
}
protected void Button5_Click(object sender, EventArgs e)
{
    this.Image1.ImageUrl = "iwa-044.jpg";
}

パネルの並びの入れ替え

 C1WebSplitterコンポーネントの、「Orientation」プロパティを「Horizontal」にすると、上下2分割のC1WebSplitterコンポーネントにできます。

水平方向で分割される
 水平方向で分割される

スタイルシートとの組み合わせ

 スタイルシートを使って、C1WebSplitterコンポーネントの背景色にグラデーションを設定できます。

 この処理は、スタイルシートの定義を別ファイルに記述しそれを読み込む形をとり、定義したスタイルをそれぞれのC1WebSplitterコンポーネントに関連付けるようにします。

 具体的には、プロジェクトにスタイルシートの定義ファイルを追加し、C1WebSplitterコンポーネントのCSSプロパティに、スタイル定義の名前を設定します。

1

 Visual Studioのツールバーから「新しい項目の追加」を選び、テンプレートから「スタイルシート」を選びます。

テンプレートから「スタイルシート」を選ぶ
 テンプレートから「スタイルシート」を選ぶ
2

 このスタイルシートに、以下のコードを入力します。

.SplitterPanels
{
    filter:progid:DXImageTransform.Microsoft.Gradient
    (GradientType=0, StartColorStr='DeepPink', EndColorStr='plum');
}

.SplitterPanels2
{
    filter:progid:DXImageTransform.Microsoft.Gradient
    (GradientType=1, StartColorStr='cyan', EndColorStr='teal');
}
3

 Default.aspxの編集を「ソース」に切り替え、<head> タグの中に次のHTML文を追加します。

<link href="StyleSheet.css" type="text/css" rel="stylesheet" />  
4

 プロパティウィンドウで最初のC1WebSplitterコンポーネント「C1WebSplitter1」の「Panel1」を展開し、「CSS」プロパティに「SplitterPanels」を指定します。

 次に、2番目のC1WebSplitterコンポーネント「C1WebSplitter2」の「Panel1」を展開し、「CSS」プロパティに「SplitterPanels2」を指定します。

 これで、パネルの背景色にグラデーションを使うことができます。スタイルシート内のグラデーションの色指定は、Web用のカラー名を使うことができますので、グラデーションを設定しやすいと思います。

まとめ

 分割パネルをWebページに使うことができるようになると、さらにページのデザインに幅が広がります。今回は、簡単なイメージ画像を表示するアプリケーションを作りましたが、C1WebSplitterコンポーネントはコンテナコントロールになっているため、PlaceHolderもパネル内で使えるようにもなり、さまざまな用途に対応できるコンポーネントだと言えます。

 また、CSS・スタイルシートにも対応しているので、アイデア次第で既存のWebページにはない機能を持ったページを作ることができると思います。

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
WebSplitter for .NET連載記事一覧
この記事の著者

瀬戸 遥(セト ハルカ)

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

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/2843 2008/08/28 18:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング