イメージの入れ替え
C1WebSplitterコンポーネントは、コンテナコントロールになっているので、各パネル内に他のコントロールを組み込むことができます。
ここでは、ASP.NET標準コントロールのButtonを組み込み、クリックするとImageコントロールのImageUrlプロパティの値を入れ替えるようにしています。
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
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ページにはない機能を持ったページを作ることができると思います。
