CODEWITHSUNDEEP
wpfxamltextbox
Fᴀʀʜᴀɴ Aɴᴀᴍ
Fᴀʀʜᴀɴ Aɴᴀᴍ

Reputation: 6251

How to remove border from Textbox in WPF?

enter image description here

These borders appear when they are clicked or hovered and don't go until the focus is lost. There are borders on all four sides but since it is embedded in a shorter grid, the top and bottom ones are not visible. How to remove these borders? Please provide an example if possible.

XAML: 

<Border x:Name="SearchBorder" BorderThickness="1" HorizontalAlignment="Left" Height="40" Margin="672,34,0,0" VerticalAlignment="Top" Width="355" Background="#3F000000">
        <Border.BorderBrush>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#4C000000" Offset="0"/>
                <GradientStop Color="#3FFFFFFF" Offset="1"/>
            </LinearGradientBrush>
        </Border.BorderBrush>
        <Grid>
            <TextBox x:Name="SearchBox" HorizontalAlignment="Left" Height="40" Width="296" Margin="10,0,0,0" TextWrapping="Wrap" VerticalAlignment="Center"  SelectionBrush="Black" Background="#00000000" Foreground="#FF5B5B5B" FontSize="25" FontFamily="Segoe UI Light" BorderBrush="#00000000" CaretBrush="#FF6C6C6C"/>
            <TextBlock HorizontalAlignment="Left" Height="23" Margin="320,0,0,0" TextWrapping="Wrap" Text="&#xF002;" VerticalAlignment="Center" Width="21" FontFamily="FontAwesome" FontSize="25" Foreground="#FF919191"/>
            <Rectangle HorizontalAlignment="Left" Margin="311,-2,0,0" Width="1">
                <Rectangle.Stroke>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#3F404040" Offset="0"/>
                        <GradientStop Color="#3F686868" Offset="1"/>
                        <GradientStop Color="#59DADADA" Offset="0.502"/>
                    </LinearGradientBrush>
                </Rectangle.Stroke>
            </Rectangle>
        </Grid>
    </Border>

Upvotes: 29

Views: 51721

Answers (3)

Chandraprakash
Chandraprakash

Reputation: 946

Normal View: Set the BorderBrush property to "Transparent"

<Button Name="BtnTest"
        Content="Test"
        BorderBrush="Transparent"
        Height="20"
        Width="75"/>

Hovering View: While you are hovering the control with mouse, Include these Control Template for Button or any control like Textbox or Textblock etc.. under the Window.Resources Tag

<Window.Resources>
           <Style TargetType="Button">

                <!--Default Values-->
                <Setter Property="BorderBrush"
                        Value="Transparent"/>

                <!--Transparent Highlight-->
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Border Background="{TemplateBinding Background}">
                                <ContentPresenter HorizontalAlignment="Center" 
                                                  VerticalAlignment="Center"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

            </Style>
</Window.Resources>

Upvotes: 1

Merry
Merry

Reputation: 51

you can remove the border by just setting the BorderBrush property to Transparent.

Upvotes: 5

almulo
almulo

Reputation: 4978

Try BorderThickness="0"

<TextBox x:Name="SearchBox" BorderThickness="0" HorizontalAlignment="Left" Height="40" Width="296" Margin="10,0,0,0" TextWrapping="Wrap" VerticalAlignment="Center"  SelectionBrush="Black" Background="#00000000" Foreground="#FF5B5B5B" FontSize="25" FontFamily="Segoe UI Light" BorderBrush="#00000000" CaretBrush="#FF6C6C6C"/>

Upvotes: 73

Related Questions