Does RadButton support Focused State?

Hello Allen,

I'm not sure exactly what is going on in your screenshot, there should be a focus border around the button. Here is what I see when tabbing between a MAUI Button and a RadButton.

Using the following code:

<?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"
             x:Class="FocusTests.MainPage"
             xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"
             BackgroundColor="{DynamicResource SecondaryColor}">

    <Grid>
        <VerticalStackLayout Spacing="10" HorizontalOptions="Center" VerticalOptions="Center">
            <Button Text="Button"/>
            <telerik:RadButton Text="RadButton" BackgroundColor="Gray" />
        </VerticalStackLayout>
    </Grid>
</ContentPage>

Unfocused:

Focused:

Notice there is a border around the RadButton, just like the MAUI Button's state. Is it possible that your black-button styling is obscuring the focus border element?

Note: I am using .NET MAUI preview14 and an unreleased Telerik UI for MAUI v0.6.0 (we expect 0.6.0 to be available to you this week, likely within a day or two). It is remotely possible that you'll need to wait until 0.6.0 to see this behavior, but I've not gotten any reports of such an issue yet.

Solution

In any case, you'll need to take a different path to modify these colors depending on focused state. Let me show you a way you can achieve this result.

At this time, MAUI XAML doesn't have an IsFocused property that you can bind to for setting up a DataTrigger or VisualStateManager usage (even though both options are currently broken in MAUI - see #5380 and #5449).

However, you can still achieve the same result using the Focused and Unfocused event. This should provide you with a suitable option until MAUI is more stable and has alternative solution under any circumstance.

Here's an example:

<telerik:RadButton Text="RadButton"  Focused="RadButton_Focused" Unfocused="RadButton_Unfocused"/>

private void RadButton_Focused(object sender, FocusEventArgs e)
{
    if(sender is RadButton btn)
    {
        btn.BackgroundColor = Colors.Green;
        btn.BorderColor = Colors.DarkGreen;
        btn.BorderThickness = new Thickness(1);
    }
}

private void RadButton_Unfocused(object sender, FocusEventArgs e)
{
    if (sender is RadButton btn)
    {
        btn.BackgroundColor = Colors.Red;
        btn.BorderColor = Colors.Transparent;
        btn.BorderThickness = new Thickness(0);
    }
}

Here is the result at runtime:

Unfocused:

Focused:

Regards,
Lance | Manager Technical Support
Progress Telerik