Search code examples
c#xamlcheckboxmaui

.net maui checkbox check mark color

I have the following check in my XAML

<StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="15" BackgroundColor="Yellow">
    <CheckBox IsChecked="{Binding SuperUser , Mode=TwoWay}" Color="White" BackgroundColor="Green" />
    <Label Style="{StaticResource CheckBoxText}" Margin="0,0,0,0" Text="{x:Static strings:Strings.config_super_user}"/>
</StackLayout>

The result of this is almost what we want as seen below:

enter image description here

So by setting the background color of the checkbox we are able to affect the color of the Check mark. The challenge I am facing is all the extra background color around the check box (The green that extends beyond the "color" area of the checkbox). Any idea how to get rid of that?

UPDATE:

I tried the following of putting the checkbox inside a frame to cover up the extra background color that appears around the checkbox

        <StackLayout Orientation="Horizontal" VerticalOptions="Center" Padding="0" Margin="0" >
            <Frame BorderColor="White" BackgroundColor="Orange" CornerRadius="0" WidthRequest="10" HeightRequest="10" HorizontalOptions="Center" VerticalOptions="Center" 
                        HasShadow="False" Padding="0" Margin="0">
                <CheckBox IsChecked="true" Color="White" BackgroundColor="Transparent" Margin="0"  />
            </Frame>
            <Label Text="checkbox label" Margin="15,0,0,0" HorizontalOptions="Start" VerticalOptions="Center" Grid.Column="1"/>
        </StackLayout>

This ALMOST works. What I end up with looks like the image below and you can see a slight bit of the background color still visible at the outer edge.

enter image description here

I have tried many things to get rid of that extra background color but nothing I try seems to be effective. Any ideas on this??

Solution

  • You may be on the right track by putting a frame under it, but what seemed to work better on my limited "farm" of 2 Android (A51 and S10) and 2 iOS devices (iPhone 11 and iPad) is to place a border over it instead. I have to tell you though, I'm concerned about iOS devices since the native checkbox rendering is round. There's no guarantee this wouldn't be wonky on "some" devices but it works on what I've got.

    If you try it, make sure to set InputTransparent on the Border otherwise the checkboxes won't toggle.

    <?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"
             xmlns:local="clr-namespace:MauiCheckbox"
             x:Class="MauiCheckbox.MainPage">
    <ContentPage.BindingContext>
        <local:MainPageBinding/>
    </ContentPage.BindingContext>
    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <Image
                Source="dotnet_bot.png"
                HeightRequest="185"
                Aspect="AspectFit"
                SemanticProperties.Description="dot net bot in a race car number eight" />

            <StackLayout HeightRequest="40" Orientation="Horizontal" VerticalOptions="Center" Spacing="15" BackgroundColor="Yellow">
                <Grid 
                    HeightRequest="40"
                    WidthRequest="40" >
                    <CheckBox 
                        Margin="2"
                        IsChecked="{Binding SuperUser1}"
                        Color="White"
                        BackgroundColor="Green"/>
                    <Border 
                        Stroke="Yellow" 
                        StrokeThickness="14"
                        BackgroundColor="Transparent"
                        InputTransparent="True"/>
                </Grid>
                <Label Text="Super User" VerticalTextAlignment="Center"/>
            </StackLayout>

            <StackLayout HeightRequest="40" Orientation="Horizontal" VerticalOptions="Center" Spacing="15" BackgroundColor="Yellow">
                <Grid 
                    HeightRequest="40"
                    WidthRequest="40" >
                    <CheckBox 
                        Margin="2"
                        IsChecked="{Binding SuperUser2}"
                        Color="White"
                        BackgroundColor="Green"/>
                    <Border 
                        Stroke="Yellow" 
                        StrokeThickness="14" 
                        BackgroundColor="Transparent"
                        InputTransparent="True"/>
                </Grid>
                <Label Text="Super User" VerticalTextAlignment="Center"/>
            </StackLayout>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>
    Androids

    android

    iOS

    iOS