ToggleSwitch クイックスタート

This guide shows how users can set up a simple ToggleSwitch.

Prerequisites

Visual Studio
C1.WPF.Input package installed through NuGet

Set up Environment

Open Visual Studio and create a WPF Application

Add ToggleSwitch to Your View

Drag and drop ToggleSwitch from the toolbox. The following code shows how to add ToggleSwitch through code.

C#	コードのコピー
<c1:C1ToggleSwitch Grid.Column="0" IsOn="True" OnContent="On" OffContent="Off" />

Customization

Customize the toggle switch's appearance and content to match your application's theme. The following code shows how to set complex UI elements for the On and Off content.

C#	コードのコピー
<c1:C1ToggleSwitch IsOn="True" Grid.Column="1"> <c1:C1ToggleSwitch.OnContent> <c1:C1Border Background="Green" CornerRadius="5"> <TextBlock HorizontalAlignment="Center" Text="On"/> </c1:C1Border> </c1:C1ToggleSwitch.OnContent> <c1:C1ToggleSwitch.OffContent> <c1:C1Border Background="Red" Foreground="White" CornerRadius="5"> <TextBlock HorizontalAlignment="Center" Text="On"/> </c1:C1Border> </c1:C1ToggleSwitch.OffContent> </c1:C1ToggleSwitch>

コードのコピー

 <c1:C1ToggleSwitch IsOn="True" Grid.Column="1">
        <c1:C1ToggleSwitch.OnContent>
            <c1:C1Border Background="Green" CornerRadius="5">
                <TextBlock HorizontalAlignment="Center" Text="On"/>
            </c1:C1Border>
        </c1:C1ToggleSwitch.OnContent>
        <c1:C1ToggleSwitch.OffContent>
            <c1:C1Border Background="Red" Foreground="White" CornerRadius="5">
                <TextBlock HorizontalAlignment="Center" Text="On"/>
            </c1:C1Border>
        </c1:C1ToggleSwitch.OffContent>
    </c1:C1ToggleSwitch>