2 different colored borders around TextBox

35 Views Asked by At

I want to do create static style where TextBox element will have 2 different colored borders around it. Can I achieve this? enter image description here

I already have rounded textbox with 1 border, but I'm clueless how to add another around it.

  <Style TargetType="{x:Type TextBox}" x:Key="RoundTextBox">
           
            <Style.Resources>
                <Style TargetType="{x:Type Border}">
                    <Setter Property="CornerRadius" Value="3"/>
                </Style>
            </Style.Resources>

            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                        <GradientStop Color="#FF32C17C"/>
                        <GradientStop Color="#FF01312F" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="BorderBrush" Value="#FF69FF55"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="FontWeight" Value="Medium"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="Margin" Value="20,10,0,-5"/>
        </Style>

This is my code for textbox style. Thank you for all answers :)

1

There are 1 best solutions below

0
karachai On

You can change control template of the textbox and define another border inside the border.

<Window.Resources>
    <Style TargetType="{x:Type TextBox}">
        <Setter Property="MinWidth" Value="120" />
        <Setter Property="MinHeight" Value="20" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Border
                        BorderBrush="Red"
                        BorderThickness="1"
                        CornerRadius="2">
                        <Border
                            Name="Border"
                            Background="White"
                            BorderBrush="Gray"
                            BorderThickness="1"
                            CornerRadius="2">
                            <ScrollViewer x:Name="PART_ContentHost" Margin="0" />
                        </Border>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <TextBox
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Text="Test" />
</Grid>

Here is the result!

Here is the result.

For more information about textbox styles and templates you can click here.