Does RadButton support Focused State?

[Allen]

I want to modify RadButton Focused Border Color and Text Color . Is therea anyway to modify it for now? I found it is black like below screenshot when I use tab or mouse to select button.

[Lance | Manager Technical Support]

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

[Allen]

Hey Lance,

I'm sorry for confusing. Actually my button background is black, I see your mentioned is working for me, but I just want to figure out a way to modify the default focus border, I don't want to add customize border by "BorderThickness" property, I want to use default focus border, just modify its color.  For now the default focus border color is black, can I modify it manually. 

Thanks

[Lance | Manager Technical Support]

Ah! thanks for clarifying. The focus border is coming from the MAUI framework itself. We inherit from the base Button, which is where that focused border element comes from. The RadButton doesn't have any special override for it, it uses whatever the framework is supplying.

So whatever you can get done for the Button, will also work on the RadButton. I'm afraid we don't have any styling resources for targeting MAUI Button, though I think you can get some assistance for this on StackOverflow (ask for both WinUI3 and MAUI tags), but I would also try Microsoft Q&A.

Note: If you already have a working style that is targeting typeof Button, you can make a copy of that style, but change the target to typeof telerik:RadButton.