How to change focus style of TextBox in WPF?

Question

So I want to change the focus-style of my TextBox in my "Style.xaml" file. I'ts not working and I don't know why. I think that it has to do with the default style of WPF.

Here's the code from my "MainWindow.xaml":

<Window x:Class="WPF_Project.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF_Project" 
        mc:Ignorable="d"
        Title="Application" Height="450" Width="800">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Wpf-Project;component/css/Style.xaml">
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <TextBox FocusVisualStyle="{DynamicResource InputFocus}" Style="{DynamicResource Input}" BorderThickness="1" BorderBrush="#000000" HorizontalAlignment="Left" Height="31" Margin="10,202,0,0" VerticalAlignment="Top" Width="120" TextAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Name="input" TextChanged="input_TextChanged"/>
        <Label HorizontalAlignment="Left" Margin="209,202,0,0" VerticalAlignment="Top" Height="31" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Name="output" Width="78" Content="Output"></Label>
    </Grid>
</Window>

Here's the code from my "Style.xaml":


<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WPF_Project.css">
    <Style x:Key="Input" TargetType="TextBox">
        <Setter Property="Background" Value="#FF7DBAEC"></Setter>
        <Setter Property="Foreground" Value="Black"></Setter>
    </Style>
    <Style x:Key="InputFocus" TargetType="TextBox">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="+3" StrokeThickness="1" Stroke="Red"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

This is how it looks like:

Thanks for your help in advance.

@Shawn Do you mean Tabbing through? If yes, I've tried it, but it just closes the program. Actually I would like it to change, if I either click on it, or if write something in it. — Gogo Dev, Dec 05 '19 at 15:39
@GogoDev it was an error. But in any case, style must be edited — Ugur, Dec 05 '19 at 16:05

Jackdaw · Answer 1 · 2019-12-05T15:58:16.390

1

Try to define style like below:

 <Style x:Key="InputFocus">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border>
                        <Rectangle Margin="3" SnapsToDevicePixels="true" Stroke="Red" StrokeThickness="1"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

And use the TAB key to set the focus.

edited Dec 05 '19 at 15:58

answered Dec 05 '19 at 15:55

Jackdaw

7,626
5
15
33

Ehm ok this actually works with tab now. But Is there a way to change focus style when I click on it? – Gogo Dev Dec 05 '19 at 15:57
1

@Gogo Dev - See the following post: [https://stackoverflow.com/questions/2204063/wpf-set-focus-when-a-button-is-clicked-no-code-behind](https://stackoverflow.com/questions/2204063/wpf-set-focus-when-a-button-is-clicked-no-code-behind). I hope this helps. – Jackdaw Dec 05 '19 at 16:00

score 1 · Accepted Answer · answered Dec 05 '19 at 16:02

I have updated your style like this:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WPF_Project.css">

    <Style x:Key="Input" TargetType="TextBox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Border
                        x:Name="border"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        SnapsToDevicePixels="True">
                        <ScrollViewer
                            x:Name="PART_ContentHost"
                            Focusable="false"
                            HorizontalScrollBarVisibility="Hidden"
                            VerticalScrollBarVisibility="Hidden" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="border" Property="Opacity" Value="0.56" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="border" Property="BorderBrush" Value="#FF7EB4EA" />
                        </Trigger>
                        <Trigger Property="IsFocused" Value="true">
                            <Setter TargetName="border" Property="BorderBrush" Value="Red" />
                            <Setter TargetName="border" Property="BorderThickness" Value="2" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

And new usage:

<Window
    x:Class="WPF_Project.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:WPF_Project"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="525"
    Height="350"
    mc:Ignorable="d">

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Wpf_Project;component/css/Style.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Grid>

        <Grid>
            <TextBox
                Name="input"
                Width="120"
                Height="31"
                Margin="10,202,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                HorizontalContentAlignment="Center"
                VerticalContentAlignment="Center"
                Style="{StaticResource Input}"
                TextAlignment="Center" />
            <Label
                Name="output"
                Width="78"
                Height="31"
                Margin="209,202,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                HorizontalContentAlignment="Center"
                VerticalContentAlignment="Center"
                Content="Output" />
            <TextBox
                x:Name="input_Copy"
                Width="120"
                Height="31"
                Margin="10,238,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                HorizontalContentAlignment="Center"
                VerticalContentAlignment="Center"
                Style="{StaticResource Input}"
                TextAlignment="Center" />
        </Grid>

    </Grid>
</Window>

Result:

How to change focus style of TextBox in WPF?

2 Answers2