Can I link/associate a Label to a CheckBox to handle toggling the checkbox?

1 Answer 532 Views
CheckBox
Mark
Top achievements
Rank 3
Iron
Iron
Iron
Mark asked on 03 Aug 2023, 05:49 PM

Can we link/associate a Label to a CheckBox to handle toggling the checkbox?

It would be useful to do this using  MAUI standard label or providing a Text property to show next to the Checkbox?

Am I missing something? If this is not possible, its seems like a good feature?

eg:

1 Answer, 1 is accepted

Sort by
1
Accepted
Lance | Senior Manager Technical Support
Telerik team
answered on 03 Aug 2023, 06:57 PM

Hi Mark,

The RadCheckBox was intentionally designed to not have an embedded label. This was not only to follow the .NET MAUI platform's design guidelines (i.e. there's no label for MAUI's CheckBox), but to also allow for more use cases without the visual tree overhead that comes with the additional elements (e.g.,, DataGridBooleanColumn, but there are many others).

The good thing is if there is a need for a label-associated CheckBox, you can add that Label with the RadCheckBox in a HorizontalStackLayout.

<HorizontalStackLayout Spacing="5" Padding="5">
    <telerik:RadCheckBox />
    <Label />
<HorizontalStackLayout>

If you want any kind of action when the user's taps the Label, you then need to add a TapGestureRecognizer on the Label to toggle the IsChecked value.

For example:

void OnTapGestureRecognizerTapped(object sender, TappedEventArgs args)
{
    MyCheckBox.IsChecked = !MyCheckBox.IsChecked;
}

 

Custom Control

If you want a combined control that has both, and expose a BindableProperty for the text, then you can use .NET MAUI's ContentView:

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
             x:Class="LabeledCheckBoxDemo.MyCustomCheckBoxWithLabel">
    <HorizontalStackLayout Spacing="5"
                           Padding="5">
        <telerik:RadCheckBox x:Name="PART_CheckBox" />
        <Label x:Name="PART_Label">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped" NumberOfTapsRequired="1" />
            </Label.GestureRecognizers>
        </Label>
    </HorizontalStackLayout>
</ContentView>

and in the code behind expose two BindableProperties IsChecked and Text. finally, in the BindableProperty's OnPropertyChanged event handler, you can update the UI however you see fit.

public partial class MyCustomCheckBoxWithLabel : ContentView
{
	public MyCustomCheckBoxWithLabel()
	{
		InitializeComponent();
	}

    void OnTapGestureRecognizerTapped(object sender, TappedEventArgs args)
    {
        PART_CheckBox.IsChecked = !PART_CheckBox.IsChecked;
    }

    // BINDABLE PROPERTIES

    public bool IsChecked
    {
        get => (bool)GetValue(IsExpandedProperty);
        set => SetValue(IsExpandedProperty, value);
    }

    public static readonly BindableProperty IsExpandedProperty = BindableProperty.Create(
        nameof(IsChecked), 
        typeof(bool), 
        typeof(MyCustomCheckBoxWithLabel), 
        false, 
        propertyChanged: OnIsExpandedChanged);


    static void OnIsExpandedChanged (BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is MyCustomCheckBoxWithLabel self)
        {
            self.PART_CheckBox.IsChecked = (bool)newValue;
        }
    }

    public string Text
    {
        get => (string)GetValue(TextProperty);
        set => SetValue(TextProperty, value);
    }

    public static readonly BindableProperty TextProperty = BindableProperty.Create(
        nameof(Text), 
        typeof(string), 
        typeof(MyCustomCheckBoxWithLabel), 
        string.Empty, 
        propertyChanged: OnTextChanged);


    static void OnTextChanged (BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is MyCustomCheckBoxWithLabel self)
        {
            self.PART_Label.Text = (string)newValue;
        }
    }
}

Now you can use it where you want:

 

 

If you're not familiar with BindableProperties, than I recommend the following resources before you write any code:

Though I don't recommend looking at the custom control until after you've done the tutorial. This is because you'll want to learn how to use the OnPropertyChanged action of the BindableProperty first (you need the bindable parameter to get access to the instance).

Regards,
Lance | Manager Technical Support
Progress Telerik

A brand new .NET MAUI course was just added to the Virtual Classroom. The training course is developed to help you get started with the Telerik UI for .NET MAUI components and features. It aims to put you in the shoes of an engineer who adds new features to an existing application. You can check it out at https://learn.telerik.com
Mark
Top achievements
Rank 3
Iron
Iron
Iron
commented on 03 Aug 2023, 07:04 PM

Thanks for this detailed answer
Lance | Senior Manager Technical Support
Telerik team
commented on 03 Aug 2023, 07:41 PM

Hi Mark, I happy to hear this was helpful.

Since I had already gone through the effort of writing a working custom control with BindableProperties, I added to the live demo on GitHub. Here's where you can get it:

Here's what it looks like on Android:

Lance | Senior Manager Technical Support
Telerik team
commented on 04 Aug 2023, 12:40 PM

Hi Mark, I have one more piece of good news. I spoke to the Maui team and we actually have an attached property that you can use on your associated UI elements that will toggle the RadCheckBox's value.

<SomeViewElement telerik:RadCheckBox.ToggleOnTap="{Reference MyCheckBox}" />

This will save you the effort of wiring up a TapGestureRecognizer. Here's the code from my demo, updated with the attached property instead:

You still need a Label to display the text, but at least the gesture recognition is easier and is more MVVM friendly because you don't need a Tapped event handler.

Mark
Top achievements
Rank 3
Iron
Iron
Iron
commented on 04 Aug 2023, 01:39 PM

ok, great, will have a look 
Mark
Top achievements
Rank 3
Iron
Iron
Iron
commented on 04 Aug 2023, 03:12 PM

 

This is perfect, just what I needed.

Lance | Senior Manager Technical Support
Telerik team
commented on 04 Aug 2023, 03:17 PM

Fantastic! Please don't hesitate to reach out again if you have any issues.

Note: If you have private code that you don't want to share publicly, or have a high priority issue that needs a faster response, you might want to consider opening a Support Ticket instead of a forum post.

Francisco M.
Top achievements
Rank 1
commented on 12 Dec 2023, 12:40 PM

Hi, I've been trying to use this approach but the ToggleOnTap won't do anything i've tried literally copying and pasting all your code but the click on the label won't do anything.

The project it's in NET8 maybe they changed something. The control is just inside a grid in the page i want to use it. The contentview etc it's all the same, code behind and everything

Any ideas? Thanks

Lance | Senior Manager Technical Support
Telerik team
commented on 12 Dec 2023, 01:22 PM

My troubleshooting recommendation is to make sure you do not have another transparent element on top of what you're using. such an element would be higher in the Z-index and block all input. 

for example:

<Grid>
    <Label />

    <Grid x:Name="ThisWillBlockInputFromReachingTheLabel" />
</Grid>

Francisco M.
Top achievements
Rank 1
commented on 12 Dec 2023, 01:37 PM

That was the problem, we're using your navigation view, inside de navigationview it's a tabbed view, and inside a tab there's another contentview (as a page) and inside is the CheckBox with the label. and yeah but the looks of it, there's so much on the Z index that it's blocking the tap on the label, i guess they'll have to use the click on the checkbox only or do you know about any workaround?

Thanks for the quick answer!

Lance | Senior Manager Technical Support
Telerik team
commented on 12 Dec 2023, 01:40 PM

If that overlaying element does not need any input gestures, you can make it "touch transparent" by setting InputTransparent=True. This will allow the user's gesture/mouse to go through the overlaying item, and interact with the Label under it.

 

Tags
CheckBox
Asked by
Mark
Top achievements
Rank 3
Iron
Iron
Iron
Answers by
Lance | Senior Manager Technical Support
Telerik team
Share this question
or