【非推奨】WPFでリボンUIを使用する

MS Office製品でお世話になってるリボンUI(Microsoft.Windows.Controls.Ribbon)を最近の環境（VisaulStudio2017）で使用する方法です。

注意:

タイトルの通り、標準ライブラリのリボンUIの利用は非推奨です。標準ライブラリ化されているにも関わらず、かなり前からメンテナンスされていないようで、Windows8やWindows10のスタイルにリボンの見た目が対応されていません。今後もアップデートの見込みがほぼ無さそうなので、新規にデスクトップアプリに組み込むのはやめましょう。

導入方法

非推奨ですが、導入方法を紹介します。WPFアプリのプロジェクトを作成し、プロジェクトの[参照]から[参照の追加]選択し、System.Windows.Controls.Ribbonを追加します。

補足:

昔は、Microsoft.Windows.Controls.Ribbonといって、インストーラからライブラリを導入する必要がありましたが最近の環境であればインストールなどは一切必要ありません。

コンテキストメニューから参照の追加を選択します。

f:id:Takachan:20170625010356p:plain

アセンブリ内から項目を探してチェックを入れ、[OK]を押します。

f:id:Takachan:20170625010717p:plain

リボン用にコードを編集する

MainWindow.xamlのウインドウの定義をWindowからRibbonWindowへ変更します。

<!--
　この部分
   ↓ -->
<RibbonWindow x:Class="Ribbons.MainWindow"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

このままではコンパイルが通らなくなるので、MainWindow.xaml.csを合わせて編集します。

using System.Windows.Controls.Ribbon; // 追加

// 基底クラスを Window から RibbonWindow へ変更する
public partial class MainWindow : RibbonWindow
{

そして、実行すると以下のような見た目のウインドウが表示されます。

f:id:Takachan:20170625014031p:plain

コントロールを配置する

MainWindow.xamlにリボン用のコントロールを載せていきます。Gridの下に、Ribbon、RibbonTab、RibbonGroupを階層的に配置し、RibbonGroupの中にRibbonButtonなどの操作するコントロールを配置していきます。

<RibbonWindow x:Class="Ribbons.MainWindow"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:local="clr-namespace:Ribbons"
              mc:Ignorable="d"
              Title="MainWindow"
              Height="350"
              Width="525">
    <Grid>
        <Ribbon>
            <RibbonTab Header="ホーム">
                <RibbonGroup Header="グループ A">
                    
                    <RibbonMenuButton Label="メニューボタンA"
                                      LargeImageSource="/assets/icons8-shield-knight.png">
                        <RibbonMenuItem Header="1"
                                        ImageSource="/assets/icons8-k.png"/>
                        <RibbonMenuItem Header="2"
                                        ImageSource="/assets/icons8-k2.png"/>
                    </RibbonMenuButton>
                    
                    <RibbonButton Label="ボタン 1"
                                  SmallImageSource="assets/icons8-shield-1.png"/>
                    <RibbonButton Label="ボタン 2"
                                  SmallImageSource="assets/icons8-shield-2.png"/>
                    <RibbonButton Label="ボタン 3"
                                  SmallImageSource="assets/icons8-shield-3.png"/>
                </RibbonGroup>
                
                <RibbonGroup Header="グループ B">
                    <RibbonCheckBox Label="チェックボックス1"
                                    SmallImageSource="assets/icons8-src.png"/>
                    <RibbonCheckBox Label="チェックボックス2"
                                    SmallImageSource="assets/icons8-java.png"/>
                    <RibbonToggleButton Label="トグルボタン"
                                        SmallImageSource="assets/icons8-github-32.png"/>
                </RibbonGroup>
                
            </RibbonTab>
            
            <RibbonTab Header="カスタム書式"/>
            <RibbonTab Header="データベース"/>
        </Ribbon>
    </Grid>
</RibbonWindow>

これを実行すると以下のような画面が表示されます。

f:id:Takachan:20170625015052p:plain

アイコンはicon8さんを使用しています。

まとめ

実行時のウインドウ表示を見ると見れば分かりますが、表示が変です。

左右のボーダーが太く、下のボーダーは細い
タイトルバーの、文字の位置が上に寄っている、標準とフォントのサイズ、色が異なる

クイックアクセスバーなどを使用しないのでRibbonWindowではなく、Windowの上にRibbon載せればデザインが外観が正常になるのかと思い試したのですが、

f:id:Takachan:20170625020123p:plain

画像の通り、クイックアクセスバー用の領域がウインドウ内に表示されてしまい、制御できません。

また、最大化すると文字と画像が画面の外へはみ出します。（キャプチャミスではなく本当にこうなります）

f:id:Takachan:20170625020421p:plain

これらの問題を、修正するためにスタイルを頑張って修正しようとすると、かなり難作業が予想されます。（不可能かもしれませんし、時間の無駄です）また、デザインがOffice2007準拠となっています。カーソルがホバーしたときの色や、チェックボックスのチェック、トグルボタンなどのデザインなどすべてそうです。（もう10年も前のデザインですね）

と、いうわけで、.NET標準のリボンコントロールは非推奨、という話でした。

代替案の提案 - Fluent.Ribbonの利用

オープンソースでFluent.Ribbonというものがあるので、もしリボンをデスクトップアプリで使用するならそちらを使用しましょう。こちらは開発が現在も続いているためデザインはほぼ問題ないようです。

調査ついでに調べた事をまとめたので、良かったら以下を参照ください。

takachan.hatenablog.com