デザインオフィスインスピレーションWinFormsで簡素化リボン

The Syncfusion WinForms Ribbon control 簡単にレイアウトを使用できます.これは、単一の行のインターフェイスで最も使用されるリボンコマンドが表示されますコンテンツのコンパクトな表示のためのより多くの画面スペースを可能にします.
最高のユーザー体験のために、他のリボンコマンドをオーバーフローメニューに配置することができます.あなたが前後に切り替えることができますし、通常のレイアウトを最小限のボタンを使用して簡素化.この機能はEssential Studio 2020 Volume 4 release .

なぜ単純なリボンのレイアウトを好むか？

簡単なレイアウト

タッチフレンドリーなデザインを提供します.

単一の行でリボンアイテムを表示し、より垂直なスペースを提供します.

ユーザーが通常のレイアウトよりも少ない気晴らしでリボンアイテムを選択することができます.

ユーザーが望む正確なコマンドを示します.したがって、それは単純でわかりやすいです.

このブログでは、WinFormリボンコントロールの新しい簡易リボンレイアウト機能とカスタム機能を有効にする手順を見ていきます.

簡易リボンレイアウトの設定

これらの手順に従って、WinFormsリボンコントロールの簡易レイアウトを設定します

ステップ1：リボンコントロールの簡素化レイアウトモードを有効にする

WinFormsリボンコントロールは、その項目を簡略化されたレイアウトでレンダリングしますLayoutMode プロパティをSimplified . ユーザーは、リボンコントロールの右下隅にある組み込みの最小化ボタンを使用して実行時に簡体字と通常のレイアウトを切り替えることができます.最小化ボタンを有効にするにはEnableSimplifiedLayoutMode プロパティをtrueに設定します.

private Syncfusion.Windows.Forms.Tools.RibbonControlAdv ribbonControlAdv1;

 this.ribbonControlAdv1 = new RibbonControlAdv();
 this.ribbonControlAdv1.LayoutMode = RibbonLayoutMode.Simplified; 
this.ribbonControlAdv1.EnableSimplifiedLayoutMode = true;

 this.Controls.Add(ribbonControlAdv1);

次のGIF画像を参照してください.
通常と簡略レイアウトの切り替え

ステップ2：異なるレイアウトのアイテムを設定する

前方に移動すると、リボン項目を別のレイアウトの間で同じように設定することができますまたはSetDisplayMode リボンの機能.
デフォルトでは、アイテムの両方の通常と簡略化のレイアウトで表示されます.The RibbonItemDisplayMode 次の値を含む列挙型のフラグです.

通常:通常のレイアウトの項目を表示します.

簡素化:簡素化されたレイアウトの項目を表示します.

OverflowMenu :簡素化されたレイアウトが有効になったときにオーバーフローメニュー内の項目を表示します.

また、RibbonItemDisplayMode 列挙プロパティを使用すると、次の値の組み合わせが可能になります.

通常、単純化:両方の通常および簡略レイアウトの項目を表示します.

通常のOverflowMenu :簡略レイアウトの間、通常のレイアウトとオーバーフローメニューの項目を表示します.

簡素化、オーバーフローメニュー:簡素化されたレイアウトの項目を表示します.

通常、簡略化、オーバーフローメニュー:両方の通常のシンプルなレイアウトの項目をオーバーフローメニューと一緒に表示されます.

次のコード例を参照してください.

// To display an item only in simplified layout.
 ToolStripButton pasteButton = new System.Windows.Forms.ToolStripButton();
 pasteButton.Text = "Paste";
 ribbonControlAdv1.SetDisplayMode(pasteButton, RibbonItemDisplayMode.Simplified);

 // To display an item only in normal layout.
 ToolStripButton boldButton = new System.Windows.Forms.ToolStripButton();
 boldButton.Text = "Bold";
 ribbonControlAdv1.SetDisplayMode(boldButton, RibbonItemDisplayMode.Normal);

 // To display an item in normal layout and inside an overflow menu during the simplified layout.
 ToolStripButton underlineButton = new System.Windows.Forms.ToolStripButton();
 underlineButton.Text = "Underline";
 ribbonControlAdv1.SetDisplayMode(underlineButton, RibbonItemDisplayMode.Normal | RibbonItemDisplayMode.OverflowMenu);

 // To display an item both in normal and simplified layout by default.
 ToolStripButton italicButton = new System.Windows.Forms.ToolStripButton();
 italicButton.Text = "Italic";

