泥庭

2014年4月8日

【WPF】Ribbonを使う(その②:RibbonWindow編)

Filed under: .NET, WPF — タグ: , , — yone64 @ 10:03 PM

準備が整ったところで、さっそくRibbonメニューを使ったWindowを作ってみましょう。

通常のWindowの場合

とりあえず、WindowにRibbonを配置して、適当にボタンやらなんやらを追加してみましょう。

image

XAML的は、こんな感じです。

<Window x:Class="RibbonApplicatin.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="362" Width="911">
    <Grid>
        <Ribbon>
            <Ribbon.QuickAccessToolBar>
                <RibbonQuickAccessToolBar>
                    <RibbonButton SmallImageSource="/Images/112_ArrowCurve_Blue_Left_16x16_72.png" />
                    <RibbonButton SmallImageSource="/Images/112_ArrowCurve_Blue_Right_16x16_72.png" />
                </RibbonQuickAccessToolBar>
            </Ribbon.QuickAccessToolBar>
            <Ribbon.ApplicationMenu>
                <RibbonApplicationMenu SmallImageSource="/Images/005_Task_16x16_72.png">
                </RibbonApplicationMenu>
            </Ribbon.ApplicationMenu>
            <RibbonTab Header="タブ1" ContextualTabGroupHeader="ヘッダー">
                <RibbonGroup Header="グループ" >
                    <RibbonButton LargeImageSource="/Images/FavoriteStar_FrontFacing_32x32_72.png" Label="ボタン"/>
                    <RibbonButton LargeImageSource="/Images/FavoriteStar_FrontFacing_32x32_72.png" Label="ボタン"/>
                    <RibbonButton LargeImageSource="/Images/FavoriteStar_FrontFacing_32x32_72.png" Label="ボタン"/>
                </RibbonGroup>
            </RibbonTab>
            <RibbonTab Header="タブ2" ContextualTabGroupHeader="ヘッダー">
                <RibbonGroup Header="グループ" >
                    <RibbonButton LargeImageSource="/Images/FavoriteStar_FrontFacing_32x32_72.png" Label="ボタン"/>
                    <RibbonButton LargeImageSource="/Images/FavoriteStar_FrontFacing_32x32_72.png" Label="ボタン"/>
                    <RibbonButton LargeImageSource="/Images/FavoriteStar_FrontFacing_32x32_72.png" Label="ボタン"/>
                </RibbonGroup>
            </RibbonTab>
            <Ribbon.ContextualTabGroups>
                <RibbonContextualTabGroup Header="ヘッダー" Visibility="Visible"/>
            </Ribbon.ContextualTabGroups>
        </Ribbon>
    </Grid>
</Window>

メニュー構成は適当です。ここの機能の詳細はおいおい説明することになると思うので省略しますが、注目すべきはWindowのタイトルバーです。並べてみるとよくわかりますが、ペイントではQuickToolBarがWindowのタイトルバーに乗っていますが、WPFのほうでは別になっています。

image

RibbonWindow

WPFで、Quick Tool BarをWindowに乗せるためには、RibbonWindowを使います。Windowを指定している3ヶ所(XAMLで2ヶ所とC#のコードビハインドで1ヶ所)をRibbonWindowに書き換えます。

<RibbonWindow x:Class="RibbonApplicatin.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="362" Width="911">
	<!-- 中略 -->
</RibbonWindow>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Ribbon;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace RibbonApplicatin
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : RibbonWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

これを変更することで、↓のようなWindowになります。それっぽくなりましたね。

image

注意

RibbonWindowを使い場合、Ribbonが乗っているPanel(この場合Grid)に背景色を設定してはいけません。Windowのタイトルバーはおかしなことになります。

目立つように、GridのBackgroundに赤を指定したものを見てみましょう。

image

タイトルバーのアプリケーションアイコンや、最小化・最大化・閉じるボタンあたりが塗りつぶされてしまいます。これをみると、RibbonWindowのクライアント描画領域がタイトルバーの上まであることがよくわかりますね。

広告

コメントする »

まだコメントはありません。

RSS feed for comments on this post. TrackBack URI

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

WordPress.com Blog.

%d人のブロガーが「いいね」をつけました。