Visual Studio Do-It-Yourself 第 3 回コントロール今回は Windows ゕプリケーションのユーザーンターフェスを作成する際に使う基本的なコントロールについて学びますここでは次のことを学習します主要なコントロールとその機能 XAML を使ったコントロールの配置

Size: px

Start display at page:

Download "Visual Studio Do-It-Yourself 第 3 回コントロール今回は Windows ゕプリケーションのユーザーンターフェスを作成する際に使う基本的なコントロールについて学びますここでは次のことを学習します主要なコントロールとその機能 XAML を使ったコントロールの配置"

ありさささおか
5 years ago
Views:

1 Visual Studio Do-It-Yourself シリーズ第 3 回コントロール -1-

Visual Studio Do-It-Yourself 第 3 回コントロール今回は Windows ゕプリケーションのユーザーンターフェスを作成する際に使う基本的なコントロールについて学びますここでは次のことを学習します主要なコントロールとその機能 XAML を使ったコントロールの配置レゕウトとコントロールの関係今回はコントロールの学習を通じて

2 Visual Studio Do-It-Yourself 第 3 回コントロール今回は Windows ゕプリケーションのユーザーンターフェスを作成する際に使う基本的なコントロールについて学びますここでは次のことを学習します主要なコントロールとその機能 XAML を使ったコントロールの配置レゕウトとコントロールの関係今回はコントロールの学習を通じて次のようなゕプリケーションを作成しますコントロールの概要第 2 回で学んだレゕウトパネルを使うことでユーザーンターフェスの全体的な構成を決めることはできますがレゕウトは配置場所を決めるだけですゕプリケーションが実際にどのような入力や表示をするかはその他のコントロールを使う必要があります今回は Visual Studio 2010 で Windows ゕプリケーション (WPF ゕプリケーション ) を作成する場合に利用できる標準的なコントロールについて解説します Windows ゕプリケーションを開発するためのコントロールについて次の表に示しますなおこの表に掲載したコントロール以外にもさまざまなコントロールがあります一部のコントロールや機能は Visual Studio の WPF デザナーでは使うことができませんこれらは XAML エデゖターで編集する必要がありますがここでは特に触れません -2-

3 コントロール Border Button Calendar CheckBox ComboBox DataGrid DatePicker DocumentViewer Ellipse Expander GridSplitter GroupBox Image Label ListBox ListView MediaElement Menu PasswordBox ProgressBar RadioButton Rectangle RichTextBox ScrollBar ScrollViewer Separator Slider StatusBar TabControl TextBlock TextBox ToolBar ToolBarTray TreeView Viewbox WebBrowser WindowsFormsHost 機能別の要素の周囲に境界線背景またはその両方を描画しますクリックするとベントを発生します月単位のカレンダーを表示しますオン / オフ Yes/No のような切り替えを選択するチェックボックス入力ボックスとドロップダウンリストボックスを組み合わせたものデータを表形式で表示します日付を入力または選択するためのコントロール XPS ドキュメントなど固定ドキュメントを表示します楕円を表示します開閉可能な領域を作ります Grid レゕウトに配置して分割位置を移動するために使いますヘッダーと境界線を表示してコントロールをグループ分け表示します画像を表示します文字列を表示しゕンダースコゕ (_) を使ってゕクセスキーを指定できます複数の項目を表示したり選択したりします複数の項目をゕコン形式で並べて表示したり選択したりしますオーデゖオやビデオを再生しますメニューを表示してメニュー項目を選んでベントを発生しますマスク付きでパスワードを入力するためのコントロールです進行状況を表示するためのコントロール複数の選択肢から一つを選ぶためのコントロール長方形を表示します書式付きのテキストを表示したり入力したりするコントロールスクロールバーを表示しつまみを使って位置を選択できるようにしますスクロールバーを使ってコントロールより広い範囲を使えるようにします主にメニューやリストボックスの項目として使い区切り線を表示します指定された範囲内の値をつまみを使って変更します通常ウゖンドウ下部に情報を表示するために使いますタブを使って表示内容を切り替えるためのコントロールテキストを表示します文字列を入力しますゕコン付ボタンなどを配置するツールバー ToolBar を配置するためのコントロールツリー形式で項目を表示しますこの上に配置したコントロールを拡大表示しますブラウザーのように HTML ドキュメントを表示します Windows フォーム用のコントロールを使えるようにします -3-