ステップ3：リボンアイテムのイメージを設定する

通常のレイアウトモードでは、イメージの項目のイメージプロパティからロードされ、そのサイズの値はSetSmallItemImage and SetLargeItemImage 関数ToolStripExImageProvider クラス.したがって、イメージは表示スタイルとイメージスケーリングに基づいてリボンアイテムの中に収まります.
簡素化されたレイアウトモードでは、標準としてリボンアイテムの20 * 20の画像サイズを使用します.また、SetMediumItemImage 関数はToolStripExImageProvider 次のコードのクラスです.

ToolStripButton pasteButton = new System.Windows.Forms.ToolStripButton();
 pasteButton.Text = "Paste";
 toolStripEx1.Items.Add(pasteButton);

 // Add image for the Paste button for simplified layout to image list.
 ImageListAdv imageListAdv1 = new ImageListAdv(this.components);
 imageListAdv1.Images.Add(Image.FromFile("..//..//Images/Medium Icons/Paste20.png"));

 ToolStripExImageProvider toolStripExImageProvider1 = new ToolStripExImageProvider(toolStripEx1);
 // Setting image list to the MediumImageList for the toolStripEx1.
 toolStripExImageProvider1.MediumImageList = imageListAdv1;
 toolStripExImageProvider1.SetMediumItemImage(pasteButton, 0);

次のスクリーンショットを参照してください.
中サイズ画像を持つリボンの簡易レイアウト

ステップ4：新しいRibbontabまたはRibbonBarを加えてください

リボンコントロールでは、リボンとアイテムをQat(Quick Access Toolbar)ウィンドウを使用してカスタマイズできますToolStripTabItem or ToolStripEx クラス.新たに追加ToolStripTabItem or ToolStripEx アイテムが元々追加されたレイアウトでのみ表示されます.
次の例ではLayoutMode が設定され、ToolStripTabItem 名前付きフォルダが作成され、QATウィンドウを使用して追加されます.このタブは、単純なレイアウトだけではなく、デフォルトの動作である通常のレイアウトでは表示されません.
次のスクリーンショットを参照してください.
フォルダを新しく追加
新しく追加されたフォルダのタブなし

ステップ5：新しいアイテムをQATに加えます

リボンコントロールでは、QATウィンドウのヘルプやコンテキストメニューのショートカットを介してQATに項目を追加することもできます.レイアウトの間で切り替えるときでも、通常のまたは単純化されたレイアウトで追加された項目は常に表示されます.
次の参照画像では、LayoutModeを簡素化し、コンテキストメニューを使用してQATに太字の項目を追加しました.このアイテムは、常に両方の通常と簡略化されたレイアウトで表示されます.
新しく追加されたボールドアイテムで簡単にレイアウト
新たに追加されたボールドアイテムを持つノーマルレイアウト

ステップ6 :リボンコントロールのサイズ変更

リボンのサイズを変更しながら、ウィンドウの幅が減少し、リボンの最後の位置にある項目に触れると、適切な項目が自動的にオーバーフローメニューの内部に移動されます.ウィンドウが継続的にサイズ変更されると、同じ動作が各項目について継続します.
下記を参照.GIF画像.
リボンのサイズ変更

参考文献

ドキュメントリンクhttps://help.syncfusion.com/windowsforms/ribbon/simplifiedlayout
デモリンク:https://github.com/SyncfusionExamples/How-to-customize-the-simplified-layout-in-WinForms-RibbonControlAdv

結論

読書ありがとう!このブログでは、新しく導入された簡素化されたレイアウトと、SyncFusion Winformsのカスタム機能を有効にする方法を見ましたRibbon control . これらの機能は、異なるUIのレイアウトオプションを提供し、彼らは私たちの中で利用可能ですEssential Studio 2020 Volume 4 release .
既存の顧客のために、新しい重要なスタジオ版は、ダウンロードから入手可能ですLicense and Downloads ページ.まだSyncFusionの顧客でない場合は、私たちの30日を試すことができますfree trial 当社の利用可能な機能をチェックアウトします.
あなたが我々にフィードバックを送るか、どんな質問をしたいならば、下記のコメントセクションを使ってください.また、我々を介してお問い合わせすることができますsupport forum , Direct-Trac , or feedback portal . 我々は常にあなたを支援して満足している!
このブログ記事が好きなら、次のブログ記事も好きになると思います.

How to Use Icon Fonts in WinForms (Windows Forms) Applications