WPF doesn't draw focus the button when focused programmatically

Question

WPF doesn't draw focus the button when focused programmatically

Ivan Pizhenko 0

I am writing a WPF GUI application using .NET 6.

I have a following visual structure in my main window, but please note ScrollViewer and DockPanel inside it.

<DockPanel>
<!-- .... some more components here.... -->
            <ScrollViewer x:Name="scvApplications"
                          HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
                <DockPanel x:Name="pnlApplications" HorizontalAlignment="Left">
                </DockPanel>
            </ScrollViewer>
</DockPanel>

I want to focus a button programmatically and have custom focus style, just a simple solid black border. For custom focus style I've added following Style definition into my window XAML:

    <Window.Resources>
        <Style x:Key="AppButtonFocusStyle" TargetType="Control">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle StrokeThickness="2" Stroke="Black" SnapsToDevicePixels="true"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

I am creating each of those buttons programmatically, like this:

        _appButtonFocusStyle = (Style)FindResource("AppButtonFocusStyle");
        // ....
        var appButton = new Button()
        {
            Name = $"btn{_nextAppButtonId++}",
            Content = "some text on the button",
            Background = Brushes.Transparent,
            BorderBrush = Brushes.Transparent,
            FocusVisualStyle = _appButtonFocusStyle,
            Tag = "something"
        };
        appButton.Click += ApplicationButton_Click;
        pnlApplications.Children.Add(appButton);

Then, at some point, I'm doing

    Activate();
    firstButton.Focus();

in the code, where firstButton is a first button created. But with this, neither default, nor my custom focus border is drawn. However, when I press right arrow key, focus does move to a next button, my custom focus rectangle is correctly drawn on it. Then, when I press left arrow key, and focus moves back to the button that I've initially focused programmatically, and the custom focus rectangle is correctly removed from focused "next" button and correctly drawn on the "first" button.

From this, I make conclusion that when I've done the firstButton.Focus(), "firstButton" actually have received the focus, but for some reason focus rectangle was not drawn. Can someone please explain and advise, why is this happening and how to fix it?

3 answers

Your answer

Answer 1

Default Focus Visual Style Behavior

Focus visual styles act only when the focus action was initiated by the keyboard.

Applying styles and triggers to buttons can change the visual on the focus.

<ScrollViewer x:Name="scvApplications"
                HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
    <DockPanel x:Name="pnlApplications" HorizontalAlignment="Left">
                    
        <Button  Content="TestButton">
            <Button.Style>
                <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
                    <Style.Triggers>
                        <Trigger Property="IsFocused" Value="true">
                            <Setter Property="BorderThickness" Value="2" />
                            <Setter Property="BorderBrush" Value="Black" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>
                    
    </DockPanel>
</ScrollViewer>

Answer 2

Hi,@Ivan Pizhenko. Welcome Microsoft Q&A.

This is due to the fact that you set the style AppButtonFocusStyle to the style of the FocusVisualStyle property. This is exactly the effect of the FocusVisualStyle property.

FrameworkElement.FocusVisualStyle Property

Gets or sets a property that enables customization of appearance, effects, or other style characteristics that will apply to this element when it captures keyboard focus.

You could distinguish general styles and focus styles in styles and use them when creating buttons. You can update your code as follows:

 <Window.Resources>
      
        <Style x:Key="AppButtonFocusStyle" TargetType="Button">
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="Background" Value="green"/>

            <Style.Triggers>
                <Trigger Property="IsFocused" Value="true">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="BorderThickness" Value="4" />
                    <Setter Property="BorderBrush" Value="Black" />
                </Trigger>
            </Style.Triggers>
        </Style>

    </Window.Resources>
    <Grid>
        <DockPanel >
         
            <ScrollViewer x:Name="scvApplications"     
                          HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
                <DockPanel x:Name="pnlApplications" HorizontalAlignment="Left">
                    <Button Content="btntest" Width="100" Height="30" DockPanel.Dock="Right" Background="Red" Style="{StaticResource AppButtonFocusStyle}"  />
                </DockPanel>
            </ScrollViewer>
        </DockPanel>
    </Grid>

Codebehind:


  var appButton = new Button()
                    {
                        Name = $"btn{_nextAppButtonId++}",
                        Content = "some text on the button",
                        Background = Brushes.Transparent,
                                         Width=100,
                                         Height=40,

                        Style = (Style)FindResource("AppButtonFocusStyle"),
                        Tag = "something"
                    };
                appButton.Click += ApplicationButton_Click;
                pnlApplications.Children.Add(appButton);
                    Activate();
                    appButton.Focus();
                    appButton.UpdateLayout();

                }

The result:

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.

Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2023-10-16T06:03:44.4933333+00:00

Hi,@Ivan Pizhenko. Is there any update to the question? Did my answer solve your problem? If so, you could accept it as the answer. It's helpful for community members with related questions.
Ivan Pizhenko 0 Reputation points

2023-10-16T11:29:35.6533333+00:00

Hi, thank you for you answer, but so far I didn't have time to check it, I'm planning to dedicate some time to this issue during this week. Sorry, but please do not expect fast turnover.
Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2023-10-24T06:28:02.89+00:00

Hi,@Ivan Pizhenko. Please feel free to contact me if there are any updates.

Answer 3

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.

Comments have been turned off. Learn more

Share via

WPF doesn't draw focus the button when focused programmatically

3 answers

Your answer