アプリケーション メニューとはリボン UI を実装するアプリケーションのメイン メニューのことで、XamRibbon の場合、リボン タブの一番左端に表示されている丸いボタンもしくはタブからアクセスできます。

アプリケーション メニューの例 ~ その 1: デフォルトのテーマを適用している場合

 
アプリケーション メニューの例 ~ その 2: Office2013 のテーマを適用している場合

このアプリケーション メニューですが、「今開発しているアプリケーションではアプリケーション メニューを使用する予定はないので、このボタン (もしくはタブ) を非表示にしたい」といったお問い合わせをよくいただきます。その場合は、

  1. ApplicationMenu オブジェクトを非表示にする。
  2. ApplicationMenu オブジェクトの描画用に確保されている領域を非表示にする。

の 2 つを実装してください。なおこの記事では説明の簡便性から最近よく利用されている Office2013 のテーマを適用している場合で説明していきます。別のテーマを利用している場合も基本的には同じ手順になるのですが、非表示にする要素が異なる場合もあります。もしうまくいかない場合は別途技術サポートにお問い合わせください。

1. ApplicationMenu オブジェクトを非表示にする

アプリケーション メニューは ApplicationMenu オブジェクトが描画しています。まずこのオブジェクトの Visibility を Collapsed にして非表示にします。残念なことに XamRibbon には該当するプロパティはありませんので、Style を使って設定します。

<!-- MainWindow.xaml -->

<igRibbon:XamRibbon>
    <igRibbon:XamRibbon.Resources>
        <!-- 1つめ: ApplicationMenu オブジェクトを非表示にする。 -->
        <Style TargetType="{x:Type igRibbon:ApplicationMenu}">
            <Setter Property="Visibility" Value="Collapsed"/>
        </Style>
    </igRibbon:XamRibbon.Resources>
    ...
</igRibbon:XamRibbon>

この設定により ApplicationMenu が消えます。が…

要素が消えただけで、領域はまだ確保されている状態です。でもご安心ください。次の 2 を実装することで、領域も消すことができます。

2. ApplicationMenu オブジェクトの描画用に確保されている領域を非表示にする

ApplicationMenu オブジェクトの描画用に確保されている領域を非表示にする方法ですが、こちらも XamRibbon には該当するプロパティはありませんので、Style を使って上書きしていきます。

XamRibbon のデフォルトの Style は https://github.com/Infragistics/wpf-resources/tree/main/DefaultStyles/Ribbon から取得できます。「Ribbonテーマ名.xaml」というファイル命名規則に従って入っています。Office2013 を使用している場合は RibbonOffice2013.xaml です。

2.1. 名前空間を追加する

XamRibbon の Style 内で使用されている名前空間を追加します。以下の名前空間を Window に追加してください。

xmlns:igWindows="http://infragistics.com/Windows"
<!-- MainWindow.xaml -->

<Window x:Class=" ... "
        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:igWindows="http://infragistics.com/Windows"
        xmlns:igRibbon="http://infragistics.com/Ribbon"
        xmlns:local="clr-namespace:C_00228216_Q1_WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

2.2. RibbonOffice2013.xaml の中からTargetType=”{x:Type igWindows:XamTabControl}” の Style を探し出し、Resources にコピー&ペーストする

https://github.com/Infragistics/wpf-resources/tree/main/DefaultStyles/Ribbon にアクセスし、検索ボックスをクリックして

検索ボックス内に

repo:Infragistics/wpf-resources "igWindows:XamTabControl" path:/^DefaultStyles\/Ribbon\//

と入力して検索してください。/DefaultStyles/Ribbon/ 配下にあるファイルの中から igWindows:XamTabControl が出現する個所が横断検索されます。

検索結果の中から RibbonOffice2013.xaml ファイルの TargetType=”{x:Type igWindows:XamTabControl}” の Style を探し出し、その行番号のところをクリックしてください。

これで RibbonOffice2013.xaml の中からTargetType=”{x:Type igWindows:XamTabControl}” の Style を探し出せました (※註: もちろん GitHub のリポジトリで RibbonOffice2013.xaml を開いて該当する Style を目視で探し出してもかまいません)。

