パネル Web サーバー コントロールは、静的テキストやその他のコントロールの親として使用できる ASP.NET Web ページ内にコンテナー コントロールを提供します。
1. 背景
パネル コントロールを他のコントロールのコンテナとして使用できます。この方法は、プログラムでコンテンツを作成しており、コンテンツをページに挿入する方法が必要な場合に特に便利です。次のセクションでは、Panel コントロールを使用する他の方法について説明します。
1. 動的に生成されたコントロールのコンテナー
パネル コントロールは、実行時に作成されるコントロールに便利なコンテナを提供します。
2. グループコントロールとマーカー
コントロールと関連タグのグループは、Panel コントロールに配置し、Panel コントロールを操作することで、1 つのユニットとして管理できます。たとえば、パネルの Visible プロパティを設定することで、パネル内のコントロールのグループを非表示または表示できます。
3. デフォルトのボタンを備えたフォーム
TextBox コントロールと Button コントロールをPanel コントロールに配置し、Panel コントロールの DefaultButton プロパティをパネル内のボタンの ID に設定することで、デフォルトのボタンを定義できます。ユーザーがパネル内のテキスト ボックスに入力中に Enter キーを押すと、ユーザーが特定のデフォルト ボタンをクリックしたのと同じ効果があります。これにより、ユーザーはプロジェクト フォームをより効率的に操作できるようになります。
4. 他のコントロールにスクロール バーを追加する
一部のコントロール (TreeView コントロールなど) にはスクロール バーが組み込まれていません。スクロール バー コントロールをパネル コントロール内に配置することで、スクロール動作を追加できます。スクロール バーをPanel コントロールに追加するには、Height プロパティとWidth プロパティを設定し、Panel コントロールを特定のサイズに制限してから、ScrollBars プロパティを設定します。
4. ページ上のカスタマイズされた領域
次のように、Panel コントロールを使用して、外観と動作をカスタマイズした領域をページ上に作成できます。
·タイトル付きのグループ ボックスを作成する: タイトルを表示するように GroupingText プロパティを設定できます。ページがレンダリングされると、タイトルを含むボックスがPanel コントロールの周囲に表示され、タイトルは指定したテキストになります。
注: パネル コントロールでは、スクロール バーとグループ化されたテキストを同時に指定することはできません。グループ化テキストが設定されている場合は、スクロールバーよりも優先されます。
·カスタム カラーまたはその他の外観を使用してページ上に領域を作成する:Panel コントロールは、ページ上の領域に独自の外観を作成するために設定できる外観プロパティ (BackColor や BorderWidth など) をサポートしています。
説明: GroupingText プロパティを設定すると、Panel コントロールの周囲に境界線が自動的に描画されます。
2. 方法: Web フォーム ページにパネル コントロールを追加する
1. [デザイン] ビューで、ツールボックスの [標準] タブから、Panel コントロールをページにドラッグします。
2. 静的テキストを作成するには、コントロール内をクリックしてテキストを入力します。コントロールを追加するには、コントロールをツールボックスからパネル コントロールにドラッグします。
注: 実行時に静的テキストをPanel コントロールに追加するには、Literal コントロールを作成し、その Text プロパティを設定する必要があります。その後、他のコントロールと同じ方法で、リテラル オブジェクトをプログラムでパネルに追加できます。コントロールの追加の詳細については、「方法: ASP.NET Web ページにコントロールをプログラムで追加する」を参照してください。
3. パネルの境界線をドラッグしてコントロールのサイズを変更することもできます。
説明: このコントロールは、(設定された高さを超えている場合でも) すべての子コントロールを表示するために、自動的にサイズ変更されます。
4. (次の表で説明するように) パネル コントロールのプロパティを設定して、ペインがその子コントロールとどのように対話するかを指定することもできます。
プロパティの説明
水平方向に整列
パネル内の子コントロールの配置 (左、右、中央、または両端揃え) を指定します。
包む
パネル内で幅が広すぎるコンテンツを次の行に折り返すか、パネルの端で切り詰めるかを指定します。
方向
コントロールのコンテンツを左から右にレンダリングするか、右から左にレンダリングするかを指定します。このプロパティは、ページ全体とは異なる方向の領域をページ上に作成する場合に便利です。
スクロールバー
Height プロパティと width プロパティを設定して、Panel コントロールを特定のサイズに制限している場合は、ScrollBars プロパティを設定してスクロール バーを追加できます。
グループ化テキスト
パネル コントロールの周囲に境界線とタイトルをレンダリングします。
例証します:
GroupingText プロパティを設定すると、スクロール バーが表示されなくなります (スクロール バーを指定した場合)。
3. パネルクラス
パネル コントロールは、他のコントロールのコンテナです。このコントロールは、プログラムによるコントロールの生成、コントロールのセットの表示/非表示、またはコントロールのセットのローカライズを行う場合に特に便利です。
Direction プロパティは、パネル コントロールのコンテンツをローカライズして、アラビア語やヘブライ語など、右から左に書かれる言語でテキストを表示する場合に便利です。
パネル コントロールには、コントロールの内容の動作と表示をカスタマイズできるいくつかのプロパティが用意されています。 BackImageUrl プロパティを使用して、Panel コントロールのカスタム イメージを表示します。 ScrollBars プロパティを使用して、コントロールのスクロール バーを指定します。
例
1. 次の例は、Panel コントロールを使用してプログラムでコントロールを生成し、コントロールのグループを表示/非表示にする方法を示しています。
注: 次のコード例では単一ファイルのコード モデルを使用しているため、分離コード ファイルに直接コピーすると正しく動作しない可能性があります。このコード サンプルは、.aspx 拡張子が付いた空のテキスト ファイルにコピーする必要があります。
<%@ ページ言語="C#" AutoEventWireup="True" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
「 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 」
<html>
<頭>
<title>パネルの例</title>
<script runat="サーバー">
void Page_Load(オブジェクト送信者, EventArgs e) {
// パネルの内容を表示または非表示にします。
if (Check1.Checked) {
パネル 1.Visible=false;
}
それ以外 {
パネル 1.Visible=true;
}
// ラベル コントロールを生成します。
int numlabels = Int32.Parse(DropDown1.SelectedItem.Value);
for (int i=1; i<=numlabels; i++) {
ラベル l = 新しいラベル();
l.Text = "ラベル" + (i).ToString();
l.ID = "ラベル" + (i).ToString();
パネル1.コントロール.Add(l);
Panel1.Controls.Add(new LiteralControl("<br />"));
}
// テキストボックス コントロールを生成します。
int numtexts = Int32.Parse(DropDown2.SelectedItem.Value);
for (int i=1; i<=numtexts; i++) {
TextBox t = 新しい TextBox();
t.Text = "TextBox" + (i).ToString();
t.ID = "TextBox" + (i).ToString();
パネル1.コントロール.Add(t);
Panel1.Controls.Add(new LiteralControl("<br />"));
}
}
</script>
</head>
<本文>
<h3>パネルの例</h3>
<form id="form1" runat="server">
<asp:Panel id="パネル1" runat="サーバー"
BackColor="ゲインズボロ"
高さ="200ピクセル"
幅="300px">
パネル 1: ここに静的なコンテンツがあります...
<br />
</asp:パネル>
<br />
ラベルを生成する:
<asp:DropDownList id="DropDown1" runat="server">
<asp:ListItem Value="0">0</asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
</asp:ドロップダウンリスト>
<br />
テキストボックスを生成します。
<asp:DropDownList id="DropDown2" runat="server">
<asp:ListItem Value="0">0</asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
</asp:ドロップダウンリスト>
<br />
<asp:CheckBox id="Check1" Text="パネルを非表示" runat="server"/>
<br />
<asp:Button Text="パネルを更新" runat="server"/>
</form>
</body>