DBTech.Maui.SwitchCotrol 1.0.0

Maui SwitchControl

This is a Switch control that would allow you to set ThumbColor and OnColor based on your requirements.

How to use it?

• Install the NuGet package into your project
• Use it in your code where you want it, like this:

MainPage.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:ColorSwitch.Controls;assembly=ColorSwitch"
             x:Class="TestApp.Views.MainPage">

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="CustomLabelStyle" TargetType="Label">
                <Setter Property="TextColor" Value="Blue" />
                <Setter Property="FontSize" Value="16" />
                <Setter Property="HorizontalTextAlignment" Value="Center" />
                <Setter Property="VerticalTextAlignment" Value="Center" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <VerticalStackLayout Spacing="15">

        <Grid ColumnDefinitions="*,Auto" >

            <Label Grid.Column="0" Text="I'm SwitchControl." VerticalOptions="Center" />

            <controls:SwitchControl
                Grid.Column="1"
                x:Name="customSwitchControl"
                IsToggled="{Binding IsSwitchToggled}"
                ThumbOnColor="{StaticResource Green}"
                ThumbOffColor="{StaticResource WhiteSmoke }"
                TrackOnColor="{StaticResource LightGreen}"
                TrackOffColor="{StaticResource Gray300}"
                HorizontalOptions="End"/>

        </Grid>

         <controls:SwitchControl
            x:Name="customSwitchWithLabel"
            Padding="5,0"
            LabelStyle="{StaticResource CustomLabelStyle}"
            IsToggled="{Binding IsSwitchToggled}"
            ThumbOffColor="{StaticResource WhiteSmoke}"
            ThumbOnColor="{StaticResource Green}"
            TrackOnColor="{StaticResource LightGreen}"
            TrackOffColor="{StaticResource LightPink}"
            HorizontalOptions="Start" >
            <controls:SwitchControl.Triggers>
                <DataTrigger TargetType="controls:SwitchControl"
                                Binding="{Binding IsToggled, Source={x:Reference customSwitchWithLabel}}"
                                Value="True">
                    <Setter Property="LabelText" Value="Switch is ON"/>
                </DataTrigger>
                <DataTrigger TargetType="controls:SwitchControl"
                                Binding="{Binding IsToggled, Source={x:Reference customSwitchWithLabel}}"
                                Value="False">
                    <Setter Property="LabelText" Value="Switch is OFF"/>
                </DataTrigger>
            </controls:SwitchControl.Triggers>
        </controls:SwitchControl>

    </VerticalStackLayout>
</ContentPage>

MainPageViewModel.cs

public class MainPageViewModel : ViewModelBase
{
    public MainPageViewModel()
    {
    }

    private bool _isSwitchToggled { get; set; }
    public bool IsSwitchToggled
    {
        get { return _isSwitchToggled; }
        set { _isSwitchToggled = value; OnPropertyChanged(nameof(IsSwitchToggled)); }
    }
}

Results:

https://github.com/user-attachments/assets/be700561-4161-4b83-88d9-3b621a8760e2

https://github.com/user-attachments/assets/ea26e209-e046-4dee-92ea-7dc49b93f982

https://github.com/user-attachments/assets/89711564-385c-424e-bc5a-65c1765ceec3