« [P8]WPF 体制下において、ImeMode を切り替える方法 | トップページ | [P10] WPF 体制下における Application.DoEvents() メソッドの代替手段 »

[P9]WPF:どうコンテナコントロールを使ったらいいものか?--私の一つの解 MyUIDesigner --

WPF(Windows Presentation Foundation)下では、GDI(Windows.Forms)の時と同じ名前のものでも、Control のコンテナ(入れ物)の性質・機能が変わってしまっており、それぞれが、厳密に性格づけられ、役割分担するように再構成されています。

        [注] 未整理の方は、以下のリンクで

     http://msdn2.microsoft.com/ja-jp/library/ms754152.aspx

     http://uchukamen.com/WPF/XAML-Panel/

唯一の絶対座標系は Canvas のみで、多くの場合は Panel 系のコントロール(コンテナコントロール)を使い、レンダリングと呼ばれる WPF の新方式の表示配置の仕方によって、UI(ユーザーインターフェース)を作成することになっています。
スクリーンサイズに応じて伸縮できない絶対座標系 Canvas は、印刷その他特殊な局面の使用に限定され、あまり推奨されていないようなことがどこかに書いてありました。

ただ、このレンダリングというのは、やってみると結構面倒な作業です。なかなか、思うところに思うように配置できません。たかが配置だけで、と思うと、腹さえ立ってきます。しかし、まあ、そこは始めたばかりなのだからと、抑えて(?)進みます。

実験はシンプルな道具立てで行うから何も気づきません。そして、実験も兼ねて取り組んだ私の一番簡単なアプリケーション(デスクトップ・スタンドアロン)はこれで完成してしまいました。

ヤッターと思いました。第1号 WPFプログラムです。
 MyCalc という名の足し算・引き算専用の電卓のような計算プログラム。電卓と違うのは、記録が残り、誤って打ち込んだかどうか突き合わせができて、間違ったところだけ訂正すれば、すべてが自動的に修正されるというもの。要するに打ち直しをしないで済むという便利さが売り物(買い手はつかないでしょうが)。

ところが、です。

ところが、こうして進んで、いろいろな自分のアプリケーションの書き換えに思いを馳せていくと、ハタと困ってしまいました。

私の事務処理プログラムの中には、多数のLabel + TextBox, 複数の ListBox, RadioButton を内蔵する複数の GroupBox が、1つのフォーム中にところ狭しとギシギシと詰め込んであるものが多いのです。それでこそ、実生活の役に立つというものです。1レコードのデータ入力にそれだけのものが必要なのです。

こんなの、Canvasを使わないで、どうやって配置しろというのでしょうか。コンテナ・コントロールの中に、コンテナ・コントロールを入れて、またその中にコンテナ・コントロールを入れて、そしてやっと目的のコントロールをいれるのけ!!!そんなの、コンテナだらけや。一見しただけで楽(らく)そうではないから、相当複雑な積み重ねがいるし、それだけ相互間の配置関係の調整もたいへんそう。配置だけにそんなにエネルギーかけるのはまっぴら御免、と言いたくなります。

我慢できる程度の重なりならそれでいいでしょう。でも、限度を超えたら、結局 Canvas なのでしょうか。たくさんのコンテナ重ねて、順番考えて、1個1個 HorozontalAlignment が Left だとか、DockPanel.Dock が Bottomとかやって、Margin をどうこうしないとうまくないなんてやってられるか、と一方ではいいたくなります。絶対座標なら一発でかたづくものを「大味で鈍い?」配置道具をいくつも重ね合わせて一件落着するまでの道のりがまた遠いのです。こんな形で、これから50近くもある自分のアプリケーションを書き換えていくのかと思うと気が滅入ってきます。

  そんなことを悩んでいたら、一つアイディアが飛び出しました。そうだ。自分で、大まかな配置用デザイナーのプログラムを先に作って、それを使いながら、書き換えをしていこうと。
 
  それで、WPF 第2号プログラムは、この MyUIDesigner になりました。
他の方の御参考、乃至お役にたつこともあるかと思い、アイディアを紹介しておきます。

二つの Window を使います。メイン・ウィンドウで簡単に配置情報を入力し、サブ・ウインドウで実際に画面を描いてみるというものです。

メイン・ウィンドウには ListBox (必要に応じて TextBox)をたくさん作って、ListBox の一つずつに、コントロールの種類、親要素、Width、Aligment などの情報を Click するだけで選べるようにします。
  そして、その全 ListBox で選んだ情報を1レコードとしてファイルに保存できるようにします。例えば、Window に DockPanel を配置する場合、DockPanel の全レンダリング情報が1レコードです。
  そして、ファイルに保存される順番がそのままプログラミングを進めていく場合の順番(階層構造の順番)ということになります。
 
  メイン・ウィンドウで作られた情報をもとに、それをサブ・ウィンドウに描けるようにするのが、サブ・ウィンドウのプログラミングになります。私は、StackPanel, DockPanel, Grid, Canvas のみを使うという前提で、この4種類を必要な数だけ作りだし、種類ごとに『そのオブジェクトを配列で受け取り』、メイン・ウィンドウの情報をこのオブジェクト配列に結びつける形にしてみました。
 
  ちょうど、それが今完成したところです。一応、テスト段階では充分使えるという感じです。たいへん、快適です。一部、 TextBox からの入力と、後は ListBox からの選択だけで、Window がすぐに描けます。細かいところは、コーディングでいくらでも対処できますから、大まかなところがこれで解決すれば充分です。これで、よし、ということになったら、その情報でコーディングすれば簡単に自分の求めるユーザーインターフェース画面の骨格が出来上がってしまい、失敗がありません。これから、書き換えに入る段階なので、それ以上のコメントは現在できません。
   
私は、[P13] で書いていますように、XAMLを使わずに言語コード一本で組み立てる方針が既に決まっておりますが、XAML を使う場合でもこのようなプログラムは役立つのではないかと思われます。
最初に作ると、それがレンダリング関係の勉強にもなり、その結果は今後のプログラミングを楽にしますから、一挙両得です。 

[後記] 
   WPF第3号プログラム(電話帳)が完成した段階で、コンテナコントロールの積み重ねの中間段階から終盤段階にかけて、意識的に Grid を使った整理の仕方を追求すると、StackPanel の積み重ねを減らせることがわかりました。そして、Grid の一つのセル内にStackPanel を配置し、その中に Label や TextBox を配置する、というところまで発展していきます。Grid の中に RadioButton を配置するのが有効な場合もあります。
  ただ、手間のかかる Grid の作成は、そのための独立のクラスを自分で用意し、行列それぞれが可変長の長さであるものを自由に簡単に作れるように準備しておかないと作業が大変です。
  私は、この段階で最初の MyUIDesiner に少し手を加え、セル内部にもコンテナコントロールを配置できるようにして精緻化致しました。

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
目次に戻る ・・・・ 左欄のカテゴリー 【パソコンの窓】 をクリック
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

|

« [P8]WPF 体制下において、ImeMode を切り替える方法 | トップページ | [P10] WPF 体制下における Application.DoEvents() メソッドの代替手段 »

コメント

コメントを書く



(ウェブ上には掲載しません)




« [P8]WPF 体制下において、ImeMode を切り替える方法 | トップページ | [P10] WPF 体制下における Application.DoEvents() メソッドの代替手段 »