MahAppsのTreeViewをWPFで使ったときの話

MahAppsは、WPFでフォームやコントロールの見た目をユニバーサルアプリ風(旧メトロ風)に表示するためのUIライブラリです。
紹介はほかのサイトが詳しいと思いますが、コードがGitHubで公開されていて、紹介とドキュメントが以下のページに乗っています。

https://mahapps.com/

WPFのデザインを最初から作成すると大変なので「それっぽい見た目」を簡単に作るときに重宝します。

で、このMahAppsでTreeViewを使ったときの話です。

表示される見た目はこんな感じです。

f:id:Takachan:20160106225824p:plain

原寸大表示にしてこのTreeViewItemの右側の三角形をよく見てほしいのですが

「なんかにじんで」

いるように見えませんか？

自分のエクスプローラのちょっと角が丸いですが、三角形は別ににじんでいません。

f:id:Takachan:20160106230541p:plain

これ、実はコントロールにアンチエイリアスがかかっているせいでこうなっています。

MahAppsのコードをダウンロードしてきて

Controls.TreeView.xaml

を開き、

<Style x:Key="MetroTreeViewItem"

という部分を検索します。

そして以下のx:Name="Expander"部分をへアンチエイリアスを無効にするためのコードを追加します。

<ToggleButton x:Name="Expander"
              Style="{Static[f:id:Takachan:20160106230541p:plain]Resource ExpandCollapseToggleStyle}"
              IsChecked="{Binding Path=IsExpanded, RelativeSource={x:Static RelativeSource.TemplatedParent}, Mode=TwoWay}"
              ClickMode="Press" 
              RenderOptions.EdgeMode="Aliased"/> <!-- ← 追加！ -->

上記コメントの宣言を追加するだけです。

RenderOptions.EdgeMode="Aliased"

そうすると、

f:id:Takachan:20160106230213p:plain

今度はにじまずにはっきりと表示されます。
但しこの設定少し弊害があって、TabPage切り替え時などのコントロールが移動するアニメーションで少し三角形の縦線がちらつきます。

まぁ本当によく見ていないと分からないですが…

WPFのTreeViewItemの三角形の正体は…

なんとトグルボタンだったんですね！
全く知りませんでした。

まぁ、TreeViewのテンプレート見ればわかる話ですけが(汗)

展開されたときが押されたときのONで、閉じているときがOFFだったんですね。
性質はトグルボタンっぽいです。

そういった意味でもオープンソースのコードって勉強になりますね。