Microsoft Ribbon のグラデーション効果を削除する

現在、Microsoft Ribbon for WPF を使用したアプリケーションを作成しているのですが、デザインを詰める段階になって、なかなかしんどい事態に遭遇しました(参考:残念なMS Ribbonについて - DICOM Viewer 開発記)。例えば、Ribbon の背景色をデフォルト色から黒っぽい色 (#333333) に変更してみます。

before

after

こんな感じで、単に背景色の設定を変更しただけだと不思議なグラデーションが残ってしまいます。デフォルト色や明るめの色であればグラデーションが残っていてもまだ何とかなりそうですが、背景色に暗い色を設定するとフォント色との兼ね合い等で非常に苦労する事になります。当初は、Expression Blend 辺りを使用して無理やり変更すれば何とかなるのかなぁとか思っていたのですが、お決まりの「何故か分からないけどうまくいかない」事態*1 が発生しまして、しばらく 不貞寝 絶望していました。

ライブラリ自体を修正する

絶望していても仕方がないので、取りあえずサンプルプログラムでも見てみるかと Microsoft Ribbon for WPF Source and Samples.msi をダウンロードしてみると、サンプルプログラム用のプロジェクトだけでなく Ribbon ライブラリ自体のプロジェクトもくっついている事が分かりました。そこで、「これはもう……ライブラリ自体を修正してしまうか」と思い立ち、Genric.xaml を修正してみました。修正箇所は、以下の 3 点です。

  • Ribbon の Background
  • RibbonTabHeader の CheckedBackground
  • RibbonGroup の PART_HotBackground.Background

v3.5、v4.0 両バージョンの Generic.xaml 修正版を FlatRibbonThemes - GitHub にアップロードしていますので、詳細はそちらで確認して下さい。

さて。修正が終わったらこれをビルドし、できあがった RibbonControlsLibrary.dll を標準の dll の代わりに参照してビルドし直してみます。以下に、先ほどのデフォルト色、および黒っぽい色 (#333333) でビルドしたアプリケーションの画像を示します。

before

after

グラデーションが消えた!

ようやく「何とかなりそう」と言う感触を得られる段階まで持ってくることができました。上記の画像の右側のボタンや、画像には写っていないですが、ファイルメニュー、ツールチップ辺りもグラデーション効果が使われているのでまだ完全ではないですが、まぁ必要になったタイミングで少しずつ消していこうかと思います。

Ribbon 用の Generic.xaml を眺めていると、上記以外にもかなりの色、効果がハードコーディングされているようで、デザインをカスタマイズするにはかなり厳しいなと言う印象を持ちました。標準以外のデザインで本格的に Ribbon UI を持つアプリケーションを作成する場合は、カスタマイズしやすいような xaml にしておくと言う選択肢も検討した方が良いかもしれません。

*1:Blend 上では設定が反映されるのに実際に実行するとグラデーションが残ったまま、とか、設定は反映されたがウィンドウのタイトルヘッダ等のレイアウトが何故か大きく崩れてしまう、とか。