Skip to content

Instantly share code, notes, and snippets.

@Guiorgy
Created August 2, 2023 15:05
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Guiorgy/0acd0a8b06231786c7d2bdbcdd845125 to your computer and use it in GitHub Desktop.
Save Guiorgy/0acd0a8b06231786c7d2bdbcdd845125 to your computer and use it in GitHub Desktop.
A custom MAUI view that combines a CheckBox with a Label and reacts to taps to both the CheckBox and Label
<?xml version="1.0" encoding="utf-8" ?>
<HorizontalStackLayout xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiExtensions.CheckBoxLabeled"
x:Name="this">
<!-- Color="{Binding Source={x:Reference this}, Path=Color}" -->
<CheckBox
x:Name="CheckBox"
IsChecked="{Binding Source={x:Reference this}, Path=IsChecked}"
CheckedChanged="OnCheckChanged" />
<Label
x:Name="Label"
Text="{Binding Source={x:Reference this}, Path=Text}"
VerticalOptions="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="OnLabelClicked" />
</Label.GestureRecognizers>
</Label>
</HorizontalStackLayout>
using OnCheckedChanged = System.EventHandler<Microsoft.Maui.Controls.CheckedChangedEventArgs>;
namespace MauiExtensions;
public partial class CheckBoxLabeled : HorizontalStackLayout, ICheckBox, ILabel
{
#region CheckBox
public static readonly BindableProperty IsCheckedProperty = BindableProperty.CreateAttached(
propertyName: nameof(IsChecked),
returnType: typeof(bool),
declaringType: typeof(CheckBoxLabeled),
defaultValue: CheckBox.IsCheckedProperty.DefaultValue,
defaultBindingMode: CheckBox.IsCheckedProperty.DefaultBindingMode);
public bool IsChecked
{
get => (bool)GetValue(IsCheckedProperty);
set { SetValue(IsCheckedProperty, value); }
}
//public static readonly BindableProperty ColorProperty = BindableProperty.Create(
// propertyName: nameof(Color),
// returnType: typeof(Color),
// declaringType: typeof(CheckBoxLabeled),
// defaultValue: CheckBox.ColorProperty.DefaultValue,
// defaultBindingMode: CheckBox.ColorProperty.DefaultBindingMode);
//
//public Color Color
//{
// get => (Color)GetValue(ColorProperty);
// set { SetValue(ColorProperty, value ?? _initialColor); }
//}
protected readonly Color _initialColor;
public Color Color
{
get => CheckBox.Color;
set { CheckBox.Color = value ?? _initialColor; }
}
public Paint Foreground => CheckBox.Foreground;
public event OnCheckedChanged CheckedChanged;
#endregion
#region Label
public static readonly BindableProperty TextProperty = BindableProperty.Create(
propertyName: nameof(Text),
returnType: typeof(string),
declaringType: typeof(CheckBoxLabeled),
defaultValue: "",
defaultBindingMode: BindingMode.OneWay);
public string Text
{
get => (string)GetValue(TextProperty);
set { SetValue(TextProperty, value); }
}
protected readonly Color _initialTextColor;
public Color TextColor
{
get => Label.TextColor;
set { Label.TextColor = value ?? _initialTextColor; }
}
Microsoft.Maui.Font ITextStyle.Font => ((ITextStyle)Label).Font;
public double CharacterSpacing { get => Label.CharacterSpacing; set => Label.CharacterSpacing = value; }
public TextAlignment HorizontalTextAlignment { get => Label.HorizontalTextAlignment; set => Label.HorizontalTextAlignment = value; }
public TextAlignment VerticalTextAlignment { get => Label.VerticalTextAlignment; set => Label.VerticalTextAlignment = value; }
public bool FontAutoScalingEnabled { get => Label.FontAutoScalingEnabled; set => Label.FontAutoScalingEnabled = value; }
[System.ComponentModel.TypeConverter(typeof(FontSizeConverter))]
public double FontSize { get => Label.FontSize; set => Label.FontSize = value; }
public string FontFamily { get => Label.FontFamily; set => Label.FontFamily = value; }
public TextDecorations TextDecorations { get => Label.TextDecorations; set => Label.TextDecorations = value; }
public FontAttributes FontAttributes { get => Label.FontAttributes; set => Label.FontAttributes = value; }
public double LineHeight { get => Label.LineHeight; set => Label.LineHeight = value; }
#endregion
public bool CheckChangeOnLableTap { get; set; } = true;
public CheckBoxLabeled()
{
InitializeComponent();
_initialColor = CheckBox.Color;
_initialTextColor = Label.TextColor;
}
protected void OnLabelClicked(object sender, EventArgs e)
{
if (CheckChangeOnLableTap) CheckBox.IsChecked = !CheckBox.IsChecked;
}
protected void OnCheckChanged(object sender, CheckedChangedEventArgs e)
{
CheckedChanged?.Invoke(this, e);
}
}
<?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:custom="clr-namespace:MauiExtensions"
x:Class="MauiApp1.MainPage">
<custom:CheckBoxLabeled
Text="Can Click Label"
CheckedChanged="OnCanClickLabelCheckChanged" />
<custom:CheckBoxLabeled
Text="Can't Click Label"
CheckedChanged="OnCantClickLabelCheckChanged"
CheckChangeOnLableTap="False" />
<custom:CheckBoxLabeled
Text="Customization"
IsChecked="True"
Color="Red"
TextColor="Orange"
FontSize="16" />
</ContentPage>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment