WPF UserControl DrawLine C#

Question

4.80/5 (5 votes)

See more:

Hello,

I created a class :

C#

public class ShahinTextBox : System.Windows.Controls.TextBox
    {
...

I want to draw a line below the text box after focusing on this control.

C#

protected override void OnGotFocus(RoutedEventArgs e)
{
DrawingVisual drawingVisual = new DrawingVisual();
DrawingContext drawingContext = drawingVisual.RenderOpen();
Pen pen = new Pen(Brushes.Red ,1);
drawingContext.DrawLine(pen, new Point(0, this.Height), new Point(this.Width, this.Height));
}

No Error, But it doesn't work. I need your help !

Posted 11-Jun-11 22:26pm

Shahin Khorshidnia

Updated 11-Jun-11 23:32pm

v2

Add a Solution

2 solutions

Solution 2

Why don't you use the Style for the TextBox

put the below code to App.xaml (Application Resource) file.

<Application.Resources>
        <Style TargetType="TextBox" x:Key="txtStyle">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TextBox">
                        <Border Name="TextBorder" Margin="2" Height="30" Background="{TemplateBinding Background}"
                                BorderBrush="Aqua" BorderThickness="1">
                            <ScrollViewer x:Name="PART_ContentHost" Focusable="True" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True">
                                <Setter TargetName="TextBorder" Property="BorderBrush" Value="Aqua"/>
                                <Setter TargetName="TextBorder" Property="BorderThickness" Value="1,1,1,5"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>

Now we can use this style like

<TextBox Name="txtNameTest" Width="200" Style="{StaticResource txtStyle}" ></TextBox>

This piece of code will add a AQUA line below the TextBox when the focus will come to it.

Update by Tarun:

I have updated the ControlTemplate.Triggers part:

XML

<ControlTemplate.Triggers>
    <Trigger Property="IsFocused" Value="True">
        <Setter TargetName="TextBorder" Property="BorderBrush" Value="Red"/>
        <Setter TargetName="TextBorder" Property="BorderThickness" Value="0.3,0.3,0.3,1"/>
    </Trigger>
</ControlTemplate.Triggers>

Posted 12-Jun-11 1:15am

nit_singh

Updated 12-Jun-11 9:27am

v3

Comments

Tarun.K.S 12-Jun-11 8:05am

I have a doubt. What is the use of ScrollViewer inside the Border? I am definitely missing something here.

nit_singh 12-Jun-11 13:26pm

Using ScrollViewer you can use Single line textbox as multiline also with applying any other setting.

Tarun.K.S 12-Jun-11 13:35pm

Aah I knew it, but unfortunately its not working. Is it fine on your side?

nit_singh 12-Jun-11 15:18pm

Yes Tarun it is working fine on my side. Try again I modified the solution again.

Tarun.K.S 12-Jun-11 15:29pm

I have updated the Triggers part. But the problem is one cannot give a separate color(here Red) to the bottom borderthickness. Anyway I have given a small effect of border in the textbox by setting the 0.3 to other borderthicknesses.

Tarun.K.S 12-Jun-11 15:30pm

Have a 5 for the solution. :)

nit_singh 12-Jun-11 15:42pm

Yes Tarun, this is the limitation that you can't assign diff border color for the same controls.

Thanks for your 5 and your quick response...:)

Tarun.K.S 12-Jun-11 15:45pm

How about my solution?

nit_singh 12-Jun-11 16:03pm

Yes your solution is better but I think if these "CSS type effect" we can achieve by styling then what is the need to touch Codebehind.

Tarun.K.S 12-Jun-11 16:09pm

Well even I prefer to use XAML, but I wasn´t getting the required effect, so I had to use Adorner. Thank you.

Shahin Khorshidnia 12-Jun-11 9:03am

By the way: Thank you nit-singh

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tarun.K.S · Accepted Answer · 2011-06-12T00:27:00

How about using an Adorner to give the underline effect.

It goes like this:
Create a class which inherits Adorner.

C#

class AdornOnTextBox : Adorner
{
        public AdornOnTextBox(UIElement adornedElement):base(adornedElement)
        {

        }

        protected override void OnRender(System.Windows.Media.DrawingContext drawingContext)
        {
            Rect adornedElementRect = new Rect(AdornedElement.RenderSize);
            Pen pen = new Pen(Brushes.Red, 1);
            
            drawingContext.DrawLine(pen, adornedElementRect.BottomLeft, adornedElementRect.BottomRight);
        }
    }

Lets say the name of the UserControl in your WPF app is NewTextBox.

Attach an event handler for GotFocus.
Add the below in the constructor

C#

NewTextBox.GotFocus += new RoutedEventHandler(TextGotFocus);
//In case you want to remove the line if Focus is lost.
NewTextBox.LostFocus += new RoutedEventHandler(TextLostFocus);
AdornOnTextBox adornIt;
AdornerLayer textLayer;

Here are the eventhandlers:

C#

void TextGotFocus(object sender, RoutedEventArgs e)
{
    adornIt = new AdornOnTextBox(NewTextBox);
    textLayer= AdornerLayer.GetAdornerLayer(NewTextBox);
    textLayer.Add(adornIt);
}

//Removes the line if focus is lost
void TextLostFocus(object sender, RoutedEventArgs e)
        {
            textLayer.Remove(adornIt);
        }

Hope this works out. :)

WPF UserControl DrawLine C#

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

WPF UserControl DrawLine C#

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us