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
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:
- Microsoft has a complete tutorial here => Bindable Properties - .NET MAUI | Microsoft Learn
- Or you can see how I built a custom "FloatingLabel" control
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
Rank 3
Iron
Iron
Iron
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:
- Control's code
- Demo Implementation
Here's what it looks like on Android:
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.
Rank 3
Iron
Iron
Iron
Rank 3
Iron
Iron
Iron
This is perfect, just what I needed.
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.
Rank 1
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
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>
Rank 1
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!
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.