Windows 10 UWP

XAML Line Element

A quick article explaining how to use the <Line> XAML element. It’s something that bugged me and took longer than it should have.

I wanted to draw a simple horizontal line. It’s only when I read the Microsoft documentation that I realised a few key points.

  • You must specify a StrokeThickness.
  • You must specify a Stroke (i.e. White). Don’t bother with Fill
  • Width and Height specify the space your line is in
  • The coordinates (X1, X2, Y1, Y2) define the detail of your line within the space

If you want a simple horizontal line in red, you can do this:

<Line Stroke="Red" StrokeThickness="3" X2="200" />

And here’s an example of a more complicated line, more akin to the slash / character:

<Line Width="100" Height="100" X1="10" X2="90" Y1="90" StrokeThickness="3" Stroke="Red" />

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s