探し出せたら、Style 全体をアプリケーション側の Resources にコピーします。

<!-- MainWindow.xaml -->

<igRibbon:XamRibbon.Resources>

... (中略) ...

    <!-- https://github.com/Infragistics/wpf-resources/tree/main/DefaultStyles/Ribbon/RibbonOffice2013.xaml からコピー (ここから) -->

    <!-- =================================================================== -->
    <!-- Ribbon's XamTabControl Style -->
    <!-- =================================================================== -->
    <Style x:Key="{x:Static igRibbon:XamRibbon.RibbonTabControlStyleKey}" TargetType="{x:Type igWindows:XamTabControl}">
        <Setter Property="Background" Value="{DynamicResource {x:Static igRibbon:RibbonBrushKeys.ContainerFillKey}}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource {x:Static igRibbon:RibbonBrushKeys.ContainerBorderFillKey}}"/>
        <Setter Property="BorderThickness" Value="0,1"/>
        <Setter Property="Padding" Value="0,2,0,0"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="MaximumSizeToFitAdjustment" Value="18"/>
        <Setter Property="MinimumTabExtent" Value="28"/>
        <Setter Property="PreTabItemContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Rectangle Width="56" Height="19" />
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="KeyboardNavigation.DirectionalNavigation" Value="Continue"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type igWindows:XamTabControl}">

... (中略) ...

                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <!--<Style.Triggers>
<Trigger Property="IsMinimized" Value="True">
    <Setter Property="Height" Value="24"/>
</Trigger>
</Style.Triggers>-->
    </Style>

    <!-- https://github.com/Infragistics/wpf-resources/tree/main/DefaultStyles/Ribbon/RibbonOffice2013.xaml からコピー (ここまで) -->

</igRibbon:XamRibbon.Resources>

2.3. PreTabItemContentTemplate の Visibility を Collapsed にします。

ApplicationMenu オブジェクトの描画用の領域を確保しているのは PreTabItemContentTemplate 内の Rectangle です。この Rectangle の Visibility を Collapsed にして非表示にします。

<!-- MainWindow.xaml -->

<igRibbon:XamRibbon.Resources>

    ... (中略) ...

    <Style x:Key="{x:Static igRibbon:XamRibbon.RibbonTabControlStyleKey}" TargetType="{x:Type igWindows:XamTabControl}">
        <Setter Property="Background" Value="{DynamicResource {x:Static igRibbon:RibbonBrushKeys.ContainerFillKey}}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource {x:Static igRibbon:RibbonBrushKeys.ContainerBorderFillKey}}"/>
        <Setter Property="BorderThickness" Value="0,1"/>
        <Setter Property="Padding" Value="0,2,0,0"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="MaximumSizeToFitAdjustment" Value="18"/>
        <Setter Property="MinimumTabExtent" Value="28"/>
        <Setter Property="PreTabItemContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <!-- 2 つめ: ApplicationMenu オブジェクトの描画用に確保されている領域を非表示にする。 -->
                    <Rectangle Width="56" Height="19" Visibility="Collapsed"/>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="KeyboardNavigation.DirectionalNavigation" Value="Continue"/>

        ... (以下略) ...

 

⚠️なお、コピーしてきた Style をそのまま使用するとエラーが発生してしまう個所があります。以下の正誤表を参考に修正してください。

誤: <Condition Binding="{Binding Path=(igRibbon:XamRibbon.Ribbon).(igRibbon:XamRibbon.IsWithinRibbonWindow), RelativeSource={x:Static RelativeSource.Self}}" Value="True" />

正:<Condition Binding="{Binding Path=(igRibbon:XamRibbon.IsWithinRibbonWindow), RelativeSource={x:Static RelativeSource.Self}}" Value="True" />

 

以上で完了です!

実行結果

アプリケーション メニューにアクセスする青いタブが消えました!

 

 

Tagged:

製品について

Ultimate UI for WPF