前回のチュートリアルをまだ読んでいない場合は、まず順番に読んで操作してください。
ポータル: C# Winform コントロール パッケージの MaterialsSkin の使用チュートリアルは無料でオープンソースで、中国語をサポートしています。
前回の号では、TabControl を使用して自動的に非表示になるサイドバーを作成する方法について説明しました。
この号では、水平ナビゲーション バーが実装されます。レンダリングは次のとおりです。
前回のサイドバーのチュートリアルを注意深く学習した場合は、原理が同じであるため、今回のナビゲーション バーの実装は非常に簡単です (まだ学習していない場合は、急いで学習してください)。
一般的には、同じ手順です。
1.マテリアルスキンフォームを準備します。
2. MaterialTabControlを用意し、タブを追加し、各TabPageのタイトル文字列を設定します。
3. ImageList を準備し、それにアイコンを追加します。
4. MaterialTabControl を ImageList にバインドし、各 TabPage のアイコンを設定します。
5. MaterialTabSelector コントロールを準備し、そのプロパティを設定して、上記の TabControl セットにバインドします。
サイドバーと比較すると、フォームへのバインディングが削除され、MaterialTabSelector コントロールが追加されています。その他は基本的に同じです。
以下に詳細な操作を記載しますので、慣れている方は飛ばしてサイドバーのTabControlとImageListを直接コピーしてご利用ください、まだ慣れていない方はご自身でやり直してください. 復習とお考えください。
まず、空のマテリアル フォームを準備し(方法がわからない場合は、前のチュートリアルを読んでください)、次に、マテリアル タブ コントロール コントロールをドラッグして選択します。右側に小さな三角形が表示されます。小さな三角形をクリックし、[追加] をクリックします。 Tabを押してタブを追加し、希望の番号に追加します。
なお、マテリアルタブコントロールを選択したい場合は、タブコントロールの上にある薄灰色のタイトル部分をクリックする必要があります。その下の白い部分はコンテンツエリアであり、tabPageタイプです。クリックしてもここから抜け出すことはできません。小さな三角形。
ここでは引き続き 6 つのタブを追加し、各タブのテキストの内容を 1 つずつ変更することにしました。
まず上のラベルをクリックして対応する TabPage に入り、次に白い領域をクリックしてプロパティ パネルで Text プロパティを変更します。
この操作を繰り返してすべてのタブを変更すると、変更後、タブには私のようなサイドバーの列名が付けられます。
アイコン画像を事前にダウンロード、iconfont-Alibaba ベクトル アイコン ライブラリ
ツールボックスで「画像」を検索すると、画像リストが表示されます。
この ImageList コントロールをフォームにドラッグすると、デザイン領域の下に ImageList コンポーネントが表示されることがわかります。
右上の小さな三角形をクリックし、最初にパラメータを変更し、サイズを 24 に、深さを 32Bit に設定します。次に、画像をクリックして選択し、ポップアップ ウィンドウで [画像の追加] をクリックして、ダウンロードしたすべてのアイコンを追加します。 。
インターフェイスの TabControl を選択し (もう一度思い出してください、上部の明るい灰色の領域をクリックして TabControl を選択します)、プロパティ パネルで ImageList プロパティを見つけて、それを ImageList に設定します。
次に、 TabPage を順番に選択し、 ImageKey プロパティを目的のアイコンに設定します。これは、TabPage ごとに設定する必要があります。
すべてのタブを設定すると、メインインターフェイスのすべてのアイコンが表示されます（ここで画像を変更しました）
注意が必要です！！
サイドバーの記事では、アイコンの色は再描画されるので色は重要ではないと言いましたが、水平ナビゲーションバーでは色は再描画されないので、選択したアイコンの色に注意する必要がありますアイコン。美しく見えるように一貫性を保つ必要があります。この記事で選択した色は白です。
フォームを選択し、次のプロパティを変更してフォームのタイトルを非表示にし、ナビゲーション バー用のスペースを確保します。
ツールボックスから MaterialTabSelector コントロールをドラッグし、フォームのタイトル バーと TabControl の間に配置します (図を参照)。
クリックして MaterialTabSelector コントロールを選択し、そのプロパティを変更します
BaseTabControlを先ほど用意したTabControlに変更し、
表示モードは、タイトル文字のみを表示する「テキスト」、アイコンのみを表示する「アイコン」の3種類から選択できますが、私はタイトル文字とアイコンを同時に表示する3番目の「IconAndText」を使用しています。効果は以下の3つです。 . あなたは自分自身に従うことができます 選択が必要です。
1.本文
2.アイコン
3. アイコンとテキスト
最後に、好みのテーマに変更して完了です。
コーディングは簡単ではありませんが、たくさんの「いいね！」とサポートをしていただければ幸いです。チュートリアル シリーズは随時更新されます。フォローしていただくと、できるだけ早く更新の通知が届きます。
次：
過去の問題の復習：
1. 一般チュートリアル、DLLリファレンス、コントロールの基本的な使い方、フォーム設定、テーマカラー設定
C# Winform コントロール ライブラリの共有、無料のオープン ソース、中国語をサポートしています。(DLLとチュートリアル付き) 
https://blog.csdn.net/XX_YZDY/article/details/125994686 2. ボタンチュートリアル、スタイル変更、アイコンボタン、ドットボタン、
C# Winformコントロールパッケージのマテリアルスキンの使い方チュートリアル -- ボタンボタンの記事
https ://blog.csdn.net/XX_YZDY/article/details/126278844 3. いくつかのカラー スキーム
C# Winform コントロール パッケージの MaterialsSkin の使用方法のチュートリアル -- いくつかのカラー スキームhttps://blog.csdn.net/XX_YZDY/article/details/ 126286341 4. アイコン付きサイドバーの設定方法と使い方
C# Winform コントロールパッケージ MaterialSkin 使い方チュートリアル -- サイドバーhttps://blog.csdn.net/XX_YZDY/article/details/126404178 5. サイドバーをアップロードしました テンプレートをダウンロードして学習できますサイドバーの (TabControl に慣れていない初心者の友人は、チュートリアルを見て自分で操作することをお勧めします。そうしないと、設定方法がわからない可能性があります) C# Winform サイドバーの左側のナビゲーション メニュー バーは自動的に非表示になったり、表示されたりします
。アイコンをサポートし、テーマの色を変更できますhttps://download.csdn.net/download/XX_YZDY/86406391