back
さまざまなプロパティの操作 (3/5)
■Gridとコントロールの配置
MarginやPaddingによる位置の調整は、HTMLの表示を思わせます。HTMLでは、配置したタグの要素が順番に並んで表示されていきますが、Windows Phoneの場合はこうしたことはなく、すべての部品はそれぞれに位置が指定されます。
他の部品と相対的な位置関係が指定されているわけではありません。HTMLでは、部品類は基本的に「前の部品の後ろに次の部品が置かれる」という形になっていますので、例えば前の部品の大きさが変わると、その後の部品は自動的に表示位置がずれていきます。
が、Windows Phoneではすべての位置は別々に設定せますので、上にある部品のサイズが大きくなったからといって、その下にある部品が下に移動してくれるわけではありません。部品の大きさの変化に応じて自動的にそれ以降の部品の位置が調整されるようにするためには、一工夫する必要があります。
もっともシンプルな考え方は、「Gridのレイアウト機能」を利用するやり方です。Gridというのは、MainPageでも使われていますね。レイアウトのための部品で、部品を配置するエリアをいくつかに分割し、それぞれに部品を配置してレイアウトするのに使いました。
MainPageでは、まずGridで画面が上下に２分割され、上の部分に「マイアプリケーション」「ページ名」などの表示がされました。そして下の領域内に、更にGridが置かれ、その中に部品が配置されるようになっていました。――Gridは、領域内に置かれているGridの表示を幾つかに分割し、その幅を自動的に調整させることができます。例えば、２つの領域に分け、上の領域の縦幅を自動調整するようにしておけば、上の部品のHeightが変わっても自動的に下の領域の部品の位置が調整され、重なったりすることはなくなります。
このGridは、いくつかのプロパティによって、縦横いくつの領域に分割されるか、またその部品はGridの何番目の領域にあるかなどを設定できます。これは以下のプロパティを考えておけばよいでしょう。
Grid.Column――Grid内の何番目のコラム（列）に表示するか
Grid.ColumnSpan――Grid内のいくつのコラム（列）にわたって表示するか
Grid.Row――Grid内の何番目の行に表示するか
Grid.RowSpan――Grid内のいくつの行にわたって表示するか
では、実際に簡単な例を挙げておきましょう。ここでは、下の領域にあるGridを上下２つに分割し、上にTextBlock を、下にTextBoxとButtonを配置させることにします。ドキュメントアウトラインから、下の領域にあるGrid（ContentPanel）を選択し、プロパティから「Grid.Row」を「２」に変更してください。これで上下２つに分割されます。またHeightは「Auto」が選ばれていることを確認しておきましょう。
続いて、２つの分割した上の領域にTextBlock（textBlock1）を入れ、下の領域にTextBox（textBox1）とButton（button1）を配置します。そしてButtonのClickイベントに、下に掲載したbutton1Clickメソッドを設定しておきます。
これは、上の領域に配置したTextBlockの縦幅を変更するサンプルです。TextBoxに適当に数値を入力し、ボタンを押しましょう。すると、TextBlockの縦幅が入力した値に変わります。すると、それにあわせて自動的に下の領域にあるTextBox/Buttoの位置が移動することがわかるでしょう。
ここでは、入力した値を取り出し、textBlock1.Heightを変更しているだけです。textBlock1の縦幅が変わると、これが置かれているGridの上の領域の縦幅が自動的に調整され、それにあわせて下の領域にある部品類の表示位置が移動していることがわかります。このように、Gridを利用することで、部品の表示位置を必要に応じて自動的に調整させることができるのです。
他の部品と相対的な位置関係が指定されているわけではありません。HTMLでは、部品類は基本的に「前の部品の後ろに次の部品が置かれる」という形になっていますので、例えば前の部品の大きさが変わると、その後の部品は自動的に表示位置がずれていきます。
が、Windows Phoneではすべての位置は別々に設定せますので、上にある部品のサイズが大きくなったからといって、その下にある部品が下に移動してくれるわけではありません。部品の大きさの変化に応じて自動的にそれ以降の部品の位置が調整されるようにするためには、一工夫する必要があります。
もっともシンプルな考え方は、「Gridのレイアウト機能」を利用するやり方です。Gridというのは、MainPageでも使われていますね。レイアウトのための部品で、部品を配置するエリアをいくつかに分割し、それぞれに部品を配置してレイアウトするのに使いました。
MainPageでは、まずGridで画面が上下に２分割され、上の部分に「マイアプリケーション」「ページ名」などの表示がされました。そして下の領域内に、更にGridが置かれ、その中に部品が配置されるようになっていました。――Gridは、領域内に置かれているGridの表示を幾つかに分割し、その幅を自動的に調整させることができます。例えば、２つの領域に分け、上の領域の縦幅を自動調整するようにしておけば、上の部品のHeightが変わっても自動的に下の領域の部品の位置が調整され、重なったりすることはなくなります。
このGridは、いくつかのプロパティによって、縦横いくつの領域に分割されるか、またその部品はGridの何番目の領域にあるかなどを設定できます。これは以下のプロパティを考えておけばよいでしょう。
Grid.Column――Grid内の何番目のコラム（列）に表示するか
Grid.ColumnSpan――Grid内のいくつのコラム（列）にわたって表示するか
Grid.Row――Grid内の何番目の行に表示するか
Grid.RowSpan――Grid内のいくつの行にわたって表示するか
では、実際に簡単な例を挙げておきましょう。ここでは、下の領域にあるGridを上下２つに分割し、上にTextBlock を、下にTextBoxとButtonを配置させることにします。ドキュメントアウトラインから、下の領域にあるGrid（ContentPanel）を選択し、プロパティから「Grid.Row」を「２」に変更してください。これで上下２つに分割されます。またHeightは「Auto」が選ばれていることを確認しておきましょう。
続いて、２つの分割した上の領域にTextBlock（textBlock1）を入れ、下の領域にTextBox（textBox1）とButton（button1）を配置します。そしてButtonのClickイベントに、下に掲載したbutton1Clickメソッドを設定しておきます。
これは、上の領域に配置したTextBlockの縦幅を変更するサンプルです。TextBoxに適当に数値を入力し、ボタンを押しましょう。すると、TextBlockの縦幅が入力した値に変わります。すると、それにあわせて自動的に下の領域にあるTextBox/Buttoの位置が移動することがわかるでしょう。
ここでは、入力した値を取り出し、textBlock1.Heightを変更しているだけです。textBlock1の縦幅が変わると、これが置かれているGridの上の領域の縦幅が自動的に調整され、それにあわせて下の領域にある部品類の表示位置が移動していることがわかります。このように、Gridを利用することで、部品の表示位置を必要に応じて自動的に調整させることができるのです。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
private void button1Click(object sender, RoutedEventArgs e)
{
String str = textBox1.Text;
double n = Double.Parse(str);
textBlock1.Height = n;
}
| << 前へ | 次へ >> |