$ボタンを押したときの動作をプログラムで記述できます新しいウゖンドウに Button コントロールを配置してダブルクリックし次のようなベントハンドラーを割り当てることができます private void button1_click(object sender, RoutedEventArgs e) { MessageBox.Show("Button Clicked!$

4 主要なコントロールよく使われるコントロールをピックゕップして解説しますここで解説するのはそれぞれの主要な機能のみです機能の詳細はオンランヘルプなどを参照してください Button 家電製品の機能ボタンや玄関の呼び出しボタンのように押して何かの機能を呼び出すためのコントロールですボタンに表示する内容は Content プロパテゖで指定しますボタンをダブルクリックするとボタンを押したときの動作をプログラムで記述できます新しいウゖンドウに Button コントロールを配置してダブルクリックし次のようなベントハンドラーを割り当てることができます private void button1_click(object sender, RoutedEventArgs e) { MessageBox.Show("Button Clicked!"); } これを実行してボタンを押すと Button Clicked! というメッセージダゕログが表示されますボタンはマウスでクリックするだけでなく入力フォーカス ( 文字入力を受け付ける状態 ) があるときにスペースや [Enter] キーを使って押すこともできますまたボタン以外のコントロールに入力フォーカスがあるときもボタンの IsDefault や IsCancel プロパテゖをチェックしておくとそれぞれ [Enter] や [Esc] を押したときに対応するボタンが押されたことになりますベントハンドラーはプロパテゖウゖンドウでも割り当てられますプロパテゖウゖンドウには [ プロパテゖ ] というタブの隣に [ ベント ] というタブがありこれをクリックすれば Button コントロールで使えるベントが列挙されます Click ベントの右側をダブルクリックするとさきほどと同じようにベントハンドラーを記述できます -4-

$button1_click(object sender, RoutedEventArgs e) { MessageBox.Show("Your input: " + textbox1.$

5 TextBox 文字列を入力するためのコントロールですあらかじめ文字列を表示する場合はプロパテゖウゖンドウの Text プロパテゖを使って設定しておきます入力または編集した文字列は Text プロパテゖを参照すれば取り出せます前述のゕプリケーションに TextBox コントロールを追加してボタンのベントハンドラーを次のように修正します private void button1_click(object sender, RoutedEventArgs e) { MessageBox.Show("Your input: " + textbox1.text); } これを実行して TextBox コントロールに文字列を入力しボタンを押すと入力した文字列を含むメッセージボックスが表示されます TextBox は 1 行だけでなく複数行のテキストを編集するためにも使えますこのとき AcceptsReturn や AcceptsTab をチェックしておくと編集中に [Enter] や [Tab] キーを受け入れることができます TextWrapping プロパテゖを Wrap にすると領域の右端を超えるときに折り返して表示されます複数行に渡って入力された行は Lines プロパテゖ (string[] 型 ) を使うと 1 行ごとに読み取ることができます -5-

TextBlock 文字列を表示するためのコントロールです ( 下図は選択状態のもので通常枠はありません ) 文字列を表示するためのコントロールには後述する Label もありますが TextBlock の方が軽量で基本的なコントロールです TextBlock に表示する文字列は Text プロパテゖに割り当てることができ左右方向の位置合わせには TextAlignment

6 TextBlock 文字列を表示するためのコントロールです ( 下図は選択状態のもので通常枠はありません ) 文字列を表示するためのコントロールには後述する Label もありますが TextBlock の方が軽量で基本的なコントロールです TextBlock に表示する文字列は Text プロパテゖに割り当てることができ左右方向の位置合わせには TextAlignment プロパテゖを使いますまた TextWrapping を Wrap に指定すれば指定された幅を超えた文字列を折り返して表示することもできます (Label にはこの機能はありません ) TextBlock の特徴的な機能として TextTrimming プロパテゖがありますこれは指定された幅に収まりきらないテキストをで省略表示するというものです次の図は 3 つの TextBlock に同じ文字列を Text プロパテゖに割り当てその他の条件を変えて配置したものです最初の 2 つは Width プロパテゖを固定値 ( ここでは 150) に設定し 2 つめは TextTrimming プロパテゖを CharacterEllipsis に設定しています 3 つ目は Width プロパテゖを Auto にしています幅の決まっている場所に文字列を表示したい場合は TextTrimming を使うと文字列が表示しきれていないことが一目でわかります文字列全体を確認させるためには ToolTip プロパテゖに Text と同じ文字列を割り当てておくとよいでしょうこれは第 5 回で説明するデータバンデゖングを使うと便利です -6-

Label 文字列を表示するためのコントロールです ( 下図は選択状態のもので通常枠はありません ) 表示する文字列は Content プロパテゖに設定します前述の TextBlock は文字列を表示するだけのコントロールですが Label では枠の色や太さ (BorderBrush BorderThickness) 枠内での水平と垂直方向での表示位置

7 Label 文字列を表示するためのコントロールです ( 下図は選択状態のもので通常枠はありません ) 表示する文字列は Content プロパテゖに設定します前述の TextBlock は文字列を表示するだけのコントロールですが Label では枠の色や太さ (BorderBrush BorderThickness) 枠内での水平と垂直方向での表示位置 (HorizontalContentAlignment と VerticalContentAlignment) などを設定できますあまり使われませんが Focusable プロパテゖをチェックしておけば入力フォーカスを持つこともできますまた Content プロパテゖにおいて英字の前にゕンダースコゕ (_) を置くことでゕクセスキー ([Alt]+[ 英字 ]) を指定できます通常 Label 自身に入力フォーカスを持たせることはなくゕクセスキーが押されたときの入力フォーカスは Target プロパテゖで指定します Target プロパテゖの割り当てには第 5 回で説明するデータバンデゖングという仕組みを使いますがここでは手順のみを説明しますまず Label と対象となるコントロールを配置します Label コントロールの Content プロパテゖに指定する文字列はどこかにゕンダースコゕ (_) と英字の組み合わせを入れておきますたとえば _File とすれば File というラベルにフゔル(_F) とすればフゔル(F) というラベルになりますこの Label コントロールのプロパテゖウゖンドウで Target プロパテゖを探しますここで右側のバンド中... という部分をクリックするとバンデゖングを指定するドロップダウンが表示されますソースエリゕで ElementName と対象となるコントロール名を選びますゕプリケーションを実行すると最初は下線が表示されていませんが [Alt] を押すと表示されますここで [Alt]+[F] のように入力すれば対象として指定したコントロールに入力フォーカスが移ります -7-

8 Image メージ ( 画像 ) を表示するためのコントロールです表示するメージは Source プロパテゖで指定しますメージデータはプロジェクトに取り込まれたものでも外部のメージフゔルでもかまいませんがここでは既存のメージフゔルをプロジェクトに取り込んで表示する例を紹介しますツールボックスで Image を選んでウゖンドウに配置しますプロパテゖウゖンドウで Source プロパテゖの右側の [...] ボタンをクリックしメージの選択ダゕログを表示します画像を選んで [ 開く ] ボタンを押すとその画像がリソースとしてプロジェクトに取り込まれます取り込むメージはプロジェクトの直下ではなく Images フォルダーに格納されます Image コントロールを使わない場合でもあらかじめ Images フォルダーを作って取り込むようにしてください -8-

取り込んだメージは配置されている Image コントロールの大きさに合わせて拡大縮小されますこれは Stretch プロパテゖが Fill になっているためです Stretch に指定する値は次の中から選べます Stretch プロパティ None Fill Uniform UniformToFill 意味画像を拡大縮小しない Image コントロールの大きさに合わせて拡大

9 取り込んだメージは配置されている Image コントロールの大きさに合わせて拡大縮小されますこれは Stretch プロパテゖが Fill になっているためです Stretch に指定する値は次の中から選べます Stretch プロパティ None Fill Uniform UniformToFill 意味画像を拡大縮小しない Image コントロールの大きさに合わせて拡大縮小する縦横の比率を変えずに画像がコントロールに収まるよう拡大縮小する縦横の比率を変えずに画像の縦または横が収まるように拡大縮小する Image コントロール自身の大きさを表示する画像に合わせる場合は Width と Height プロパテゖを削除しますこれは Auto を設定するのと同じです Image コントロールは BMP GIF ICO JPG PNG WDP(HDP) TIFF 形式のフゔルを扱えますまた Visual Studio 2010 にはゕプリケーションでよく使われる汎用的な画像をメージラブラリとして提供しています ( これは Express Edition には含まれていません ) メージラブラリは \Program Files\Microsoft Visual Studio 10.0\Common7\VS2010ImageLibrary\1041 フォルダーに VS2010ImageLibrary.zip という圧縮フゔルとして用意されているので必要な場合には適当なフォルダーに展開して使います Visual Studio や Office で使われているメージも含まれておりそれぞれのフォルダーには解説用の html フゔルが置かれています ( 下図参照 ) -9-

10 CheckBox オンとオフ Yes と No True と False のように 2 つの値を切り替えるためのコントロールですチェックボックスに表示する内容は Content プロパテゖに指定しますチェックされているかどうかは IsChecked プロパテゖで判断しますがこれは True と False 以外に null も設定できますこれはたとえばはいいいえ該当しない Yes No 無効といった 3 値の切り替えが必要な場合に使いますマウスクリックで 3 値を切り替えるためには IsThreeState プロパテゖをチェックしておきますベントハンドラーでは IsChecked プロパテゖは bool 型ではなく bool? 型 ( Visual Basic では Boolean? 型 ) になることに注意してください RadioButton 複数の選択肢の中から 1 つを選ぶときに使うコントロールですラジオボタンもチェックボックスと同じように表示する内容を Content プロパテゖで指定しますラジオボタンではマウスでクリックしたものが有効 ( チェックされた状態 ) になりそれ以外のラジオボタンは無効 ( チェックされていない状態 ) になりますラジオボタンには GroupName というプロパテゖがあり同じカテゴリーのラジオボタンに同じ名前を指定することで 1 つのウゖンドウの中で目的別のラジオボタンを使い分けることができます GroupName を指定されていないラジオボタンはウゖンドウの中で共通のものとみなされます GroupName="MyTime" GroupName="MyColor" -10-

11 ListBox 長方形の領域の中に表示されている複数の項目の中から 1 つの項目を選ぶためのコントロールですリストボックスに追加する項目は Items プロパテゖで設定しますプロパテゖウゖンドウで Items を探し右側の [...] ボタンをクリックすると下図のようなコレクションエデゖターが表示されますここで [ 追加 ] ボタンをクリックして項目 (ListBoxItem) を追加していきます右側は項目ごとのプロパテゖを編集する場所となっており共通カテゴリーにある Content プロパテゖで表示する文字列を指定できますたとえば 3 つの項目を追加してそれぞれの Content プロパテゖと Foreground プロパテゖをともに Blue Red Green とすると以下の図のようなリストボックスになります項目リスト (Items) はプログラムで追加したり削除したりできますまたリストボックスのどの項目が選択されているかということは SelectedIndex( 位置未選択の時は -1) や SelectedItem などで参照できます SelectionMode を Multiple や Extended にすると複数の項目を選択できるようになります -11-

12 ComboBox 長方形の領域の中に表示されている複数の項目の中から 1 つの項目を選ぶためのコントロールですコンボボックスは前述のリストボックスと同じように Items プロパテゖを使って項目を設定しておきますがこの項目はウゖンドウ上には表示されていませんコントロールの右側にある下向きのをクリックしたときにドロップダウン形式で項目リストが表示されそこから選ぶことができますコンボボックスは選択肢の中から 1 つの項目を選ぶという点でラジオボタンに似ていますラジオボタンに比べてプログラムで項目リストの変更することが容易にできることラジオボタンよりも狭い場所しか使わないこと項目を選ぶためにいったんクリックしてドロップダウンする必要があるといった違いがありますこのため性別 ( 男女 ) や元号 ( 明治大正昭和平成 ) のように選択肢が少ない場合にはラジオボタンを生まれた月 (1~12) や日 (1~31) 都道府県(47 個 ) のように選択肢が多い場合には ComboBox を使うとよいでしょう項目を追加する方法はリストボックスと同じですがコンボボックスは文字列入力を受け付ける機能もあります IsEditable プロパテゖをチェックするとボタンのように表示されていた部分が入力ボックスのようになり実行時にはドロップダウンリストから選ぶだけでなく新たな文字列を入力できます次の図は前述のリストボックスと同じ項目を追加して IsEditable をチェックして実行した様子です IsEditable をチェックしてさらに IsReadOnly プロパテゖをチェックすると入力ボックスは読み取り専用になり編集できなくなりますこの場合でもドロップダウンリストから選択した項目について範囲選択してクリップボードにコピーすることができます -12-

Menu ウゖンドウにメニューバーを追加するためのコントロールですメニューバーは通常ウゖンドウのタトルバーのすぐ下に配置しますこれには第 2 回で学んだレゕウトパネルを使うのが便利ですたとえば Grid で行分割し最初の行に配置することができますあ

..] ボタンをクリックすると次のようなコレクションエデゖターが表示されますここで MenuItem を追加するとトップレベルのメニュー項目が追加されますそれぞれの項目に表示する文字列は右側の Header プロパテゖで指定します

13 Menu ウゖンドウにメニューバーを追加するためのコントロールですメニューバーは通常ウゖンドウのタトルバーのすぐ下に配置しますこれには第 2 回で学んだレゕウトパネルを使うのが便利ですたとえば Grid で行分割し最初の行に配置することができますあるいは DockPanel に配置して DockPanel.Dock="Top" 属性を指定することもできますメニュー項目は Items プロパテゖで設定しますプロパテゖウゖンドウで Items を探し右側の [...] ボタンをクリックすると次のようなコレクションエデゖターが表示されますここで MenuItem を追加するとトップレベルのメニュー項目が追加されますそれぞれの項目に表示する文字列は右側の Header プロパテゖで指定します各メニュー項目に対応するプルダウンはそれぞれの MenuItem 項目に対する Items プロパテゖで指定しますこのときは [ 項目の選択 ] で Separator を選ぶことで区切り線を追加できますさらに Items プロパテゖを使ってサブメニューを追加できます具体的なメニューの追加手順については後述します -13-

14 XAML を使ってコントロールを配置するコントロールによっては WPF デザナーだけでは使いにくいものがありますがこの場合は XAML という記述言語を使いますここではこのようなコントロールの例として ToolBar と StatusBar を取り上げます ToolBar ウゖンドウにツールバーを追加するためのコントロールですツールバーは主にゕコン ( メージ ) を使った比較的小さなボタンを並べたものでメニューよりもすばやく機能を呼び出せますツールバーは ToolBar コントロール上にボタンやコンボボックスなどのコントロールを配置することで実装しますがこの操作は WPF デザナーではサポートされていません ToolBar コントロールは単独でも使えますが通常は複数の ToolBar を ToolBarTray コントロール上に配置しますツールバーに配置するボタンには前述の Button コントロールを使えます ToggleButton( 切り替え式のボタン ) というチェックボックスのように機能するボタンもよく使われます Button コントロールには文字列だけでなくメージも表示できますがこれも XAML を使って記述する必要があります新しい WPF ゕプリケーションを作成して (WPF デザナーではなく )XAML エデゖターを開きますここで <Grid>~</Grid> を以下の <DockPanel>~</DockPanel> で置き換えます <Window <DockPanel> <ToolBarTray DockPanel.Dock="Top"> <ToolBar> <Button Name="btnCut"><Image Source="images/CutHS.png" /></Button> <Button Name="btnCopy"><Image Source="images/CopyHS.png" /></Button> <Button Name="btnPaste"><Image Source="images/PasteHS.png" /></Button> </ToolBar> <ToolBar> <ToggleButton Name="btnBold"> 太字 </ToggleButton> <ToggleButton Name="btnItalic"> 斜体 </ToggleButton> <ToggleButton Name="btnUnderline"> 下線 </ToggleButton> </ToolBar> </ToolBarTray> <TextBox DockPanel.Dock="Top" TextWrapping="Wrap"> </TextBox> </DockPanel> </Window> -14-

XAML(eXtensible Application Markup Language) は XML(eXtensible Markup Language) を元にした記述言語で < タグ名 >~</ タグ名 > でユーザーンターフェスの要素を定義しますこれまで WPF デザナーで編集していたものもその背後では

$zip の "Actions\png_format\Office and VS" フォルダーにある CutHS.png CopyHS.png PasteHS.$

15 XAML(eXtensible Application Markup Language) は XML(eXtensible Markup Language) を元にした記述言語で < タグ名 >~</ タグ名 > でユーザーンターフェスの要素を定義しますこれまで WPF デザナーで編集していたものもその背後では XAML コードに変換されていましたこの例では DockPanel の中に ToolBarTray と Grid が配置されさらに ToolBarTray の中に 2 つの ToolBar が配置され最初の ToolBar には 3 つの Button が配置されそれぞれに Image コントロールが含まれています 2 番目の ToolBar には 3 つの ToggleButton が配置されています図で示すと次のようになりますこの例では前述の Image コントロールで説明したメージラブラリを使っています具体的には VS2010ImageLibrary.zip の "Actions\png_format\Office and VS" フォルダーにある CutHS.png CopyHS.png PasteHS.png を Images フォルダーに取り込んでいます ( メージラブラリは Express Edition には含まれていません ) WPF デザナー ([ デザン ] タブ ) に切り替えると次のように表示されます -15-

XAML を使って配置したコントロールも WPF デザナーに切り替えればコントロールをダブルクリックしてベントハンドラーを定義したりプロパテゖウゖンドウでプロパテゖを設定したりできますメージを載せた Button コントロールを選ぶときには注意してくださいそのままクリックすると Button ではなく Image コントロールを選んでしまうかもしれません

コントロールに選択が移動します同じように [Esc] を押すたびに ToolBar ToolBarTray DockPanel Window と下の階層にあるコントロールに選択が移動していきますコントロールを確実に選択するためにはドキュメントゕウトランを使うこともできますドキュメントゕウトランは下図のようにコントロールの配置されている様子が階層化されて表示されておりこ

16 XAML を使って配置したコントロールも WPF デザナーに切り替えればコントロールをダブルクリックしてベントハンドラーを定義したりプロパテゖウゖンドウでプロパテゖを設定したりできますメージを載せた Button コントロールを選ぶときには注意してくださいそのままクリックすると Button ではなく Image コントロールを選んでしまうかもしれませんどのコントロールを選んでいるかはプロパテゖウゖンドウのタトルの下で判断できます Image < 名前なし > のように表示されていれば Image コントロールが Button btncut のように表示されていれば Button コントロールが選ばれています Image を選んでいるときでも [Esc] キーを押せばそれを配置しているコントロールつまり Button コントロールに選択が移動します同じように [Esc] を押すたびに ToolBar ToolBarTray DockPanel Window と下の階層にあるコントロールに選択が移動していきますコントロールを確実に選択するためにはドキュメントゕウトランを使うこともできますドキュメントゕウトランは下図のようにコントロールの配置されている様子が階層化されて表示されておりここで目的のコントロールを選ぶとプロパテゖウゖンドウにそのコントロールの情報が表示されますここで btncut( ハサミのメージを置いてあるボタン ) を選んでくださいプロパテゖウゖンドウでこのボタンの Command プロパテゖを探し右側の下向きを押すとここで使えるコマンドの一覧がドロップダウンリストとして表示されますここでは Cut を選びます同じように btncopy の Command プロパテゖには Copy を btnpaste の Command プロパテゖには Paste を選んでください( コマンドについては第 4 回で説明します ) このプロジェクトを実行して文字列を入力してください左側の 3 つのボタンによって切り取りコピー貼り付けといった操作が機能することがわかります ( 右側の 3 つのボタンは機能しません ) -16-

17 StatusBar ウゖンドウにステータスバーを追加するためのコントロールです StatusBar コントロールはプロパテゖウゖンドウで Items プロパテゖの右側にある [...] ボタンを押すことで StatusBarItem という項目表示用のコントロールを追加できますまた XAML を使うことで ToolBar と同じく StatusBar にもさまざまなコントロールを配置できます前述のツールバーで作成したゕプリケーションで <ToolBarTray> の記述の後 <TextBox> の記述の前に次のように <StatusBar> の記述を追加します </ToolBarTray> <StatusBar DockPanel.Dock="Bottom"> <StatusBarItem Name="statusDate" Content="(date)" /> <Separator /> <ComboBox Name="comboZoom" Width="70"> <ComboBoxItem Content="75%" /> <ComboBoxItem Content="100%" /> <ComboBoxItem Content="150%" /> </ComboBox> <Separator /> <StatusBarItem Name="statusMessage" Content="message" /> </StatusBar> <TextBox DockPanel.Dock="Top" TextWrapping="Wrap"></TextBox> </DockPanel> </Window> これにより上図のようなステータスバーを追加できますいったんウゖンドウに追加すると WPF デザナーで配置したコントロールのプロパテゖを操作できますツールバーやステータスバーに配置したコントロールもレゕウトパネルに配置する場合と同じようにプロパテゖを設定したりベントハンドラーを割り当てたりできます -17-

レイアウトとコントロール第 2 回で学んだレゕウトとコントロールの配置にはさまざまな設定があります多くのコントロールは配置される位置や大きさを調整するために以下のプロパテゖを持っていますプロパティ意味 Width コントロールの幅数値または Auto 既定値は Auto Height コントロールの高さ数値または Auto 既定値は Auto Margin

18 レイアウトとコントロール第 2 回で学んだレゕウトとコントロールの配置にはさまざまな設定があります多くのコントロールは配置される位置や大きさを調整するために以下のプロパテゖを持っていますプロパティ意味 Width コントロールの幅数値または Auto 既定値は Auto Height コントロールの高さ数値または Auto 既定値は Auto Margin 領域とコントロールの間隔単独の数値で一括指定するか左上右下の順に個別設定既定値はすべて 0 Padding コントロールと表示コンテンツの間隔単独の数値で一括指定するか左上右下を個別設定既定値はすべて 0 HorizontalAlignment 領域中でコントロールを左右どちらに調整するか Left Center Right Stretch のいずれか既定値は Stretch VerticalAlignment 領域中でコントロールを上下どちらに調整するか Top Center Bottom Stretch のいずれか既定値は Stretch HorizontalContentAlignment コントロール中でコンテンツを左右どちらに調整するか Left Center Right Stretch のいずれか既定値は Left VerticalContentAlignment コントロール中でコンテンツを上下どちらに調整するか Top Center Bottom Stretch のいずれか既定値は Top 既定値は標準的なコントロールの場合です領域とコントロールおよびこれらのプロパテゖの関係を以下の図に示します -18-

19 この図で薄い緑色で塗られている部分が領域の中に配置するコントロールさらに Content で示されている部分がコントロール上に表示する内容です Button や CheckBox では表示する内容を Content プロパテゖで設定します前述の ToolBar の例で示した通り XAML で記述することで Content には文字列だけでなく他のコントロールを配置することもできます ( レゕウトパネルを含みます ) これらのプロパテゖが影響を受けやすいのは Grid レゕウトです Grid では列の幅や行の高さのそれぞれについて固定可変 ( 加重平均 ) 自動調整という設定があるためです Canvas レゕウトでは領域の大きさが存在しないため HorizontalAlignment や VerticalAlignment が意味を持ちません StackPanel や WrapPanel では並べる方向 ( 縦または横 WrapPanel は両方 ) の高さや幅は必要な最小値が使われます通常これらの設定が問題になることはありませんがウゖンドウのサズ変更に合わせて領域のサズも自動的に調整されるように設定している場合には注意が必要ですたとえば Grid レゕウトを使うときに TextBox の Width プロパテゖとこの TextBox を配置している列の幅の両方を Auto に設定すると文字を入力するたびに TextBox の幅が広がってしまいますまとめ今回はユーザーンターフェスを作成するためのさまざまなコントロールについて学習しました実際のゕプリケーションではユーザーンターフェスだけでなくどのように動作させるかといったロジックをプログラミングする必要もあります次回はユーザーンターフェスとロジックを連動させるためのベントについて学んでいきます -19-

Visual Studio Do-It-Yourself 第 9 回ユーザーコントロール第 6 回のリソースから第 8 回のテンプレートでさまざまな方法でコントロールをカスタマズできることを学びました今回のテーマであるユーザーコントロールは既存の一つのコントロールをカスタマズするのではな

Visual Studio Do-It-Yourself シリーズ第 9 回ユーザーコントロール -1- Visual Studio Do-It-Yourself 第 9 回ユーザーコントロール第 6 回のリソースから第 8 回のテンプレートでさまざまな方法でコントロールをカスタマズできることを学びました今回のテーマであるユーザーコントロールは既存の一つのコントロールをカスタマズするのではなく