最新のアプリケーションには、異なるテーマを切り替えるオプションがあるのが一般的です。たとえば、ライト テーマとダーク テーマを切り替えることができるアプリケーションもあれば、より多くのテーマを選択できるアプリケーションもあります。
Windows フォームは、デスクトップ アプリケーションの作成を可能にする UI フレームワークです。テーマごとに選択可能なボタンを作成することで、Windows フォーム アプリにテーマを実装できます。
今日のメイク動画
ユーザーがテーマを選択すると、各要素の背景色またはテキストの色のプロパティを変更して、選択したテーマに一致させることができます。
Windows フォーム プロジェクトのセットアップ方法
まず、新しい Windows フォーム アプリを作成します。ボタンやラベルなど、いくつかの基本的なコントロールを新しいプロジェクトに追加します。
- 作成する 新しい Windows フォーム アプリケーション Visual Studio で。
- 新しいプロジェクトで、ツールボックスを使用してボタン コントロールを検索します。
- を選択 ボタン制御 キャンバスにドラッグします。合計 3 つのボタン コントロールを追加します。
- ツールボックスを使用して、 ラベル コントロール キャンバスに。ボタンの下にラベルを配置します。
- プロパティ ウィンドウを使用して、ボタンとラベルのスタイルを設定します。プロパティを次のように変更します。
ボタン1 サイズ 580、200 フラットスタイル 平らな 文章 ユーザー ボタン2 サイズ 580、100 フラットスタイル 平らな 文章 アカウント ボタン3 サイズ 580、100 フラットスタイル 平らな 文章 権限 ラベル1 文章 著作権 2022
設定ボタンとテーマ一覧の作り方
シンプルなテーマ メニューを機能させるには、各テーマを表す複数のボタンを作成します。アプリケーションには、「光」テーマ、「自然」テーマ、「闇」テーマの 3 つのテーマが含まれます。
- キャンバスに別のボタン コントロールを追加して、設定 (または「テーマ」) ボタンを表します。
- このボタンのプロパティを次のように変更します。
名前 btnThemeSettings フラットスタイル 平らな サイズ 200、120 文章 テーマ - さらに 3 つのボタンをキャンバスにドラッグします。これらのボタンは、3 つの異なるテーマを表します。各ボタンのプロパティを次のように変更します。
第 1 ボタン 名前 btnLightTheme バックカラー 白い煙 サイズ 200、80 フラットスタイル 平らな 文章 光 見える 間違い 2 番目のボタン 名前 btnNatureテーマ バックカラー ダークシーグリーン サイズ 200、80 フラットスタイル 平らな 文章 自然 見える 間違い 3番目のボタン 名前 btnダークテーマ バックカラー 薄暗い灰色 フォアカラー 白 サイズ 200、80 フラットスタイル 平らな 文章 暗い 見える 間違い - をダブルクリックします テーマ ボタン。これにより、「クリック時」イベントを処理するメソッドが作成されます。ユーザーがこのボタンをクリックすると、メソッドが実行されます。
- デフォルトでは、「Light」、「Nature」、および「Dark」テーマは表示されません。関数内に、ボタンの可視性を表示または非表示に切り替える機能を追加します。
- Visual Studio ウィンドウの上部にある緑色の再生ボタンをクリックして、アプリケーションを実行します。
- 実行時に、アプリケーションはデフォルトで 3 つのテーマのそれぞれのボタンを非表示にします。
- クリックしてください テーマ ボタンをクリックして、表示するテーマを切り替えます。を押し続けることができます。 テーマ ボタンをクリックして表示を切り替えます。
テーマの管理方法
テーマごとにディクショナリを作成して、使用するさまざまな色を保存します。これは、テーマの色を複数回使用する必要がある場合に備えて、すべてのテーマの色を 1 か所に保存できるようにするためです。また、将来新しい色でテーマを更新したい場合にも簡単になります.
- デフォルトの一番上 Form1.cs C# ファイルとその内部 形 クラスで、グローバルな列挙型を作成します。この列挙型には、テーマで使用するさまざまな種類の色が格納されます。
enum ThemeColor
{
Primary,
Secondary,
Tertiary,
Text
} - その下で、3 つのテーマごとに 1 つずつ、3 つのグローバル辞書を宣言します。辞書の使用方法に慣れていない場合は、辞書について詳しく読むことができます。 C# の辞書 .
Dictionary<ThemeColor, Color> Light = new Dictionary<ThemeColor, Color>();
Dictionary<ThemeColor, Color> Nature = new Dictionary<ThemeColor, Color>();
Dictionary<ThemeColor, Color> Dark = new Dictionary<ThemeColor, Color>(); - コンストラクター内で、辞書を初期化します。各テーマが使用するさまざまな色の値を追加します。
テーマの変更方法
アプリケーションのテーマを管理する関数を作成します。これらの関数は、キャンバス上の UI 要素の背景色またはテキストの色を変更します。
このサーバーで/index.htmlにアクセスする権限がありません。
- という新しい関数を作成します。 テーマの変更() .この関数は、テーマの色を引数として受け取ります。
- 関数内で、UI 要素の背景色のプロパティを変更します。新しい背景色には、選択したテーマの色が使用されます。
- という新しい関数を作成します。 ChangeTextColor() .これを使用して、暗い色と明るい色の間でテキストの色を変更できます。これは、暗い背景のテキストが読めるようにするためです。
- デザイナーから、[Light] ボタン コントロールをダブルクリックします。これにより分離コード ファイルが開き、ユーザーがボタンをクリックしたときのイベント ハンドラーが生成されます。
- イベント ハンドラー内で、 テーマの変更() と ChangeTextColor() 機能。テーマが使用している色を入力します。これらの色は、「ライト」テーマ ディクショナリから取得できます。
private void btnLightTheme_Click(object sender, EventArgs e)
{
ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);
ChangeTextColor(Light[ThemeColor.Text]);
} - デザイナーに戻り、[Nature] および [Dark] ボタンをクリックします。使用 テーマの変更() と ChangeTextColor() イベント ハンドラーでも同様に機能します。
- デフォルトでは、ユーザーが最初にアプリを開いたときに、テーマは「Light」テーマに設定されている必要があります。コンストラクターの辞書の下で、 テーマの変更() と ChangeTextColor() functions.
ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);
ChangeTextColor(Light[ThemeColor.Text]); - Visual Studio ウィンドウの上部にある緑色の再生ボタンをクリックして、アプリケーションを実行します。
- デフォルトでは、アプリケーションは「Light」テーマを使用し、灰色の配色を UI コントロールに適用します。テーマ ボタンを切り替えて、テーマのリストを表示します。
- 自然のテーマをクリックします。
- ダークテーマをクリックします。
Windows フォームを使用したアプリケーションの作成
多くのアプリケーションでは、ユーザーが複数のテーマを切り替えることができます。ユーザーが選択するオプションを作成することで、Windows フォーム アプリケーションにテーマを追加できます。
ユーザーがテーマをクリックすると、背景色、テキスト、またはその他のプロパティを変更して、選択したテーマで使用されている色に一致させることができます。
各テーマの色は、Visual Studio の組み込みの色を使用します。ユーザーにより良いエクスペリエンスを提供するには、適切な配色を使用する必要があります。アプリの配色を選択するさまざまな方法について詳しく知ることができます。