こんにちは、働くC#プログラマーのさんさめです。
WPFで、
折り畳みができるコントロールと言えば、
Expanderですね。
Expanderは、通常、
クリックすると内部要素が下側に展開されますが、
ExpandDirectionプロパティで、
折り畳みの方向を変更することができます。
ExpandDirectionにLeftやRightを指定することで
サイドバー的なコントロールを作ることができるのですが…
実際に使用してみるとこんなことになります。
Expanderのヘッダーに文字を入れると、
このように横書きになります。
控え目に言って…ダサい！
イケてないのもたしかにありますが、
画面を無駄に消費しているのも問題です。
現代のモニターは高解像度化が進んでいるとはいえ、
ほとんど意味のない領域があるというのは、
ユーザーに良い体験を与えているとは言えません。
（もちろんギチギチでもダメなのでバランスは必要ですが…）
というわけで本記事では、
以下の画像のように、
Expanderのヘッダーを縦書きにする方法を解説します。
イメージしてた縦書きと違ったらごめんなさい
LayoutTransformを使ってコントロールの配置を変更
といっても、大したことはしません。
WPFには、LayoutTransformという、
コントロールの配置を変更する機能が入っています。
LayoutTransformでは、以下の機能を使って、
配置を変更できます。
今回のケースでは、「回転」を使って、
縦方向に文字が並ぶTextBlockになるように
配置を調整するだけで、縦書きヘッダーが実現できます。
さて、その前に前提のおさらいです。
冒頭の画像、
ヘッダーが横書きになっているxamlは以下の通りです。
<Window x:Class="GridSnapExpander.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="250" Width="300">
<DockPanel>
<Expander DockPanel.Dock="Right"
ExpandDirection="Right"
Header="サブ画面">
<TextBox Text="サブ画面のつもり"/>
</Expander>
<TextBox Text="メイン画面のつもり"/>
</DockPanel>
</Window>
Expanderのところに注目します。
<Expander DockPanel.Dock="Right"
ExpandDirection="Right"
Header="サブ画面">ExpandDirection=”Right”で、
右方向に折りたたまれるようにしています。
Headerは普通に文字列のみです。
それでは早速LayoutTransformを設定したいのですが…
Headerに直接文字列を書いている場合は、
これを設定することができません。
なので、仕方なく
Headerの中身に自前でTextBlockを置きます。
これでようやく
LayoutTransformプロパティを設定することができます。
さっそく入れてみましょう。
で、実行してみます。
実行した結果は以下の画像のようになります。
え？もう完成じゃん
はい、これで良い…のですが…
よく見ると、
なんか「サブ画面」の文字がにじんでます。
は？分からん
よく分からないかもしれないので、
拡大してみましょう。
ついでに横書きに戻してみました。
「画面」の文字に着目すると、
明らかに縦書きヘッダーの方はにじんでいます。
細かい…細かくない？
細かいかもしれませんが、
気になるんです。
というわけで、これを修正しましょう。
RenderTransformで見た目のみを変更する
こんな時にもWPFは機能を用意してくれています。
それが、RenderTransformという、
配置に影響せず見た目のみを変更する機能です。
RenderTransformにおいても
LayoutTransformと同様に、
拡縮や回転ができるのですが、
これに加え、平行移動も可能になっています。
この「平行移動」を使って、
文字のにじみを修正します。
こういうのは経験則的に
0.5ピクセルずらすと直るはず…
というわけで、縦横ともに
0.5ピクセルだけ平行移動させます。
これで、冒頭の画像の縦書きバージョンのようになります。
念のため、拡大比較してみましょう。
ちょっとまだにじんでる気もしますが…
ずらす前と比べるとだいぶ良くなりました。
少し脇道に逸れてしまいましたが、
これにて縦書きExpanderは完成です。
気兼ねなく横方向のExpanderが使えると、
ツールの見た目の幅も広がることと思います。
ぜひ試してみてください。
まとめ
まとめです。
- 横方向に折りたたむExpanderは
デフォルトだとスペースを取る - 横方向Expanderでは、
ヘッダーを縦書きにしたい - LayoutTransformを使うと、
回転拡縮などを使って配置の変更ができる - RenderTransformを使うと、
見た目のみの変更ができる- つまり配置に影響を与えない
- にじみは0.5ピクセルずらすとマシになる
最後までお読みいただきありがとうございました。
コメント