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

ぺぷしのーげん

大企業からスタートアップに転職したアプリケーションエンジニアのブログ

WPFのTabControlでタブを複製する方法

f:id:hazakurakeita:20150902220743j:plain

今さらながらWPFを勉強してます。会社では未だにWindowsFormが主流なんですよね。お恥ずかしい限りです。で、タブの中に設定画面があって、タブを追加すると同じ設定画面が表示されるようなUIを作ろうとしたんですが苦戦してしまいました。ようやくできたので、メモ書きとして記事にしときます。

 

こんなイメージ

f:id:hazakurakeita:20160120202304p:plain

白い部分はTabControlです。タブがゼロですが、Newボタンを押すとここにタブを追加します。

 

f:id:hazakurakeita:20160120202403p:plain

はい追加されました。まだタブを開いていないので真っ白です。タブを開いてみましょう。

 

f:id:hazakurakeita:20160120202447p:plain

こんな感じです。さらにNewボタンを押すと、これと全く同じタブが無限に複製されていきます。このやり方をメモしますよー。

 

タブの中身をUserControlで作成する

f:id:hazakurakeita:20160120202647p:plain

プロジェクトにUserControlを追加しましょう。これは簡単に言うと、UIの中身のコンポーネントを作ってしまうものです。WPFの中にUserControlを埋め込めば、UIの中にUIを埋め込むことができると。詳しくはUserControlでググればいっぱいでてきます。

 

さて、どうやってタブにUserControlを埋め込むか?

UserControlの作り方はWPFのウインドウの作り方と同じです。だからすぐできます。問題はこのUserControlをどうやってタブに埋め込むか?Gridに入れるとかだとググればたくさん情報が出てくるのですが、タブに埋め込む方法がなかなかなかった。最初はこんなことして失敗してました。

 UserControl全体のGridを投げてました。これだと上手くいかなかった。。ここにTabPageやTabControlを投げてもみましたが、同じく失敗。TabControlはちゃんと動きましたが、当然タブの中にタブができてやりたいことと違いました笑。そしてようやくできたのがこれ。

 UserControlのインスタンスをTabItemインスタンスのContentプロパティにセットして、TabControlに追加すれば良かったんですね。

f:id:hazakurakeita:20160120202447p:plain

これで無限に全く同じタブを複製できます。僕のググり方が悪かったのかもしれませんが、なかなか見つかりませんでした。MSDNとか潜ってみてようやく実現できました。いやーWPF奥が深いですねー。

 

おしまい。