How to remove border color of custom button when selected by pressing tab in MAUI UWP?

Question

How to remove border color of custom button when selected by pressing tab in MAUI UWP?

Lohith K K 120

I have a number of buttons(to achieve the requirement of two corner radius I have added button inside the border) in a page. When I start pressing tab the buttons are highlighted with black border.

Help me to remove that border color.

Below is button in normal state:

Below is when I press tab it jumps from entry to button selection:

User's image

Anonymous

2023-06-12T06:45:48.82+00:00

Could you share code about your button and the border?

Do you want to remove the Button's border for windows platform?

Lohith K K 120

Below is the style setter for the button

<ContentPage.Resources>
        <Style TargetType="Button">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Transparent"/>
                                <Setter Property="TextColor" Value="#235D9F"/>
                                <Setter TargetName="openprojbtn" Property="Border.StrokeShape">
                                    <Setter.Value>
                                        <RoundRectangle CornerRadius="4,0,0,4" />
                                    </Setter.Value>
                                </Setter>
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Transparent"/>
                                <Setter Property="TextColor" Value="#999CA0"/>
                                <Setter TargetName="openprojbtn" Property="Border.StrokeShape">
                                    <Setter.Value>
                                        <RoundRectangle CornerRadius="4,0,0,4" />
                                    </Setter.Value>
                                </Setter>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>

button element

<Border x:Name="openprojbtn" HeightRequest="40" WidthRequest="180" StrokeThickness="1.5" Stroke="#235D9F" BackgroundColor="White" Margin="0,0,25,0">
   <Button BorderColor="Transparent" HeightRequest="38" WidthRequest="178" HorizontalOptions="Center" VerticalOptions="Center" TextColor="#235D9F" Text="Open Project" FontSize="14" Margin="0,-3,0,0" FontFamily="Roboto" CornerRadius="8" Clicked="Button_Clicked"
                                               />
                                        </Border>

I want to remove the border when I select the button by pressing tab key

Answer accepted by question author

1 additional answer

Your answer

Anonymous

2023-06-12T06:45:48.82+00:00

Could you share code about your button and the border?

Do you want to remove the Button's border for windows platform?
Lohith K K 120 Reputation points

2023-06-12T08:44:43.8633333+00:00

Below is the style setter for the button

<ContentPage.Resources> <Style TargetType="Button"> <Setter Property="VisualStateManager.VisualStateGroups"> <VisualStateGroupList> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"> <VisualState.Setters> <Setter Property="BackgroundColor" Value="Transparent"/> <Setter Property="TextColor" Value="#235D9F"/> <Setter TargetName="openprojbtn" Property="Border.StrokeShape"> <Setter.Value> <RoundRectangle CornerRadius="4,0,0,4" /> </Setter.Value> </Setter> </VisualState.Setters> </VisualState> <VisualState x:Name="Disabled"> <VisualState.Setters> <Setter Property="BackgroundColor" Value="Transparent"/> <Setter Property="TextColor" Value="#999CA0"/> <Setter TargetName="openprojbtn" Property="Border.StrokeShape"> <Setter.Value> <RoundRectangle CornerRadius="4,0,0,4" /> </Setter.Value> </Setter> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateGroupList> </Setter> </Style> </ContentPage.Resources>

button element

<Border x:Name="openprojbtn" HeightRequest="40" WidthRequest="180" StrokeThickness="1.5" Stroke="#235D9F" BackgroundColor="White" Margin="0,0,25,0"> <Button BorderColor="Transparent" HeightRequest="38" WidthRequest="178" HorizontalOptions="Center" VerticalOptions="Center" TextColor="#235D9F" Text="Open Project" FontSize="14" Margin="0,-3,0,0" FontFamily="Roboto" CornerRadius="8" Clicked="Button_Clicked" /> </Border>

I want to remove the border when I select the button by pressing tab key

Answer 1

Hello,

I want to remove the border when I select the button by pressing tab key

Please open the app.xaml file in the Platforms/Windows/Windows/ folder.

Then add following styles of <maui:MauiWinUIApplication.Resources> in the <maui:MauiWinUIApplication> tag. Set UseSystemFocusVisuals to false, then this border will be removed.

<maui:MauiWinUIApplication
    x:Class="MauiButtonBorder.WinUI.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:maui="using:Microsoft.Maui"
    xmlns:local="using:MauiButtonBorder.WinUI">

<!--Add following resources-->

    <maui:MauiWinUIApplication.Resources>
        <Style TargetType="Button">
            <Setter Property="UseSystemFocusVisuals" Value="False"/>
        </Style>
    </maui:MauiWinUIApplication.Resources>


</maui:MauiWinUIApplication>

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Lohith K K 120 Reputation points

2023-06-12T09:14:54.52+00:00

Awesome, working fine

Answer 2

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

1 deleted comment

Comments have been turned off. Learn more

Share via

How to remove border color of custom button when selected by pressing tab in MAUI UWP?

1 additional answer

Your answer