SHOEISHA iD

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

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

WebSplitter for .NET

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

スタイルシートを利用して、C1WebSplitterコンポーネントをデザインする

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

フォントの設定

 C1WebSplitterコントロールの2つのパネルに文字を表示するときに、各パネルごとにフォントを変えることができます。このフォント設定も、スタイルシートを使用します。

 ただし、各パネルにはCSSのクラス名を設定するプロパティは、「CssClass」プロパティが1つあるだけです。ここには、既にパネルの背景色をグラデーションで塗りつぶす設定を記述したクラス名が設定されています。

 例えば、「C1WebSplitter1」の「Panel1」の「CssClass」プロパティには、前回クラス「SplitterPanels」を設定しています。しかも、残念ながら「CssClass」プロパティには2つ以上のクラス名を設定することができません。

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

 そこで、このクラス「SplitterPanels」の中にフォントの設定を追加していきます。

 フォントの設定は、CSSのプロパティ設定の方法に従って記述します。Visual Studio 2005を使用している方は、このCSSのプロパティに値を設定する際に、入力候補一覧を使うことができます。

.SplitterPanels
{
    filter:progid:DXImageTransform.Microsoft.Gradient
    (GradientType=0, StartColorStr='DeepPink', EndColorStr='plum');
    
    font-family:Arial;
    font-style:italic;
    font-size:medium;
    color:Green;
    text-align:center;
}

 また、手入力が面倒だという場合は、クラス名を記述した後に、ショートカットメニューから「ビルドスタイル」を選ぶと、スタイルビルダというダイアログボックスが開くので、ここでスタイルをまとめて設定します。

スタイルシート作成時に入力支援機能が使える
スタイルシート作成時に入力支援機能が使える
スタイルビルダでいろいろなスタイルを設定できる
スタイルビルダでいろいろなスタイルを設定できる

分割バーをコードから操作する

 今度は、分割バーをコードから操作する機能を組み込みます。

 このWebページでは、左のパネルにあるボタンを押すとその花の画像を表示しますが、ボタンを押した時点で分割バーを展開状態にして画像のみを表示させます。

 この処理は、C1WebSplitterコントロールのPanelクラスのCollapsedプロパティを使用します。設定値は論理値で、「True」で展開し「False」で縮小します。これを、ボタンのClickイベントハンドラに設定すれば、画像表示と同時にPanel1が縮小されPanel2のみの表示になります。

Visual Basic
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
	Me.Image1.ImageUrl = "oya-0308.jpg"
    Me.C1WebSplitter1.Panel1.Collapsed = True
End Sub
C#
protected void Button1_Click(object sender, EventArgs e)
{
    this.Image1.ImageUrl = "oya-0308.jpg";
    this.C1WebSplitter1.Panel1.Collapsed = true;
}
ボタンを押すと
ボタンを押すと
画像だけが表示される
画像だけが表示される

次のページ
イベントを使ってドラッグを無効にする

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

  • 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/2977 2008/08/29 13:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング