【C#】トグルスイッチの作り方｜WinForms・WPF・Razor別に実装方法とつまずきポイントを解説

はじめに

C#でアプリを作っていると、設定のON/OFF、通知の有効・無効、ダークモードの切り替えなどで「トグルスイッチ」を使いたくなる場面があります。

ただし、C#といっても開発対象によって実装方法は大きく変わります。WinFormsでは標準のスイッチ型コントロールがないため、CheckBoxやPanelをカスタマイズして作ることが多く、WPFではToggleButtonの見た目をControlTemplateで変更するのが一般的です。RazorやBlazorでは、HTMLのinput type="checkbox"をCSSでスイッチ風に見せたり、Bootstrapのform-switchを使ったりします。

この記事では、C#でトグルスイッチを作る方法を、WinForms・WPF・Razor・Blazor別に解説します。単にコードを紹介するだけでなく、ON/OFF状態の管理、初期値の設定、イベント処理、デザイン調整、初心者がつまずきやすいポイントまで整理します。

1. C#でトグルスイッチを作る前に知っておきたい基本

1-1. トグルスイッチとは何か

トグルスイッチとは、ON/OFFの2つの状態を切り替えるためのUI部品です。スマートフォンの設定画面でよく見かける、横長のスイッチをクリックまたはタップすると、つまみが左右に移動して状態が切り替わるものです。

たとえば、次のような用途で使われます。

「通知を有効にする」「ダークモードを使う」「自動保存を有効にする」「公開状態にする」「メール配信を受け取る」といった、はい・いいえで表せる設定に向いています。

トグルスイッチの本質は、見た目ではなく「2値の状態を切り替える」という点にあります。そのため、内部的にはbool型、つまりtrueまたはfalseで状態を管理することが多いです。

C#
bool isEnabled = true;

trueをON、falseをOFFとして扱えば、WinFormsでもWPFでもRazorでも考え方は共通です。

1-2. CheckBoxとの違い

トグルスイッチとCheckBoxは、どちらもON/OFFを表すUIです。機能面だけ見ると非常によく似ています。

CheckBoxは「選択されているかどうか」を表すUIで、フォーム入力や複数項目の選択によく使われます。一方、トグルスイッチは「設定が有効か無効か」を直感的に切り替えるUIとして使われることが多いです。

たとえば、利用規約への同意や複数カテゴリの選択にはCheckBoxが向いています。通知設定やダークモード切り替えのように、操作した瞬間に設定が変わるものにはトグルスイッチが向いています。

実装上は、トグルスイッチの内部にCheckBoxを使うことも多いです。特にRazorやBlazorでは、input type="checkbox"をCSSで装飾してトグルスイッチ風に見せるのが定番です。

1-3. C#標準コントロールにトグルスイッチはあるのか

C#そのものに「トグルスイッチ」というUIコントロールがあるわけではありません。C#はプログラミング言語であり、UI部品はWinForms、WPF、ASP.NET Core、Blazorなどのフレームワーク側で提供されます。

WinFormsには、スマートフォンのような見た目の標準トグルスイッチはありません。そのため、CheckBoxをカスタマイズするか、自作コントロールを作る必要があります。

WPFにはToggleButtonがあります。見た目はボタンですが、ON/OFF状態を持てるため、テンプレートを変更すればトグルスイッチとして使えます。

RazorやBlazorでは、HTMLのcheckboxを使います。Bootstrapを利用している場合は、form-switchクラスを使うことで簡単にスイッチ風のUIを作れます。

1-4. WinForms・WPF・Razorで実装方法が違う理由

同じC#でも、WinForms・WPF・RazorではUIの仕組みが異なります。

WinFormsは、Windowsデスクトップアプリ向けの古くからあるUIフレームワークです。コントロールをフォーム上に配置し、イベントで処理を書くスタイルが中心です。描画を細かく変えたい場合は、OnPaintなどを使って自分で描画することもあります。

WPFは、XAMLを使ってUIを定義するデスクトップアプリ向けフレームワークです。スタイル、テンプレート、データバインディングが強力で、見た目とロジックを分離しやすい特徴があります。

RazorやBlazorはWebアプリ向けです。HTML、CSS、C#を組み合わせて画面を作ります。トグルスイッチの見た目はCSSで作り、状態管理はフォーム送信や@bindで行います。

このように、画面を描画する仕組みが違うため、トグルスイッチの作り方も変わります。

1-5. この記事で作るトグルスイッチの完成イメージ

この記事では、次のようなトグルスイッチを作ることを目標にします。

OFFのときは背景がグレーで、つまみが左側にある状態です。ONにすると背景色が変わり、つまみが右側に移動します。クリックするたびにON/OFFが切り替わり、C#側で現在の状態を取得できます。

基本的な状態管理は次のようなイメージです。

C#
bool isOn = false;

private void Toggle()
{
    isOn = !isOn;
}

実際の実装では、このisOnに相当する値を、WinFormsならCheckedや独自プロパティ、WPFならIsChecked、Blazorなら@bindされたboolプロパティとして管理します。

2. C#でトグルスイッチを実装する方法の選び方

2-1. デスクトップアプリならWinFormsかWPFを選ぶ

Windows向けのデスクトップアプリを作る場合は、WinFormsまたはWPFを使うことが多いです。

既存のWinFormsアプリにトグルスイッチを追加したい場合は、WinForms上でCheckBoxをカスタマイズする方法が現実的です。フォームに簡単に配置でき、イベント処理も分かりやすいため、既存資産を活かしやすいです。

一方、新規で見た目にこだわったデスクトップアプリを作るなら、WPFの方がトグルスイッチを作りやすいです。ToggleButtonをベースにして、XAMLで見た目を定義できるため、デザインの変更や状態ごとの表示切り替えがしやすくなります。

2-2. WebアプリならRazor・Blazorで実装する

Webアプリでトグルスイッチを使う場合は、Razor Pages、ASP.NET Core MVC、Blazorなどで実装します。

Razor PagesやMVCでは、HTMLフォームの一部としてinput type="checkbox"を使い、送信時にC#側のモデルで値を受け取ります。見た目はCSSでトグルスイッチ風にします。

Blazorでは、C#のプロパティと画面上のチェック状態を@bindで連動できます。JavaScriptを書かなくても、C#だけでON/OFF状態に応じた処理を書けるのが特徴です。

2-3. 自作する場合とライブラリを使う場合の違い

トグルスイッチは自作できますが、デザインやアクセシビリティまで考えると意外と調整ポイントが多いUIです。

自作するメリットは、見た目や動作を自由に調整できることです。アプリ独自のデザインに合わせたい場合や、軽量な実装にしたい場合に向いています。

ライブラリを使うメリットは、短時間で整ったUIを作れることです。Bootstrap、Material Design系のコンポーネント、WPF向けUIライブラリなどを使えば、見た目の完成度を上げやすくなります。

ただし、ライブラリを使う場合は依存関係が増えます。小さなトグルスイッチだけのために大きなUIライブラリを導入するのは、プロジェクトによっては過剰になることもあります。

2-4. 初心者におすすめの実装方法

初心者におすすめなのは、利用しているフレームワークごとに次の方法です。

WinFormsなら、まずはCheckBoxのAppearanceを変更してボタン風にするか、CheckBoxを継承したカスタムコントロールを作る方法が分かりやすいです。

WPFなら、ToggleButtonを使うのがおすすめです。IsCheckedで状態を取得できるため、トグルスイッチの考え方と相性が良いです。

RazorやBlazorなら、input type="checkbox"を使うのが基本です。Bootstrapを使っているなら、form-check form-switchを使うと最小限のコードで実装できます。

2-5. ON/OFF状態の管理で共通して注意すべきポイント

トグルスイッチで最も重要なのは、見た目と内部状態を一致させることです。

見た目だけONになっていても、C#側の値がfalseのままでは正しく動作しません。逆に、内部値がtrueでも画面表示がOFFのままだと、ユーザーは現在の状態を誤解します。

そのため、次の点を意識します。

WinFormsでは、Checkedや独自のIsOnプロパティを状態の基準にします。WPFでは、IsCheckedやバインド先のプロパティを基準にします。Blazorでは、@bindしたboolプロパティを基準にします。

どの方式でも、状態を複数の変数で重複管理しないことが大切です。状態の基準となる値を1つに決め、そこから見た目や処理を更新するようにします。

3. WinFormsでトグルスイッチを作る方法

3-1. WinFormsでトグルスイッチ風UIを作る基本方針

WinFormsでトグルスイッチを作る方法はいくつかあります。

一番簡単なのは、CheckBoxを使う方法です。CheckBoxにはON/OFF状態を持つCheckedプロパティがあるため、状態管理に向いています。ただし、標準の見た目はチェックボックスなので、トグルスイッチ風にするにはカスタマイズが必要です。

もう少し自由に作りたい場合は、PanelやButtonを組み合わせて自作します。背景部分をPanel、つまみ部分をButtonやLabelで表現し、クリック時に位置と色を変える方法です。

さらに本格的に作るなら、ControlやCheckBoxを継承したカスタムコントロールを作り、OnPaintで角丸の背景やつまみを描画します。この方法は少し難しくなりますが、見た目の自由度が高く、再利用しやすいトグルスイッチを作れます。

3-2. CheckBoxをカスタマイズしてトグルスイッチにする方法

まずは、CheckBoxをベースにしたトグルスイッチの例です。CheckBoxを継承し、OnPaintで背景とつまみを描画します。

C#
using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;

public class ToggleSwitch : CheckBox
{
    public ToggleSwitch()
    {
        this.MinimumSize = new Size(60, 30);
        this.AutoSize = false;
        this.Cursor = Cursors.Hand;
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);

        e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
        e.Graphics.Clear(this.Parent?.BackColor ?? SystemColors.Control);

        int width = this.Width;
        int height = this.Height;
        int toggleSize = height - 6;

        Color backColor = this.Checked ? Color.MediumSeaGreen : Color.Gray;
        Color toggleColor = Color.White;

        using (GraphicsPath path = GetRoundPath(new Rectangle(0, 0, width - 1, height - 1), height / 2))
        using (SolidBrush backBrush = new SolidBrush(backColor))
        {
            e.Graphics.FillPath(backBrush, path);
        }

        int toggleX = this.Checked ? width - toggleSize - 3 : 3;
        Rectangle toggleRect = new Rectangle(toggleX, 3, toggleSize, toggleSize);

        using (SolidBrush toggleBrush = new SolidBrush(toggleColor))
        {
            e.Graphics.FillEllipse(toggleBrush, toggleRect);
        }
    }

    private GraphicsPath GetRoundPath(Rectangle rect, int radius)
    {
        GraphicsPath path = new GraphicsPath();
        int diameter = radius * 2;

        path.AddArc(rect.X, rect.Y, diameter, diameter, 180, 90);
        path.AddArc(rect.Right - diameter, rect.Y, diameter, diameter, 270, 90);
        path.AddArc(rect.Right - diameter, rect.Bottom - diameter, diameter, diameter, 0, 90);
        path.AddArc(rect.X, rect.Bottom - diameter, diameter, diameter, 90, 90);
        path.CloseFigure();

        return path;
    }

    protected override void OnCheckedChanged(EventArgs e)
    {
        base.OnCheckedChanged(e);
        this.Invalidate();
    }
}

このクラスをプロジェクトに追加すると、フォーム上で次のように使えます。

C#
public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        ToggleSwitch toggleSwitch = new ToggleSwitch();
        toggleSwitch.Location = new Point(30, 30);
        toggleSwitch.CheckedChanged += ToggleSwitch_CheckedChanged;

        this.Controls.Add(toggleSwitch);
    }

    private void ToggleSwitch_CheckedChanged(object sender, EventArgs e)
    {
        ToggleSwitch toggle = sender as ToggleSwitch;

        if (toggle != null)
        {
            bool isOn = toggle.Checked;
            MessageBox.Show(isOn ? "ONです" : "OFFです");
        }
    }
}

この実装では、CheckedがON/OFF状態の基準です。クリックするとCheckBoxの状態が切り替わり、OnCheckedChangedで再描画されます。

3-3. PanelやButtonを使って自作する方法

より単純に理解したい場合は、PanelとLabelを使ってトグルスイッチ風に作ることもできます。

C#
private bool isOn = false;
private Panel switchPanel;
private Label knob;

private void CreateToggleSwitch()
{
    switchPanel = new Panel();
    switchPanel.Size = new Size(60, 30);
    switchPanel.Location = new Point(30, 30);
    switchPanel.BackColor = Color.Gray;
    switchPanel.Cursor = Cursors.Hand;
    switchPanel.Click += ToggleSwitch_Click;

    knob = new Label();
    knob.Size = new Size(24, 24);
    knob.Location = new Point(3, 3);
    knob.BackColor = Color.White;
    knob.Click += ToggleSwitch_Click;

    switchPanel.Controls.Add(knob);
    this.Controls.Add(switchPanel);
}

private void ToggleSwitch_Click(object sender, EventArgs e)
{
    isOn = !isOn;
    UpdateToggleSwitch();
}

private void UpdateToggleSwitch()
{
    if (isOn)
    {
        switchPanel.BackColor = Color.MediumSeaGreen;
        knob.Location = new Point(33, 3);
    }
    else
    {
        switchPanel.BackColor = Color.Gray;
        knob.Location = new Point(3, 3);
    }
}

フォームのコンストラクタやLoadイベントでCreateToggleSwitch()を呼び出します。

C#
private void Form1_Load(object sender, EventArgs e)
{
    CreateToggleSwitch();
}

この方法は仕組みが分かりやすい反面、角丸や滑らかな描画を行うには追加の処理が必要です。また、キーボード操作やフォーカス表示には自分で対応する必要があります。

3-4. ON/OFF状態を切り替えるイベント処理

WinFormsでは、クリックイベントまたはCheckedChangedイベントを使って状態を切り替えます。

CheckBoxベースで作る場合は、基本的にCheckedChangedを使うのがおすすめです。

C#
private void toggleSwitch1_CheckedChanged(object sender, EventArgs e)
{
    bool isOn = toggleSwitch1.Checked;

    if (isOn)
    {
        labelStatus.Text = "有効";
    }
    else
    {
        labelStatus.Text = "無効";
    }
}

PanelやButtonで自作している場合は、クリック時に自分でbool値を反転させます。

C#
private void ToggleSwitch_Click(object sender, EventArgs e)
{
    isOn = !isOn;
    UpdateToggleSwitch();
}

注意点は、見た目の更新と状態の更新を別々に書き散らかさないことです。状態を変更したら、必ず見た目を更新するメソッドを呼び出すようにします。

3-5. 背景色・つまみ・角丸を変更するデザイン調整

トグルスイッチらしい見た目にするには、次の要素を調整します。

背景色は、ONのときに緑や青、OFFのときにグレーを使うと分かりやすくなります。つまみは白や薄いグレーにすると、背景とのコントラストが出ます。角丸は、背景の高さの半分程度の半径にすると自然なスイッチ形状になります。

カスタムコントロールであれば、プロパティを追加して色を外部から変更できるようにすると便利です。

C#
public Color OnBackColor { get; set; } = Color.MediumSeaGreen;
public Color OffBackColor { get; set; } = Color.Gray;
public Color KnobColor { get; set; } = Color.White;

OnPaint内では、固定色ではなくこれらのプロパティを使います。

C#
Color backColor = this.Checked ? OnBackColor : OffBackColor;

こうしておくと、フォームごとに色を変えられます。

C#
toggleSwitch.OnBackColor = Color.DodgerBlue;
toggleSwitch.OffBackColor = Color.DarkGray;
toggleSwitch.KnobColor = Color.White;

3-6. WinFormsでよくあるつまずきポイント

WinFormsでトグルスイッチを作るときによくある問題は、クリックしても描画が更新されないことです。これは、状態変更後にInvalidate()を呼んでいない場合に起こります。

C#
protected override void OnCheckedChanged(EventArgs e)
{
    base.OnCheckedChanged(e);
    this.Invalidate();
}

Invalidate()を呼ぶことで、コントロールが再描画され、ON/OFFの見た目が更新されます。

また、PanelやLabelで自作した場合、つまみ部分をクリックしたときに親のPanelのクリックイベントが発火しないことがあります。その場合は、つまみ側にも同じクリックイベントを設定します。

C#
switchPanel.Click += ToggleSwitch_Click;
knob.Click += ToggleSwitch_Click;

さらに、角丸にしたいのに四角いままになる場合は、単にBackColorを変えるだけでは不十分です。角丸を表現するには、GraphicsPathで描画するか、Regionを設定する必要があります。

3-7. WinForms実装に向いているケース

WinFormsでのトグルスイッチ実装は、既存のWindowsフォームアプリに設定項目を追加したい場合に向いています。

業務アプリ、社内ツール、簡単な設定画面、データ入力画面などでは、WinFormsのイベントベースの実装でも十分です。凝ったアニメーションや高度なテーマ切り替えが不要であれば、CheckBoxベースのカスタムコントロールで実用的なトグルスイッチを作れます。

ただし、見た目を細かく作り込みたい場合や、画面全体をモダンなUIにしたい場合は、WPFやWeb UIを検討した方がよいこともあります。

4. WPFでトグルスイッチを作る方法

4-1. WPFではToggleButtonを使うのが基本

WPFでトグルスイッチを作る場合は、ToggleButtonを使うのが基本です。

ToggleButtonは、クリックするたびにON/OFF状態が切り替わるボタンです。通常のButtonとは違い、IsCheckedプロパティを持っています。

XML
<ToggleButton Content="通知" IsChecked="True" />

IsCheckedがtrueならON、falseならOFFとして扱えます。ただし、標準の見た目はトグルスイッチではなくボタンに近いため、トグルスイッチ風にするにはスタイルやテンプレートを変更します。

4-2. ToggleButtonをトグルスイッチ風にカスタマイズする

まずは、簡単なWPFトグルスイッチの例です。

XML
<ToggleButton Width="70"
              Height="34"
              IsChecked="{Binding IsNotificationEnabled}"
              Style="{StaticResource ToggleSwitchStyle}" />

次に、Window.Resourcesなどにスタイルを定義します。

XML
<Window.Resources>
    <Style x:Key="ToggleSwitchStyle" TargetType="ToggleButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid Width="70" Height="34">
                        <Border x:Name="SwitchBackground"
                                CornerRadius="17"
                                Background="Gray" />

                        <Ellipse x:Name="SwitchKnob"
                                 Width="28"
                                 Height="28"
                                 Fill="White"
                                 HorizontalAlignment="Left"
                                 Margin="3" />
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="SwitchBackground"
                                    Property="Background"
                                    Value="MediumSeaGreen" />
                            <Setter TargetName="SwitchKnob"
                                    Property="HorizontalAlignment"
                                    Value="Right" />
                        </Trigger>

                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="SwitchBackground"
                                    Property="Opacity"
                                    Value="0.5" />
                            <Setter TargetName="SwitchKnob"
                                    Property="Opacity"
                                    Value="0.5" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

このスタイルでは、OFFのときは背景がグレー、ONのときは背景が緑になります。IsChecked=Trueになると、つまみのHorizontalAlignmentがRightに変わります。

4-3. ControlTemplateで見た目を変更する方法

WPFのControlTemplateは、コントロールの見た目を丸ごと差し替える仕組みです。ToggleButtonの機能はそのまま使いながら、表示だけをトグルスイッチ風にできます。

ControlTemplateを使うメリットは、状態管理を自分で作らなくてよいことです。クリック時のON/OFF切り替えはToggleButtonが担当し、見た目だけをTriggerで切り替えられます。

たとえば、ON/OFFで背景色を変更する部分は次のように書けます。

XML
<Trigger Property="IsChecked" Value="True">
    <Setter TargetName="SwitchBackground"
            Property="Background"
            Value="MediumSeaGreen" />
</Trigger>

マウスオーバー時の見た目も追加できます。

XML
<Trigger Property="IsMouseOver" Value="True">
    <Setter TargetName="SwitchBackground"
            Property="Opacity"
            Value="0.8" />
</Trigger>

アニメーションを付けたい場合は、VisualStateManagerやStoryboardを使います。ただし、初心者のうちは、まずTriggerでON/OFFの見た目を切り替えるところから始めると分かりやすいです。

4-4. IsCheckedでON/OFF状態を取得する方法

コードビハインドで状態を取得する場合は、IsCheckedを使います。

XML
<ToggleButton x:Name="NotificationSwitch"
              Width="70"
              Height="34"
              Style="{StaticResource ToggleSwitchStyle}"
              Checked="NotificationSwitch_Checked"
              Unchecked="NotificationSwitch_Unchecked" />

C#側では次のように処理します。

C#
private void NotificationSwitch_Checked(object sender, RoutedEventArgs e)
{
    bool isOn = NotificationSwitch.IsChecked == true;
    MessageBox.Show("通知がONになりました");
}

private void NotificationSwitch_Unchecked(object sender, RoutedEventArgs e)
{
    bool isOn = NotificationSwitch.IsChecked == true;
    MessageBox.Show("通知がOFFになりました");
}

IsCheckedはbool?型です。つまり、true、false、nullを持つ可能性があります。通常の2状態スイッチとして使う場合は、次のように書くと安全です。

C#
bool isOn = NotificationSwitch.IsChecked == true;

== trueと比較すれば、nullの場合もfalseとして扱えます。

4-5. データバインディングで状態を管理する方法

WPFでは、コードビハインドに直接処理を書くより、データバインディングで状態を管理する方法がよく使われます。

まず、ViewModelにプロパティを用意します。

C#
using System.ComponentModel;
using System.Runtime.CompilerServices;

public class MainViewModel : INotifyPropertyChanged
{
    private bool _isNotificationEnabled;

    public bool IsNotificationEnabled
    {
        get => _isNotificationEnabled;
        set
        {
            if (_isNotificationEnabled != value)
            {
                _isNotificationEnabled = value;
                OnPropertyChanged();
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

画面側ではIsCheckedにバインドします。

XML
<ToggleButton Width="70"
              Height="34"
              IsChecked="{Binding IsNotificationEnabled, Mode=TwoWay}"
              Style="{StaticResource ToggleSwitchStyle}" />

そして、WindowのDataContextにViewModelを設定します。

C#
public MainWindow()
{
    InitializeComponent();
    DataContext = new MainViewModel();
}

これで、トグルスイッチをクリックするとIsNotificationEnabledが自動的に更新されます。

4-6. MVVMでトグルスイッチを扱うときの注意点

MVVMでトグルスイッチを扱う場合は、ViewModel側のプロパティを状態の基準にします。

よくある失敗は、View側のIsCheckedとViewModel側の変数を別々に管理してしまうことです。これをすると、画面表示と内部状態がずれやすくなります。

基本は次のように考えます。

ViewはToggleButtonを表示します。ViewModelはboolプロパティを持ちます。ViewのIsCheckedとViewModelのプロパティをTwoWayバインディングします。

XML
IsChecked="{Binding IsDarkMode, Mode=TwoWay}"

ViewModel側で値が変わったときに画面を更新したい場合は、INotifyPropertyChangedを正しく実装します。

C#
OnPropertyChanged(nameof(IsDarkMode));

また、トグル変更時に何らかの処理を実行したい場合は、プロパティのsetter内で処理を書くか、Commandを使う方法があります。ただし、setter内に重い処理を書きすぎるとテストしづらくなるため、必要に応じてサービス層に分けるとよいです。

4-7. WPFでよくあるつまずきポイント

WPFでよくあるつまずきは、IsCheckedがbool?型であることを忘れてしまうことです。

C#
bool isOn = toggleButton.IsChecked;

このように書くと、型の違いでエラーになります。次のように書きます。

C#
bool isOn = toggleButton.IsChecked == true;

また、バインディングしているのに値が更新されない場合は、DataContextが設定されているか、プロパティ名が正しいか、INotifyPropertyChangedが実装されているかを確認します。

C#
DataContext = new MainViewModel();

さらに、ControlTemplateで名前を付けた要素に対してSetterが効かない場合は、TargetNameが正しいか確認します。

XML
<Setter TargetName="SwitchKnob"
        Property="HorizontalAlignment"
        Value="Right" />

XAMLは名前の誤りや階層の違いでスタイルが反映されないことがあるため、少しずつ確認しながら作るのがポイントです。

5. Razor・Blazorでトグルスイッチを作る方法

5-1. Razorでトグルスイッチを作る基本方針

RazorやBlazorでトグルスイッチを作る場合、基本はHTMLのチェックボックスです。

HTML
<input type="checkbox">

このチェックボックスをCSSで装飾すると、トグルスイッチのような見た目にできます。内部的にはチェックボックスなので、フォーム送信やバインディングで値を扱いやすいのがメリットです。

Razor PagesやMVCでは、フォーム送信時にbool型のプロパティで値を受け取ります。Blazorでは、@bindを使って画面とC#のプロパティをリアルタイムに連動させます。

5-2. input type="checkbox"とCSSで実装する方法

まずは、CSSだけで作るトグルスイッチの例です。

HTML
<label class="toggle-switch">
    <input type="checkbox" name="IsEnabled" value="true">
    <span class="slider"></span>
</label>

CSSは次のように書きます。

CSS
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 34px;
}

.slider::before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .slider {
    background-color: #4caf50;
}

.toggle-switch input:checked + .slider::before {
    transform: translateX(26px);
}

この方法では、実際のチェックボックスは透明にし、span.sliderをスイッチの見た目として表示しています。input:checkedの状態に応じて、背景色とつまみの位置を切り替えます。

初期値をONにしたい場合は、checked属性を付けます。

HTML
<input type="checkbox" name="IsEnabled" value="true" checked>

5-3. Bootstrapのform-switchを使う方法

Bootstrapを使っている場合は、form-switchを使うと簡単にトグルスイッチを作れます。

HTML
<div class="form-check form-switch">
    <input class="form-check-input"
           type="checkbox"
           role="switch"
           id="notificationSwitch"
           name="IsNotificationEnabled"
           value="true">
    <label class="form-check-label" for="notificationSwitch">
        通知を有効にする
    </label>
</div>

Bootstrapを使うメリットは、自分で細かいCSSを書かなくても、整った見た目のスイッチを作れることです。ラベル、フォーカス表示、基本的な操作性も整えやすくなります。

初期値をONにする場合は、checkedを追加します。

HTML
<input class="form-check-input"
       type="checkbox"
       role="switch"
       id="notificationSwitch"
       name="IsNotificationEnabled"
       value="true"
       checked>

ただし、BootstrapのCSSが読み込まれていないと通常のチェックボックス表示になります。見た目が変わらない場合は、Bootstrapの読み込みを確認しましょう。

5-4. Blazorで@bindを使ってON/OFF状態を管理する方法

Blazorでは、@bindを使うとチェック状態とC#のプロパティを簡単に連動できます。

razor
<label class="toggle-switch">
    <input type="checkbox" @bind="IsDarkMode">
    <span class="slider"></span>
</label>

<p>現在の状態: @(IsDarkMode ? "ON" : "OFF")</p>

@code {
    private bool IsDarkMode { get; set; } = false;
}

この例では、トグルスイッチをクリックするとIsDarkModeの値が自動的に変わります。trueならON、falseならOFFです。

値が変わったタイミングで処理をしたい場合は、@onchangeを使う方法もあります。

razor
<input type="checkbox"
       checked="@IsDarkMode"
       @onchange="OnDarkModeChanged">

razor
@code {
    private bool IsDarkMode { get; set; }

    private void OnDarkModeChanged(ChangeEventArgs e)
    {
        IsDarkMode = (bool)e.Value;
    }
}

ただし、通常は@bindの方が簡潔です。単純なON/OFF管理であれば、まずは@bindを使うのがおすすめです。

5-5. Razor Pages・MVCでフォーム送信時に値を受け取る方法

Razor Pagesでフォーム送信時にトグルスイッチの値を受け取る場合は、PageModelにboolプロパティを用意します。

C#
public class SettingsModel : PageModel
{
    [BindProperty]
    public bool IsNotificationEnabled { get; set; }

    public void OnGet()
    {
        IsNotificationEnabled = true;
    }

    public IActionResult OnPost()
    {
        bool isOn = IsNotificationEnabled;

        return Page();
    }
}

Razor側は次のように書きます。

razor
<form method="post">
    <div class="form-check form-switch">
        <input asp-for="IsNotificationEnabled"
               class="form-check-input"
               role="switch">
        <label asp-for="IsNotificationEnabled"
               class="form-check-label">
            通知を有効にする
        </label>
    </div>

    <button type="submit">保存</button>
</form>

asp-forを使うと、モデルのプロパティとフォーム項目を結び付けられます。

ASP.NET Core MVCの場合も考え方は同じです。ViewModelにboolプロパティを用意し、Viewでasp-forを使います。

C#
public class SettingsViewModel
{
    public bool IsNotificationEnabled { get; set; }
}

razor
<input asp-for="IsNotificationEnabled"
       class="form-check-input"
       role="switch">

フォーム送信時はControllerのActionで受け取ります。

C#
[HttpPost]
public IActionResult Save(SettingsViewModel model)
{
    bool isOn = model.IsNotificationEnabled;

    return View("Index", model);
}

5-6. JavaScriptを使わずに実装できる範囲

基本的なトグルスイッチであれば、JavaScriptを使わずに実装できます。

Razor PagesやMVCでは、HTMLとCSSだけで見た目を作り、フォーム送信時にC#側で値を受け取れます。Blazorでは、@bindを使えばC#だけで状態管理できます。

JavaScriptが必要になるのは、より複雑なアニメーション、画面全体の即時テーマ変更、外部ライブラリとの連携、ブラウザのローカルストレージへの保存などを行う場合です。

単純なON/OFF設定なら、まずはJavaScriptなしで作る方がシンプルです。

5-7. Razor・Blazorでよくあるつまずきポイント

RazorやBlazorでよくある問題は、チェックボックスがOFFのときに値が送信されないことです。HTMLのチェックボックスは、未チェックの場合にフォーム値を送信しません。

ASP.NET Coreのasp-forを使っている場合は、この問題を吸収してくれることが多いですが、手書きのHTMLでは注意が必要です。

HTML
<input type="checkbox" name="IsEnabled" value="true">

この場合、OFFのときはIsEnabled自体が送られません。必要に応じてhidden項目を併用します。

HTML
<input type="hidden" name="IsEnabled" value="false">
<input type="checkbox" name="IsEnabled" value="true">

また、CSSでスイッチの見た目が崩れる場合は、inputとspanの位置関係を確認します。

CSS
.toggle-switch input:checked + .slider

このセレクタは、inputの直後に.sliderがある場合にしか効きません。HTMLの順番が違うと反映されません。

Blazorでは、@bindと@onchangeを同じ要素に同時に書いて混乱することがあります。単純な値更新だけなら@bind、独自処理が必要なら@onchangeというように使い分けると分かりやすくなります。

6. C#トグルスイッチ実装で共通するつまずきポイント

6-1. ON/OFFの状態が正しく反映されない

ON/OFF状態が正しく反映されない原因の多くは、見た目と内部値が別々に管理されていることです。

たとえば、見た目用にBackColorを変えているのに、実際のbool値を変更していない場合、画面上はONに見えても処理上はOFFのままになります。

状態の基準を1つに決めましょう。

WinFormsならChecked、WPFならIsCheckedまたはViewModelのboolプロパティ、Blazorなら@bindしたboolプロパティを基準にします。

悪い例は次のような状態です。

C#
bool isOn;
bool isEnabled;

似た意味の変数を複数持つと、どちらが正しい状態なのか分からなくなります。基本的には、状態を表すプロパティを1つにまとめます。

6-2. クリックしても見た目だけ変わって値が変わらない

見た目だけが変わって値が変わらない場合は、クリックイベントで内部状態を更新しているか確認します。

WinFormsでPanelを使っている場合は、次のように明示的に値を反転させる必要があります。

C#
isOn = !isOn;
UpdateToggleSwitch();

WPFのToggleButtonを使っている場合は、通常はIsCheckedが自動で切り替わります。ただし、ControlTemplateで見た目を変更しただけで、別の要素にクリック処理を持たせている場合は、期待通りにIsCheckedが変わらないことがあります。

Razorでは、CSSだけで見た目を変えている場合でも、実体のinput type="checkbox"が正しく存在している必要があります。見た目用のspanだけをクリックしてもチェック状態が変わらない場合は、labelで囲むか、for属性で関連付けます。

HTML
<label for="switch1">通知</label>
<input id="switch1" type="checkbox">

または、inputをlabelの中に含めます。

HTML
<label class="toggle-switch">
    <input type="checkbox">
    <span class="slider"></span>
</label>

6-3. 初期値をONにする方法が分からない

初期値をONにする方法は、環境によって異なります。

WinFormsでは、Checkedをtrueにします。

C#
toggleSwitch.Checked = true;

WPFでは、IsCheckedをTrueにします。

XML
<ToggleButton IsChecked="True" />

ViewModelを使う場合は、プロパティの初期値をtrueにします。

C#
public bool IsNotificationEnabled { get; set; } = true;

Blazorでも同じように、バインド先のプロパティをtrueにします。

razor
@code {
    private bool IsNotificationEnabled { get; set; } = true;
}

RazorのHTMLで直接書く場合は、checked属性を付けます。

HTML
<input type="checkbox" checked>

重要なのは、画面側だけでなく、サーバー側やViewModel側の初期値も一致させることです。

6-4. イベントが複数回発火してしまう

イベントが複数回発火する原因として多いのは、同じイベントを複数回登録しているケースです。

WinFormsでは、フォームのコンストラクタやLoadイベントが呼ばれるたびに、次のようなコードを何度も実行していないか確認します。

C#
toggleSwitch.CheckedChanged += ToggleSwitch_CheckedChanged;

同じイベントハンドラを何度も追加すると、クリック1回で処理が複数回実行されます。

必要に応じて、追加前に解除します。

C#
toggleSwitch.CheckedChanged -= ToggleSwitch_CheckedChanged;
toggleSwitch.CheckedChanged += ToggleSwitch_CheckedChanged;

WPFでは、XAMLでCheckedイベントを指定し、さらにコード側でもイベント登録していると、二重に実行されることがあります。

Blazorでは、@bindと@onchangeの併用で想定外の動きになることがあります。値更新だけなら@bindに任せ、追加処理が必要な場合は処理の重複に注意します。

6-5. デザインが崩れる・つまみの位置がずれる

つまみの位置がずれる場合は、スイッチ全体の幅、高さ、つまみのサイズ、移動距離の関係を確認します。

たとえば、幅60px、高さ34px、つまみ26px、左右余白4pxの場合、ON時の移動距離は26px程度になります。

CSS
.toggle-switch input:checked + .slider::before {
    transform: translateX(26px);
}

もしスイッチの幅を80pxに変えた場合、移動距離も調整する必要があります。

WinFormsでも同じです。つまみのX座標を固定値で書いている場合、サイズ変更時にずれやすくなります。

C#
int toggleX = this.Checked ? width - toggleSize - 3 : 3;

このように、コントロールの幅や高さから計算すると、サイズ変更に強くなります。

6-6. 無効化状態や読み取り専用状態をどう表現するか

トグルスイッチを操作できない状態にしたい場合は、無効化状態を分かりやすく表現する必要があります。

WinFormsでは、Enabledをfalseにします。

C#
toggleSwitch.Enabled = false;

ただし、カスタム描画している場合は、Enabled == falseのときに色を薄くする処理を入れると分かりやすくなります。

C#
Color backColor = this.Enabled
    ? (this.Checked ? OnBackColor : OffBackColor)
    : Color.LightGray;

WPFでは、IsEnabledに応じてテンプレートのOpacityを変えると自然です。

XML
<Trigger Property="IsEnabled" Value="False">
    <Setter TargetName="SwitchBackground"
            Property="Opacity"
            Value="0.5" />
</Trigger>

Webでは、disabled属性を使います。

HTML
<input type="checkbox" disabled>

無効化状態では、見た目だけでなく操作もできないようにすることが大切です。

6-7. アクセシビリティで注意すべき点

トグルスイッチは見た目が分かりやすい一方で、アクセシビリティへの配慮も必要です。

ラベルなしのスイッチは、何をON/OFFするのか分かりにくくなります。必ず意味のあるラベルを付けましょう。

HTML
<label for="darkModeSwitch">ダークモードを有効にする</label>
<input id="darkModeSwitch" type="checkbox">

Webでは、Bootstrapのようにrole="switch"を付ける方法もあります。

HTML
<input type="checkbox" role="switch">

ただし、roleを付けるだけでは不十分です。キーボードで操作できること、フォーカスが見えること、ラベルと関連付いていることが重要です。

WinFormsやWPFでも、ラベル表示、Tabキーでの移動、無効化状態の見た目などに注意しましょう。

7. トグルスイッチのデザイン改善ポイント

7-1. ON/OFFが直感的に分かる色にする

トグルスイッチでは、ONとOFFの違いが一目で分かる色を使うことが大切です。

一般的には、ONを緑や青、OFFをグレーにします。緑は有効、青は選択中やアクティブ状態として認識されやすい色です。OFFは控えめなグレーにすると、状態の差が分かりやすくなります。

ただし、色だけに頼るのは避けましょう。色覚の違いによって、ON/OFFの違いが分かりにくい場合があります。ラベルやテキストも併用すると親切です。

HTML
<span>通知: ON</span>

または、状態に応じて表示テキストを変えます。

C#
labelStatus.Text = isOn ? "有効" : "無効";

7-2. ラベルを付けて意味を分かりやすくする

トグルスイッチだけを置くと、何を切り替えるスイッチなのか分かりません。必ずラベルを付けましょう。

悪い例は、スイッチだけが表示されている状態です。

HTML
<input type="checkbox">

良い例は、何を切り替えるのかが明確な状態です。

HTML
<label>
    <input type="checkbox">
    メール通知を受け取る
</label>

WPFやWinFormsでも、スイッチの横にLabelを配置すると分かりやすくなります。

XML
<StackPanel Orientation="Horizontal">
    <ToggleButton Style="{StaticResource ToggleSwitchStyle}" />
    <TextBlock Text="通知を有効にする"
               Margin="8,0,0,0"
               VerticalAlignment="Center" />
</StackPanel>

7-3. アニメーションで切り替わりを自然に見せる

トグルスイッチは、ON/OFFが瞬時に切り替わるより、つまみが少し動くアニメーションがある方が自然に見えます。

WebではCSSのtransitionを使うと簡単です。

CSS
.slider {
    transition: 0.3s;
}

.slider::before {
    transition: 0.3s;
}

WPFでは、Storyboardを使ってアニメーションを付けられます。ただし、最初からアニメーションにこだわりすぎると実装が複雑になります。まずはON/OFFが正しく切り替わることを優先しましょう。

WinFormsで滑らかなアニメーションを作る場合は、Timerを使ってつまみの位置を少しずつ動かす方法があります。ただし、業務アプリではシンプルな切り替えだけでも十分なことが多いです。

7-4. サイズや余白を調整する

トグルスイッチは小さすぎるとクリックしづらく、大きすぎると画面内で目立ちすぎます。

デスクトップアプリでは、幅50〜70px、高さ25〜35px程度が扱いやすいサイズです。Webでは、スマートフォンでタップしやすいように、クリック領域を十分に確保することが大切です。

ラベルとの余白も重要です。スイッチとラベルが近すぎると窮屈に見え、離れすぎると関係が分かりにくくなります。

CSS
.switch-label {
    margin-left: 8px;
}

WPFではMarginを使います。

XML
<TextBlock Text="通知"
           Margin="8,0,0,0" />

WinFormsではLocationやMarginを調整します。

7-5. ダークモードに対応する

アプリがダークモードに対応している場合は、トグルスイッチの色もダークモードに合わせます。

ライトテーマでは、OFFを薄いグレー、ONを緑や青にできます。ダークテーマでは、OFFの背景を暗めのグレーにし、つまみや枠線のコントラストを確保します。

WebではCSS変数を使うと管理しやすくなります。

CSS
:root {
    --switch-on: #4caf50;
    --switch-off: #ccc;
    --switch-knob: #fff;
}

.dark {
    --switch-on: #66bb6a;
    --switch-off: #555;
    --switch-knob: #eee;
}

.slider {
    background-color: var(--switch-off);
}

.toggle-switch input:checked + .slider {
    background-color: var(--switch-on);
}

.slider::before {
    background-color: var(--switch-knob);
}

WPFでも、ResourceDictionaryを使ってテーマごとに色を切り替えると管理しやすくなります。

7-6. キーボード操作にも対応する

トグルスイッチはマウスだけでなく、キーボードでも操作できるようにするのが望ましいです。

HTMLのinput type="checkbox"を使っていれば、Tabキーでフォーカスし、Spaceキーで切り替えられます。見た目用のdivだけでスイッチを作ると、キーボード操作やスクリーンリーダー対応が弱くなりがちです。

WPFのToggleButtonも、標準でキーボード操作に対応しています。WinFormsのCheckBoxベースの実装も、フォーカスやキーボード操作に対応しやすいです。

自作する場合でも、ユーザーがマウスを使えるとは限らないことを意識しましょう。

8. C#トグルスイッチ実装の用途例

8-1. 設定画面のON/OFF切り替え

トグルスイッチが最もよく使われるのは、設定画面です。

たとえば、自動保存、起動時に自動実行、確認ダイアログを表示する、バックアップを有効にするなどの設定に使えます。

C#
public bool IsAutoSaveEnabled { get; set; }

設定値は、アプリの設定ファイル、データベース、ユーザープロファイルなどに保存します。画面を開いたときに保存済みの値を読み込み、トグルスイッチの初期値に反映します。

8-2. 通知設定の有効・無効

通知設定もトグルスイッチと相性が良い用途です。

C#
public bool IsNotificationEnabled { get; set; }

ONなら通知を送信し、OFFなら通知を送らないようにします。メール通知、プッシュ通知、アプリ内通知など、種類ごとにスイッチを用意することもあります。

C#
if (IsNotificationEnabled)
{
    SendNotification();
}

ユーザーが変更した値をすぐ保存するか、保存ボタンを押したタイミングでまとめて保存するかは、画面設計に合わせて決めます。

8-3. ダークモードの切り替え

ダークモードの切り替えにもトグルスイッチがよく使われます。

C#
public bool IsDarkMode { get; set; }

ONならダークテーマ、OFFならライトテーマを適用します。

Blazorであれば、IsDarkModeに応じてCSSクラスを切り替える実装ができます。

razor
<div class="@(IsDarkMode ? "dark" : "light")">
    <label>
        <input type="checkbox" @bind="IsDarkMode">
        ダークモード
    </label>
</div>

WPFでは、ResourceDictionaryを切り替えることでテーマを変更できます。

8-4. 管理画面のステータス変更

管理画面では、ユーザーや商品、記事などのステータス変更にトグルスイッチを使うことがあります。

たとえば、次のような項目です。

ユーザーを有効にする、商品を公開する、記事を公開する、キャンペーンを有効にする、メンテナンスモードにする、などです。

C#
public bool IsPublished { get; set; }

ただし、管理画面でトグルを切り替えた瞬間に重要な状態が変わる場合は注意が必要です。誤操作を防ぐために確認ダイアログを出す、変更後に保存ボタンを押させる、変更履歴を残すなどの対策を検討しましょう。

8-5. フォーム入力項目の有効・無効切り替え

トグルスイッチで、他の入力項目の有効・無効を切り替えることもできます。

たとえば、「詳細設定を有効にする」がONのときだけ、追加の入力欄を有効にするケースです。

WinFormsでは次のように書けます。

C#
private void toggleAdvanced_CheckedChanged(object sender, EventArgs e)
{
    textBoxAdvanced.Enabled = toggleAdvanced.Checked;
}

WPFでは、IsEnabledにバインドできます。

XML
<TextBox IsEnabled="{Binding IsAdvancedEnabled}" />

Blazorでは、disabled属性を条件で付けます。

razor
<input type="text" disabled="@(!IsAdvancedEnabled)">

このように、トグルスイッチは単体の設定だけでなく、画面全体の入力状態を制御する用途にも使えます。

9. C#トグルスイッチに関するよくある質問

9-1. C#に標準のトグルスイッチコントロールはありますか

C#という言語自体には、標準のトグルスイッチコントロールはありません。UIコントロールは、WinForms、WPF、ASP.NET Core、Blazorなどのフレームワーク側で扱います。

WinFormsには、スマートフォン風のトグルスイッチは標準では用意されていません。CheckBoxをカスタマイズするか、自作コントロールを作るのが一般的です。

WPFでは、ToggleButtonを使ってトグルスイッチ風にできます。RazorやBlazorでは、HTMLのinput type="checkbox"をCSSで装飾する方法がよく使われます。

9-2. WinFormsでToggleButtonは使えますか

WinFormsには、WPFのようなToggleButtonコントロールは標準ではありません。

ただし、CheckBoxにはON/OFF状態を持つCheckedプロパティがあります。そのため、WinFormsではCheckBoxをベースにトグルスイッチ風のUIを作ることが多いです。

簡単にボタン風にしたいだけなら、CheckBoxのAppearanceを変更する方法もあります。

C#
checkBox1.Appearance = Appearance.Button;
checkBox1.Text = "OFF";

ただし、これだけではスマートフォン風のスイッチにはなりません。本格的なトグルスイッチにしたい場合は、カスタム描画を行うのがおすすめです。

9-3. WPFのToggleButtonとCheckBoxは何が違いますか

WPFのToggleButtonとCheckBoxは、どちらもIsCheckedを持ち、ON/OFF状態を扱えます。

違いは主に見た目と用途です。CheckBoxは、チェックマーク付きの選択項目として使われることが多いです。ToggleButtonは、押された状態と押されていない状態を持つボタンとして使われます。

トグルスイッチを作る場合は、ToggleButtonの方が見た目をスイッチ風にカスタマイズしやすく、用途としても自然です。

ただし、内部的な状態管理はどちらもIsCheckedを使えるため、シンプルなON/OFF入力であればCheckBoxをスタイル変更して使うこともできます。

9-4. Razorでトグルスイッチの値をサーバーに送るにはどうすればよいですか

Razor PagesやMVCでは、フォーム内にinput type="checkbox"を置き、nameまたはasp-forでモデルのプロパティと対応させます。

Razor Pagesの例です。

razor
<form method="post">
    <input asp-for="IsNotificationEnabled"
           class="form-check-input"
           role="switch">
    <button type="submit">保存</button>
</form>

PageModel側では、[BindProperty]を付けたboolプロパティを用意します。

C#
[BindProperty]
public bool IsNotificationEnabled { get; set; }

フォーム送信後は、OnPostで値を確認できます。

C#
public IActionResult OnPost()
{
    bool isOn = IsNotificationEnabled;
    return Page();
}

手書きHTMLの場合は、OFFのときにチェックボックスの値が送信されない点に注意しましょう。

9-5. ライブラリを使った方がよいケースはありますか

見た目の完成度を重視する場合や、短時間で実装したい場合は、ライブラリを使うのも有効です。

WebアプリでBootstrapを使っているなら、form-switchを使うだけでトグルスイッチを作れます。WPFでも、UIコンポーネントライブラリを使えば、モダンなスイッチを簡単に導入できる場合があります。

一方で、ライブラリを増やすと依存関係も増えます。小さな機能のためだけに大きなライブラリを追加すると、保守やアップデートの負担が増えることもあります。

小規模なアプリや学習目的なら自作、大規模な業務アプリやデザイン統一が必要なプロジェクトならライブラリ利用を検討するとよいです。

9-6. 初心者にはWinForms・WPF・Razorのどれが簡単ですか

初心者が「C#でトグルスイッチを作る」ことだけを目的にするなら、使っている環境によって簡単な方法は変わります。

WinFormsを学んでいるなら、CheckBoxをカスタマイズする方法が分かりやすいです。イベント処理が直感的で、クリック時にCheckedを見るだけで状態を取得できます。

WPFを学んでいるなら、ToggleButtonとIsCheckedを使う方法がおすすめです。最初はXAMLのスタイルやテンプレートが難しく感じるかもしれませんが、慣れると見た目の変更がしやすいです。

Webアプリを作っているなら、RazorやBlazorでinput type="checkbox"を使う方法が簡単です。Bootstrapを使えば、ほとんどCSSを書かずにスイッチ風の見た目にできます。

学習目的なら、まずは「内部状態はboolで管理する」という考え方を理解することが重要です。その上で、環境に合ったUI実装を選ぶとスムーズです。

まとめ

C#でトグルスイッチを作る方法は、使用するフレームワークによって異なります。

WinFormsでは、標準のトグルスイッチはないため、CheckBoxをカスタマイズする方法や、Panel・Buttonを使って自作する方法がよく使われます。実装時は、Checkedや独自のbool変数を状態の基準にし、状態変更後に見た目を更新することが大切です。

WPFでは、ToggleButtonを使うのが基本です。IsCheckedでON/OFF状態を管理し、ControlTemplateやTriggerで見た目をトグルスイッチ風に変更できます。MVVMで実装する場合は、ViewModelのboolプロパティにTwoWayバインディングするのがおすすめです。

RazorやBlazorでは、HTMLのinput type="checkbox"を使います。CSSでスイッチ風に装飾したり、Bootstrapのform-switchを使ったりできます。Blazorでは@bindを使うことで、C#のプロパティと画面の状態を簡単に連動できます。

どの環境でも共通して重要なのは、見た目と内部状態を一致させることです。ON/OFFの状態を複数の場所で重複管理せず、基準となるbool値を1つに決めると、バグを防ぎやすくなります。

トグルスイッチは、設定画面、通知設定、ダークモード、公開状態の切り替え、フォーム項目の有効・無効切り替えなど、さまざまな場面で使える便利なUIです。まずはシンプルな実装から始め、必要に応じてデザイン、アニメーション、アクセシビリティを改善していきましょう。