トップ > wxHaskell > wxFormBuilder　を使う（２）「woBoxSizer でパーツを配置」

wxFormBuilder　を使う（２）「woBoxSizer でパーツを配置」

wxHaskell Haskell wxFormBuilder

python入門から応用までの学習サイト python-izm.com の BoxSizer を参考にボタンを配置してみます。

BoxSizer はボタンやテキストなどの部品を縦方向もしくは横方向へ連続して配置するためのものです。縦に連続して配置するか、横に連続して配置するかは右のプロパティ、orient で決定します。

  • パーツのツリー構造

    • プロジェクトにフレームを追加。
    • フレームを選択し、BoxSizerを追加。縦に並べるを選択。
    • BoxSizerを選択して、パネルとボタンを追加。
    • パネルを選択して、BoxSizerを追加。横に並べるを選択。
    • BoxSizerを選択して、ボタンを５回追加。

配置したパーツはView->XRC Window(F5)でその都度確認できます。

  • 配置されたボタン


  • パーツの位置調整

    • 左よせ・中央・右よせ、上よせ・中央・下よせ。
    • 次４つの矢印に囲まれた四角がExpand。デザイナーのボタン６を選択してこのボタンを押すと標準のサイズから横いっぱいに広がった状態に変化します。
    • 上と右の矢印があるのがStretch。ボタン６を選択してこのボタンを押すと高さが標準のボタンから、フレームが２等分された高さに変化します。
    • 右の１辺を実践、３辺を点線で囲まれた四角は Border を有効にするかどうかのボタンです。Borderは右側プロパティの一番下にあり、デフォルトでは5に設定されています。ボタンを有効、無効にするとパーツのボーダーが変化し、flagのチェックも変化します。
  • 生成されたXRC。File -> Import XRC... で読み込み。File -> Genarate Code で書き出します。生成するコードは Project のプロパティ code_genaration のチェックで決定されます。
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<resource xmlns="http://www.wxwindows.org/wxxrc" version="2.3.0.1">
	<object class="wxFrame" name="MyFrame1">
		<style>wxCAPTION|wxCLOSE_BOX|wxFRAME_SHAPED|wxSYSTEM_MENU|wxTAB_TRAVERSAL</style>
		<size>500,300</size>
		<title>BoxSizer Test</title>
		<centered>1</centered>
		<aui_managed>0</aui_managed>
		<object class="wxBoxSizer">
			<orient>wxVERTICAL</orient>
			<object class="sizeritem">
				<option>1</option>
				<flag>wxALL|wxEXPAND</flag>
				<border>5</border>
				<object class="wxPanel" name="m_panel1">
					<style>wxTAB_TRAVERSAL</style>
					<object class="wxBoxSizer">
						<orient>wxHORIZONTAL</orient>
						<object class="sizeritem">
							<option>0</option>
							<flag>wxALL</flag>
							<border>5</border>
							<object class="wxButton" name="m_button1">
								<label>MyButton1</label>
								<default>0</default>
							</object>
						</object>
						<object class="sizeritem">
							<option>0</option>
							<flag>wxALL|wxALIGN_CENTER_VERTICAL</flag>
							<border>5</border>
							<object class="wxButton" name="m_button2">
								<label>MyButton2</label>
								<default>0</default>
							</object>
						</object>
						<object class="sizeritem">
							<option>0</option>
							<flag>wxALL|wxALIGN_BOTTOM</flag>
							<border>5</border>
							<object class="wxButton" name="m_button3">
								<label>MyButton3</label>
								<default>0</default>
							</object>
						</object>
						<object class="sizeritem">
							<option>0</option>
							<flag>wxALL|wxEXPAND</flag>
							<border>5</border>
							<object class="wxButton" name="m_button4">
								<label>MyButton4</label>
								<default>0</default>
							</object>
						</object>
						<object class="sizeritem">
							<option>1</option>
							<flag>wxALL|wxEXPAND</flag>
							<border>5</border>
							<object class="wxButton" name="m_button5">
								<label>MyButton5</label>
								<default>0</default>
							</object>
						</object>
					</object>
				</object>
			</object>
			<object class="sizeritem">
				<option>1</option>
				<flag>wxALL|wxEXPAND</flag>
				<border>5</border>
				<object class="wxButton" name="m_button6">
					<label>MyButton6</label>
					<default>0</default>
				</object>
			</object>
		</object>
	</object>
</resource>