WindowChromeでWPFのRibbonWindowの枠を改善する

以前、こちらの記事で.NET4.5ではリボンウィンドウの枠が残念な感じになってしまうという話をしました。しかし、WindowChromeをいじるといいみたいな話がどこかで出ていたので、ちょっと色々と試してみました。

WindowChromeクラスはウィンドウの非クライアント領域のカスタマイズをするためのクラスのようです。

WindowChrome クラス

私も詳しくはわかっていないのですが、このクラスをうまく使うと、Windowsの一般的なウィンドウ枠を一切使わない独自のウィンドウ枠や、もしくはWindows7のWindowsフォトビュアーやエクスプローラーなどで見られる、画面全体にAeroのすりガラスのエフェクトを掛けたりするといったことができるようです。

それでは一度ここで、WindowChromeを使ってない、以前の記事にも出てきたみすぼらしいウィンドウ枠を見ておきましょう。

このようにウィンドウ枠が細り、角もきれいな円弧となっていません。

ここで、WindowChromeを使って全体をすりガラスにし、さらにボーダーの太さをいじってみました。

おっ！これはいい感じだ！だいぶマシになってる！
ではここでソースコード行ってみましょう。

<RibbonWindow x:Class="WindowChromeTest.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
        xmlns:l="http://schemas.livet-mvvm.net/2011/wpf"
        xmlns:v="clr-namespace:WindowChromeTest.Views"
        xmlns:vm="clr-namespace:WindowChromeTest.ViewModels"
        Title="MainWindow" Height="350" Width="525" BorderThickness="5" >

    <WindowChrome.WindowChrome>
        <WindowChrome GlassFrameThickness="-1" ResizeBorderThickness="7" />
    </WindowChrome.WindowChrome>

    <Window.DataContext>
        <vm:MainWindowViewModel/>
    </Window.DataContext>
    
    <i:Interaction.Triggers>
        <!--WindowのContentRenderedイベントのタイミングでViewModelのInitializeメソッドが呼ばれます-->
        <i:EventTrigger EventName="ContentRendered">
            <l:LivetCallMethodAction MethodTarget="{Binding}" MethodName="Initialize"/>
        </i:EventTrigger>

        <!--Windowが閉じたタイミングでViewModelのDisposeメソッドが呼ばれます-->
        <i:EventTrigger EventName="Closed">
            <l:DataContextDisposeAction/>
        </i:EventTrigger>

    </i:Interaction.Triggers>

    <DockPanel>
        <Border BorderBrush="Black" />
        <Ribbon DockPanel.Dock="Top" BorderThickness="1" >    
            <Ribbon.QuickAccessToolBar>
                <RibbonQuickAccessToolBar>
                    <RibbonButton SmallImageSource="/WindowChromeTest;component/Images/Configuration.ico" />
                    <RibbonButton SmallImageSource="/WindowChromeTest;component/Images/Information.ico" />
                </RibbonQuickAccessToolBar>
            </Ribbon.QuickAccessToolBar>
            <RibbonTab Header="Home">
                <RibbonGroup Header="Group">
                    <RibbonButton LargeImageSource="/WindowChromeTest;component/Images/Configuration.ico" Label="Config" />
                </RibbonGroup>
            </RibbonTab>
        </Ribbon>
        <TextBox Text="これはテキストボックスです" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible" />
    </DockPanel>
</RibbonWindow>

WindowChromeでリサイズボーダーの太さを設定すると同時に、RibbonWindowのほうでボーダー太さも設定していることに注意してください。

ただし、これが良いことずくめかというとそういうわけでは無いようです。

まず1つ目は気づいている方もいるかとは思いますが、クライアント領域の外側の枠がありません。なんかのっぺらぼうみたいな感じで違和感ありますね…。なんかいい方法は無いんでしょうかね。

2つ目は割と致命的です。ウィンドウを最大化してみると…

タイトルバーが真っ黒になってしまいましたorz
クイックアクセスツールバーや、最小化、元に戻す、閉じるボタンは有効なようです（この3つのボタンは見えませんがその位置をクリックするとちゃんとその効果があるようです）。

うーん、困ったなあ。Fluent Ribbon Control Suiteも含めて文句なしの手段が無いのがまた困りものです。

ついでにですが、Windows8だと結構まともに動いてくれるようです。

っていうか、そもそもWindows8だとあの極細のみっともないウィンドウ枠もあんまり目立ってダサくないんですよね…。