.NET MAUI（.NET 7/8 など）で Windows 向けにトグルスイッチ（ToggleSwitch / Switch）を使っていると、ノブ（黒い丸）が小さくて押しづらい・見た目が物足りないと感じることがあります。Windows の既定スタイルをプロジェクト側で安全に上書きすれば、ノブのサイズを含む見た目を狙い通りに調整できます。
編集するファイルはどれ？結論：Platforms\Windows\App.xaml を触る
まず結論から。Windows 向け .NET MAUI でトグルのノブ（黒い丸）を大きくしたい場合、基本的に編集対象は Windows プラットフォーム側の App.xaml です。MAUI の共有側（App.xaml や ResourceDictionary）では、Windows ネイティブコントロールのテンプレート（ControlTemplate）まで届かないことが多いためです。
| やりたいこと | 編集する場所 | 理由 | 影響範囲 |
|---|---|---|---|
| Windows のトグルスイッチのノブ（黒い丸）を大きくする | Platforms\Windows\App.xaml | ToggleSwitch の見た目は既定スタイル（ControlTemplate）で決まるため | Windows 上の ToggleSwitch（＝MAUI の Switch が内部で使う場合も含む） |
| OS の既定デザインを崩さずに色や状態表現を保ちたい | Windows 既定スタイルをコピーして最小差分で編集 | ThemeResource を維持すればライト/ダーク/ハイコントラスト等に追従しやすい | コピーした Style を置いたスコープ |
前提：MAUI の「Switch」と Windows の「ToggleSwitch」の関係
.NET MAUI にはクロスプラットフォームの Switch コントロールがありますが、Windows 上では内部的に WinUI の ToggleSwitch が利用されるケースが一般的です。つまり、Windows の ToggleSwitch の既定スタイルを上書きできると、結果として MAUI の Switch の見た目も変わります。
一方で、ノブのサイズは Width / Height のような単純プロパティとして公開されていないため、「XAML のプロパティを 1 行追加して終わり」にはなりません。そこで、Windows の既定スタイル（テンプレート）をコピーして、ノブを描画している要素（Ellipse）のサイズを調整します。
なぜノブ（黒い丸）のサイズはプロパティで変えられないのか
Windows の ToggleSwitch の見た目は、多くの場合 ControlTemplate（コントロールテンプレート）で定義されています。テンプレートの中では、背景（トラック）やノブ（黒い丸）、状態ごとのアニメーション、ポインターオーバー時の見た目などが細かく構成されています。
ノブはテンプレート内の Ellipse（円）要素として描画されていることが多く、その Width / Height を変更するのが最短ルートです。逆に言うと、テンプレートの外側からノブだけを大きくするための「公式プロパティ」が用意されていないため、スタイルの上書きが必要になります。
手順：Windows の既定スタイル（generic.xaml）をコピーして上書きする
Windows の既定スタイル定義ファイル（generic.xaml）を開く
Windows の既定スタイルは、Windows SDK に含まれる汎用スタイル定義（generic.xaml）にまとまっています。代表的なパス例は次の通りです。
パス例：C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\Generic\generic.xaml
環境によって Windows SDK のバージョンやインストール状況が異なるため、同じ場所にない場合もあります。その場合は、以下の観点で探すと見つけやすいです。
- Visual Studio インストーラーで「Windows 10/11 SDK」が入っているか確認する
Windows Kits\10\DesignTime配下でgeneric.xamlを検索する- 見つかった generic.xaml を編集せず、参照してコピーするだけにする
注意：この generic.xaml 自体は OS/SDK 側の共通リソースです。直接書き換えると将来のアップデートで上書きされたり、他アプリへの影響が出る可能性があるため、絶対に編集しないでください。行うのは「コピーして自分のプロジェクトで上書き」だけです。
ToggleSwitch の既定スタイルを見つけて Style 全体をコピー
generic.xaml を開いたら、次のコメントを検索します。
<!-- Default style for Windows.UI.Xaml.Controls.ToggleSwitch -->
このコメント付近にある ToggleSwitch の Style 定義（Style 全体） をコピーします。ここで重要なのは、ノブ（黒い丸）だけでなく、テンプレートに関連する要素一式が含まれていることです。ノブのサイズを変えるにはテンプレートの一部を触る必要があるため、Style を丸ごとプロジェクト側へ持ってくるのが確実です。
MAUI プロジェクトの Windows 用 App.xaml に貼り付ける
次に、MAUI プロジェクトの Windows プラットフォーム側 App.xaml を編集します。
編集するファイル：Your_MAUI_Project\Platforms\Windows\App.xaml
このファイルの <maui:MauiWinUIApplication> の Resources に、先ほどコピーした ToggleSwitch の Style を貼り付けます。
<maui:MauiWinUIApplication
x:Class="YourProject.WinUI.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:maui="using:Microsoft.Maui">
<maui:MauiWinUIApplication.Resources>
<!-- generic.xaml からコピーした ToggleSwitch の既定スタイルをここに貼り付ける -->
</maui:MauiWinUIApplication.Resources>
</maui:MauiWinUIApplication>
ここまでできると、Windows プロジェクト側で ToggleSwitch のスタイルを 上書き（オーバーライド） できる状態になります。
ポイント：
- 貼り付け先は Platforms\Windows\App.xaml（Windows 専用）
- OS 側の generic.xaml は触らない
- 「貼り付けたのに反映されない」場合、Style に
x:Keyが付いていないか／暗黙スタイルになっているかを確認する
一般的に、<Style TargetType="ToggleSwitch"> のように x:Key が無い（暗黙スタイル） なら、そのスコープ内の ToggleSwitch に自動適用されます。もしコピーした Style に x:Key が付いている場合は、全体に適用したいなら x:Key を外して暗黙スタイルにするのが簡単です。
ノブ（黒い丸）を大きくする：Ellipse の Width / Height を変更
貼り付けた Style の中で、ノブを描画している Ellipse を探します。generic.xaml のバージョンにより多少前後しますが、次のような名前で定義されていることが多いです。
SwitchKnobOn（ON 状態のノブ）SwitchKnobOff（OFF 状態のノブ）
例（よくある定義）：
<Ellipse x:Name="SwitchKnobOn"
Fill="{ThemeResource ToggleSwitchKnobFillOn}"
Width="10"
Height="10"
Opacity="0" />
<Ellipse x:Name="SwitchKnobOff"
Fill="{ThemeResource ToggleSwitchKnobFillOff}"
Width="10"
Height="10" />
ここで、Width と Height を大きくします。たとえば 15 にするなら次のように変更します。
<Ellipse x:Name="SwitchKnobOn"
Fill="{ThemeResource ToggleSwitchKnobFillOn}"
Width="15"
Height="15"
Opacity="0" />
<Ellipse x:Name="SwitchKnobOff"
Fill="{ThemeResource ToggleSwitchKnobFillOff}"
Width="15"
Height="15" />
ノブを大きくする場合は、ON/OFF の両方を同じサイズにするのが基本です。片方だけ変えると、状態によってサイズが変わって見えてしまい、意図しない違和感につながります。
おすすめのサイズ目安（迷ったときの基準）
もともと 10 になっているケースが多いので、まずは +2〜+6 くらいから試すと破綻しづらいです。
| ノブサイズ（Width/Height） | 見た目・操作感の傾向 | おすすめ用途 |
|---|---|---|
| 10（既定） | スマートだが小さめ。視認性・押しやすさは控えめ | 情報量重視の画面、密度の高い UI |
| 12 | さりげなく改善。既定感を保ちやすい | 「少しだけ押しやすくしたい」 |
| 14〜15 | 押しやすさが分かりやすく向上。主張も程よい | 設定画面、タッチ操作が多い UI |
| 16 以上 | 強い存在感。テンプレート次第でレイアウト調整が必要になりやすい | 大きめ UI、アクセシビリティ優先 |
ノブを大きくしたらズレる・はみ出す…を防ぐ追加調整ポイント
ノブだけ大きくすると、テンプレートによっては次のような症状が出ることがあります。
- ノブがトラック（背景）からはみ出して見える
- ノブが上下にズレて中央に揃わない
- ON/OFF の移動距離が足りず、端まで届かない（または食い込む）
この場合は、テンプレート内の「ノブの入れ物」や「トラック」のサイズ・余白も合わせて調整します。要素名は SDK のバージョンで多少違いますが、次のような考え方で見ていくと修正しやすいです。
| 調整したいこと | 探す要素の例 | 見るプロパティ例 | 効果 |
|---|---|---|---|
| ノブが上下にズレる | ノブを包む Grid / Border | VerticalAlignment, Margin | 中央寄せや余白調整で見た目が整う |
| ノブがはみ出す（トラックが細い） | トラック（背景）の Rectangle / Border | Height, CornerRadius | トラックを太くしてノブとのバランスを取る |
| ON/OFF の移動距離が合わない | ノブ移動の TranslateTransform / VisualState | TranslateX（や類似の移動量） | ノブが端まで自然に動くようになる |
| 押しやすさ（クリック領域）も広げたい | ToggleSwitch 本体 | MinHeight, Padding | 見た目だけでなく操作性も上がる |
ただし、まずは ノブ（Ellipse）の Width/Height だけを変えて挙動を確認し、問題が出た場合に追加調整する流れがおすすめです。変更差分が小さいほど、Windows SDK の更新やテンプレート変更があっても追従しやすくなります。
適用範囲の考え方：全部の ToggleSwitch を変える？一部だけ変える？
Windows 上の ToggleSwitch（＝Switch 含む）を一括で変えたい
最も簡単なのは、コピーした Style を 暗黙スタイル（x:Key なし）にして、Platforms\Windows\App.xaml の Resources に置く方法です。これにより、そのアプリ内の ToggleSwitch は基本的に同じ見た目で統一されます。
「この画面だけ」「この Switch だけ」ノブを大きくしたい（応用）
一部だけ変えたい場合は、Style に x:Key を付けて「名前付きスタイル」にし、必要な箇所だけ適用する方針が現実的です。ただし MAUI の共有 XAML からネイティブ ToggleSwitch の Style を直接指定するのは難しいことがあるため、Windows 側でスタイル適用を行う（カスタムハンドラー等）という設計になります。
考え方の例：
- Platforms\Windows\App.xaml に
x:Key="BigKnobToggleSwitchStyle"のようにスタイルを登録 - Windows のハンドラー拡張で、条件に合う Switch にだけその Style を割り当てる
「そこまでしなくていい」「全体を押しやすくしたい」なら、暗黙スタイルで全体適用が一番コスパが高いです。
反映確認のコツ（変更したのに見えないとき）
スタイル変更は「貼り付けて保存したら即反映」とはいかず、キャッシュやビルド成果物の影響で反映が分かりづらいことがあります。次の順でチェックすると詰まりにくいです。
- アプリを完全終了して再起動（デバッグ停止→再実行）
- Windows 用の
Platforms\Windows\App.xamlを編集しているか再確認 - Style の
TargetTypeが ToggleSwitch になっているか確認 - ON/OFF 両方のノブ（
SwitchKnobOn/SwitchKnobOff）を同じ値にしたか確認 - それでも変わらなければ bin/obj を削除してリビルド
よくあるトラブルと解決策
| 症状 | 原因として多いもの | 対処 |
|---|---|---|
| ノブサイズを変えたのに見た目が変わらない | 編集ファイルが違う／Style が適用されていない | Platforms\Windows\App.xaml の Resources に入っているか、暗黙スタイルになっているか確認 |
| ON のときだけノブが大きい（小さい） | SwitchKnobOn と SwitchKnobOff の両方を変更していない | 両方の Width/Height を同じ値にする |
| ノブがはみ出す／切れる | トラックやコンテナのサイズが既定のまま | トラック要素の Height やノブ周りの Margin、移動量（Transform）を調整 |
| ライト/ダークで色がおかしい | 色を固定値にしてしまった | {ThemeResource ...} を維持し、OS テーマ追従を壊さない |
| generic.xaml にコメントが見当たらない | SDK のバージョン差／該当箇所の表記が違う | ToggleSwitch や SwitchKnob で検索してスタイルを特定する |
補足：iOS / Android でもノブを大きくしたい場合
今回の方法で変更できるのは、あくまで Windows 向けの ToggleSwitch（見た目）です。iOS / Android の Switch は、それぞれの OS のネイティブコントロールを使っているため、Windows と同じやり方（generic.xaml の Style 上書き）では同等の調整ができません。
モバイル側も含めて見た目を統一したい場合、選択肢は概ね次のいずれかになります。
- プラットフォームごとの カスタムハンドラー を作り、ネイティブ側の設定や変形（スケール等）を行う
- Switch を置き換える 自作のカスタムトグル（GraphicsView / 画像 / ボタン） を用意して、完全にデザインをコントロールする
「Windows だけ押しやすくしたい」「Windows 向け業務アプリで操作性を上げたい」といった目的なら、今回の Windows スタイル上書きが最も実装コストが低く、効果が出やすい方法です。
まとめ：generic.xaml をコピーして Ellipse の Width/Height を変えるのが最短
.NET MAUI（Windows）の ToggleSwitch のノブ（黒い丸）を大きくするには、Windows の既定スタイルをコピーしてプロジェクト側で上書きし、テンプレート内の Ellipse（SwitchKnobOn/SwitchKnobOff）の Width/Height を調整するのが王道です。
- OS の generic.xaml は編集せず、コピーして使う
- 貼り付け先は Platforms\Windows\App.xaml
- ノブのサイズ変更は Ellipse の Width/Height
- 崩れたらトラックや余白、移動量を追加で調整
この流れで進めれば、Windows の標準的な操作感・テーマ追従を保ちつつ、押しやすさと視認性を確実に改善できます。
コメント