Style for a TextBox which should turn off style changes when focused

Question

I have a simple style for my textboxes:

<Style x:Key="PortalFocusVisualStyle" TargetType="TextBox">
    <!--<Setter Property="Focusable" Value="False"/>-->
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#7FFFFFFF" Offset="1"/>
                <GradientStop Color="#3FFFFFFF"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#0CFFFFFF" Offset="0"/>
                <GradientStop Color="#26FFFFFF" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

This is what all my textboxes should look like. And by the way, PasswordBoxes if possible, too, but I can also do the a new style the same way for them.

When the user clicks the textbox, the top border dissappears nearly and looks strange. For Windows 7 it seems this is default behaviour. But I don't want this, the textbox (or passwordbox) should look exactly the same now matter if it is focused or not.

So my idea was to use this style for both style and focusvisualstyle like this:

My problem is still the focused textbox does not look the same.

I tried to work with visualstates and added a template in a setter to my above style:

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox" >
                <Grid x:Name="RootElement" Background="{TemplateBinding Background}" >
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused"/>
                            <VisualState x:Name="Unfocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
               </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

But this is wrong somehow, I see an empty box only. I don't know what I need to add to the grid or if the grid is a good idea, I cannot add Visualstates to the template at all, could anybody please help me out?

Or maybe there is an easier solution? I want my textbox and passwordbox have the above style with that background and border from above, and when it is focused, it should look the same and not change the borders etc...

Thanks a lot! Eric

Answer 1

This is what you need to do:

<Style TargetType="{x:Type TextBox}">
        <Setter Property="Margin" Value="0" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#7FFFFFFF" Offset="1"/>
                    <GradientStop Color="#3FFFFFFF"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#0CFFFFFF" Offset="0"/>
                    <GradientStop Color="#26FFFFFF" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
                        <ScrollViewer Margin="0" x:Name="PART_ContentHost"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

The Scrollviewer is the actual content host for the textbox template. And the secret here is to set the FocusVisualStyle to null. This will give you a consistent look across all platforms.