[.NET MAUI][Switch] Switch の外観の色を設定する

本記事の概要

この記事では Switch の外観の色を設定する方法について説明します。

公式サイト情報はコチラを参照してください。

Switch の外観を設定する例

Switch の外観を設定する

Switch の外観はつまみとそれ以外に分かれています。

つまみの色は ThumbColor プロパティで、つまみ以外の部分は OnColor プロパティで設定します。

XAML の例

以下の例では、２つの Switch を配置し、上の Switch はデフォルトのもので外観を変更していません。下の Switch はつまみの色を HotPink に、それ以外の色を LightPink に設定する例です。

XAML の例

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppSample.MainPage">

    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <Switch />
            <Switch ThumbColor="HotPink" OnColor="LightPink"　/>

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

C# の例

以下は 先ほどのXAML の例を コードビハインドで行う例です。

C# の例

public MainPage()
{
    InitializeComponent();
    mySwitch2.ThumbColor = Colors.HotPink;
    mySwitch2.OnColor = Colors.LightPink;
}

XAML の例

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppSample.MainPage">

    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <Switch x:Name="mySwitch1" />
            <Switch x:Name="mySwitch2" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Switch の外観を設定する例

.NET MAUI Tips

本サイトでまとめている .NET MAUI Tips の一覧はこちらから確認できます。

Please follow and like us: