FreakyRadioButton

FreakyRadioButton

FreakyRadioButton is a Skia-based custom control in MAUI. It creates a RadioButton control and adds some additional properties and events.

   <freakyControls:FreakyRadioButton
    OutlineColor="{StaticResource Primary}"
    FillColor="{StaticResource Primary}"
    CheckColor="White"
    HasCheckAnimation="True"
    CheckedChanged="FreakyCheckbox_CheckedChanged"/>

Properties:

Name: Gets or sets the name of this Radiobutton, which can be used as an identifier to identify this radiobutton when its added to a radiogroup, you will get the same name in the radiogroup's SelectedRadioButtonChanged event and SelectedRadioButtonChangedCommand (THIS IS NOT A TEXT PROPERTY).

HasCheckAnimation: Gets or sets whether check animation is enabled or disabled.

OutlineColor: The outline color of your radiobutton. The default is Black.

OutlineWidth: This defines the outline width for your radiobutton.

FillColor: The color you want your radiobutton to fill. The default is Black.

CheckColor: The color for your radiobutton check. The default is White.

CheckWidth: This defines the check width for your radiobutton.

SizeRequest: This defines the size of your checkbox and works like height and width request, in case the space is available then it is allotted to the checkbox.

IsChecked: default is set to false, Changing this property changes the checked state of the checkbox.

CheckedChangedCommand: An ICommand you can use to subscribe to the Check changed event from your ViewModel. It also sends the current state of the CheckBox as a CommandParameter

Events:

CheckedChanged: Event that is raised when the checked state of the radio button changes.

FreakyRadioGroup

The FreakyRadioGroup class is a custom radio button group that extends the standard StackLayout class in MAUI. It allows for the creation of a group of radio buttons that are mutually exclusive, meaning that only one radio button in the group can be selected at a time.

    <freakyControls:FreakyRadioGroup
        Spacing="10"
        SelectedRadioButtonChanged="FreakyRadioGroup_SelectedRadioButtonChanged"
        SelectedRadioButtonChangedCommand="{Binding SelectedIndexCommand}"
        SelectedIndex="{Binding CheckedRadioButton}"
        Orientation="Vertical">

        <HorizontalStackLayout Spacing="10" >

            <freakyControls:FreakyRadioButton
            OutlineColor="{StaticResource Tertiary}"
            FillColor="{StaticResource Primary}"
            CheckColor="White"
            />

            <Label Text="Color Scheme"/>

        </HorizontalStackLayout>

        <HorizontalStackLayout Spacing="10" >
            <freakyControls:FreakyRadioButton HorizontalOptions="Start"/>
            <freakyControls:FreakySvgImageView
                HeightRequest="50"
                SvgMode="AspectFit"
                SvgAssembly="{x:Static samples:Constants.SvgAssembly}"
                ResourceId="{x:Static samples:Constants.DotnetBot}" 
                WidthRequest="50" />
        </HorizontalStackLayout>

    </freakyControls:FreakyRadioGroup>

The FreakyRadioGroup class also exposes a SelectedIndex property that can be used to set the default selected radio button in the group.

Properties:

SelectedRadioButtonChangedCommand: Gets or sets the command which will be triggered when the selected RB in that group changes.

SelectedIndex: Gets or sets the index of the currently selected radio button in the group. The index is zero-based and corresponds to the order in which the radio buttons were added to the group. Setting this property will automatically select the corresponding radio button and deselect any previously selected radio button in the group.

Events:

SelectedRadioButtonChanged: An Event that is triggered when the selected RB in that group changes. Returns a FreakyRadioButtonEventArgs that gives you the selected radiobutton index and that radiobuttons Name property.

NOTE: FreakyRadioGroup should never be nested into one another, if nested they will probably misbehave. Also, RadioButtons can be nested in its subviews but make sure that they are not part of custom control, they can be nested at any level even in the same group.