Simple (I think) Horizontal Line in WPF?

Question

Creating a relatively simple data entry form, and just want to separate certain sections with a horizontal line (not unlike an HR tag in HTML) that stretches the full length of the form.

I have tried this:

<Line Stretch="Fill" Stroke="Black" X2="1"/>

Because the parent control is not a fixed width, this line causes the window to stretch to the full width of the screen.

Is there an easy way to do this without fixing the width of my parent control/window?

The answer is [here][1]. I prefer the answer of mletterle. [1]: http://stackoverflow.com/questions/4011571/a-vertical-seperator-control-in-a-menu-toolbar-stackpanel-etc-is-it-possib — Stacked, Sep 18 '13 at 12:47

score 609 · Accepted Answer · answered Feb 22 '10 at 23:22

609

How about add this to your xaml:

<Separator/>

answered Feb 22 '10 at 23:22

Adel Hazzah

8,737
2
20
16

11

brilliant solution and one tag! – Jan 21 '13 at 11:50
9

I don't understand how this is a solution. I add a separator and I don't see any line. What configuration is necessary when placing the separator within a standard layout panel such as a Grid to get it to show up like a horizontal rule? – jpierson Mar 20 '13 at 03:27
I agree, it appears that this does not work for some controls – Justin Pihony Apr 11 '13 at 03:27
1

I added a height and background color to the separator when it did not show. – ΩmegaMan May 17 '13 at 19:34
15

@jpierson If you add it to a grid, you probably need to assign it to a row and column like any other control. Otherwise it will probably appear in the first row/col, and you will miss it. (It works properly on a StackPanel.) – ANeves Oct 28 '13 at 16:22
that's correct, need to assign the row/column, or probably column span. – liang Aug 03 '15 at 08:04
10

Please note that `` will be read-out-loud by screen readers. If `` is used to actually separate groups of items in the UI, this is a perfect solution. Where the use of line has purely aesthetical reasons, I'd suggest using `` or `` instead. – Simon Rozman Jan 19 '18 at 13:55
This was not available for me in UWP. – Rubens Jan 03 '20 at 00:20
2

This is not available in a .Net Core 3.1 wpf app. – ΩmegaMan Jan 23 '20 at 22:10
I'd downvote this to a 0 becuase the op asks for WPF horizontal lines: & a seperator is vertical – JRrelyea Nov 27 '22 at 21:50
@JRrelyea, my separator came exactly horizontal. – Daniel Möller Dec 06 '22 at 19:55

score 89 · Answer 2 · answered Aug 30 '12 at 10:08

89

I had the same issue and eventually chose to use a Rectangle element:

<Rectangle HorizontalAlignment="Stretch" Fill="Blue" Height="4"/>

In my opinion it's somewhat easier to modify/shape than a separator. Of course the Separator is a very easy and neat solution for simple separations :)

answered Aug 30 '12 at 10:08

Deruijter

2,077
16
27

2

Works in Silverlight 5 whereas `Seperator` does not. – ΩmegaMan Sep 29 '14 at 14:19

score 17 · Answer 3 · answered Feb 22 '10 at 23:08

17

Use a Border of height 1 and don't set the Width (i.e. Width = Auto, HorizontalAlignment = Stretch, the default)

answered Feb 22 '10 at 23:08

Ana Betts

73,868
16
141
209

3

It's handy for vertical separators anyway: `` – Qwertie Nov 29 '12 at 20:04
Personally, my favourite solution – johnc Sep 07 '22 at 06:03

P_Fitz · Answer 4 · 2020-09-14T13:42:00.293

15

For anyone else struggling with this: Qwertie's comment worked well for me.

<Border Width="1" Margin="2" Background="#8888"/>

This creates a vertical seperator which you can talior to suit your needs.

edited Sep 14 '20 at 13:42

answered Feb 10 '15 at 10:46

P_Fitz

819
9
16

shaiju mathew · Answer 5 · 2017-02-08T06:00:53.323

To draw Horizontal 
************************    
<Rectangle  HorizontalAlignment="Stretch"  VerticalAlignment="Center" Fill="DarkCyan" Height="4"/>

To draw vertical 
*******************
 <Rectangle  HorizontalAlignment="Stretch" VerticalAlignment="Center" Fill="DarkCyan" Height="4" Width="Auto" >
        <Rectangle.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform Angle="90"/>
                <TranslateTransform/>
            </TransformGroup>
        </Rectangle.RenderTransform>
    </Rectangle>

score 0 · Answer 6 · answered Nov 27 '22 at 21:48

1st, the op asked for a horizontal line. seperators are vertical (not sure how that got so many up votes---they're not horizontal)

Play around using a simple line tag

<Line
Grid.Row="4"
HorizontalAlignment="Center"
StrokeThickness="1"
X1="0"
X2="300"
Y1="10"
Y2="10" />

That's a horizontal line. Play around with the X & Y axis to make it work...simple enough to make a horizontal, vertical or any other angled line segment that doesn't resize a window

Simple (I think) Horizontal Line in WPF?

6 Answers6

Linked

Related