読者です 読者をやめる 読者になる 読者になる

Itsukaraの日記

最新IT技術を勉強・実践中。最近はDeep Learningに注力。

PowerShellでGUI:WPFの部品をほぼ全て含むデモ公開

PowerShellWPFGUIを表示できることが分かり、Visual Studioを使うとWPFGUIを簡単にプレビュー/設計できることが分かったので、WPFの全ての部品(コントロール)を試してみようと思い、デモプログラムを作成しました。下記がそのスクリーンショットです。

WpfZoo.ps (WPF部品の動物園)

  • WPFの色々なコントロールを表示するデモプログラムです。
  • 表示だけでなくクリックしたボタンの表示(画面下部に表示)等も行います。
  • なお、下記はスクリーンショットなのでクリックできません、プログラムをgithub(最後の方に記載)からダウンロードし、実行して試してください。
TabItem1 (最初の画面、色々な部品を配置)
  • ボタン、リスト、テーブル等をクリックしてみてください。

f:id:Itsukara:20170402211150p:plain

TabItem2 (色々な部品を配置)
  • カレンダー、Expanderや、スライダーを試してみてください。

f:id:Itsukara:20170402211402p:plain

Tab for DocPanel (DocPanelのデモ)
  • MenuItemや、画面左のTreeViewで項目を選択してみてください。

f:id:Itsukara:20170402211413p:plain

Tab for DocumentViewer (FrDocumentViewerのデモ)
  • xpsのビューアーです、ズーム等ができます。

f:id:Itsukara:20170402211418p:plain

Frames (Frameのデモ)
  • 画面上のボタンをクリックしてFrameを表示してみてください。

f:id:Itsukara:20170402211505p:plain

Media (MediaElementのデモ)
  • 動画の再生、一時停止、再生ができます。

f:id:Itsukara:20170402211518p:plain

RichTextBox (RichTextBoxのデモ)
  • 表示内容の書換、文字属性や文節属性の変更ができます。
    • ただし「下付き」「上付き」は、数字以外は上手く行きません。(原因不明)

f:id:Itsukara:20170404011522p:plain

画面上の各WPF部品に対応するxamlの確認方法
  • Visual StudioWPFプロジェクトを新規作成(ここここを参照)
  • Visual Studioの画面下部に表示されたxaml文字列の<Grid>と</Grid>で囲まれた部分を、プログラム内のxamlの<Grid>と</Grid>で囲まれた部分で置換
    • 事前にxaml中の文字列PSScriptRootを、プログラムを置いたパスで置換
    • これにより、プログラムと同様の画面がVisual Studioで表示される
  • Visual Studioの画面上のWPF部品をクリックして選択すると、画面下部のxaml中で対応する行が選択されるので、WPF部品とxaml文字列の対応が分かる

WpfFrame*.ps (Frameのちゃんとしたデモ)

上記のうち、Frameは、単に表示するだけで、表示したFrameでのアクションは何もないものでした。これでは使えないので、Frameのデモも作成しました。下記がその画面です。あまり複雑な画面に見えませんが、分からないことが多く、結構苦労しました。

最初の画面
  • 表示された画面左上の「スタート」をクリック

f:id:Itsukara:20170402211800p:plain

Frame内にPage1を表示
  • 名前等を入力後、「次へ」をクリック

f:id:Itsukara:20170402211805p:plain

Frame内にPage2を表示
  • 好きなフルーツを選択後、「次へ」をクリック

f:id:Itsukara:20170402211809p:plain

Frame内にPage3を表示
  • 「上記内容を確認しました」をチェックし、「登録」をクリック
    • 未チェックではエラーが出て、チェックするまで登録できない

f:id:Itsukara:20170402211814p:plain

Frame内にPage4を表示
  • この後、更に「スタート」をクリックすると次の登録画面になる

f:id:Itsukara:20170402211819p:plain

  • 補足情報
    • 登録情報の履歴が、画面下に表示される(この欄はスクロール可能)
    • 画面左上の「←」と「→」によって、画面を戻ったり、進めたりできる
    • この際に、既に入力した情報は保存される
苦労話

Frameでは、元々、外部フィルにPageのxamlファイルを置いて、Frame.Navigate()で読み込むしかないと思っていたので、callbackをいつ設定したら良いかわからず、実現に苦労しました。

ところが、よくよく見ると、Frame.Navigate()の引数としては、xamlでなく、ロード済みのformを渡すこともできることが分かりました。よって、あらかじめxamlを基にformをLoadして、callbackを設定すればよいので、とてもスッキリした作りになりました。

ソースコード

ソースコードは長いのでblogに記載せず、githubにアップロードしました。プログラムの説明も、ソースコードに少し書いていますので、読んでお試しください。

github.com

あとがき

参考になる情報もあり、WpfZooは結構簡単に作れたのですが、Frameは適切な例がなく、かなり苦労しました。しかし、苦労の過程で、Visual StudioでのWPF画面の確認方法や設計のコツ、PowerShell ISEでのデバッグ方法なども習得することができました。