In pure XAML, is it possible to get a Line to align to part of a Grid?

Question

Is it possible to create a Line in XAML (without any C# code behind) to align a line inside of a layout container such as a Grid?

I'd like to effectively have:

<Grid>
    <Line StrokeThickness="1" 
          HorizontalAlignment="Stretch" 
          VerticalAlignment="Bottom" 
          Stroke="Red"/>
</Grid>

I need to use StrokeDashArray and StrokeDashOffset, otherwise I would just use a Border control with the BorderThickness set to "0,0,0,1"...

Thanks for any ideas!

Gabe · Accepted Answer · 2010-03-12T06:35:00.117

10

To elaborate on kanchirk's response, this works for me:

<Path StrokeThickness="1"
 HorizontalAlignment="Stretch"  
 VerticalAlignment="Bottom"
 Data="M0,0 L1,0"
 Stretch="Fill"
 StrokeEndLineCap="Square"
 StrokeStartLineCap="Square"
 Stroke="Red"/>

You can also the same thing with a Line:

<Line StrokeThickness="1" 
 HorizontalAlignment="Stretch"   
 VerticalAlignment="Bottom" 
 X2="1" 
 Stretch="Fill" 
 StrokeEndLineCap="Square" 
 StrokeStartLineCap="Square" 
 Stroke="Red"/>

edited Mar 12 '10 at 06:35

answered Mar 12 '10 at 05:41

Gabe

84,912
12
139
238

1

Thanks - it's pretty good, and does answer my question as phrased. Marking as answered. However, I really want to use this to mimic fancy underlining for a text block, so I don't want it to stretch larger than it needs to to fill the container. – Jeff Wilcox Mar 12 '10 at 05:50
Are you saying it will become wider than its container? Perhaps you should create a more specific question (and link to it from here) if this won't actually work for you. – Gabe Mar 12 '10 at 05:56
@Gabe The problem is that `Stretch=Fill` makes it harder if not impossible to use `StrokeDashArray` and related properties to create a dotted/dashed line, since it will "stretch" instead of "tile" the dots/dashes. – Livven Oct 04 '14 at 13:22

score 1 · Answer 2 · answered Mar 12 '10 at 05:18

I think you need to use Path like this

<Grid x:Name="LayoutRoot" Background="White">

<Path Fill="Red" Stretch="Fill" Stroke="Black" StrokeDashArray="1" Height="4" Margin="8,0,7,7" VerticalAlignment="Bottom" UseLayoutRounding="False" Data="M8,127 L457,127" StrokeThickness="13"/>

</Grid>

Hope this Helps. Expression Blend is a must have for this kind of Challenges or even VS 2010 RC1 (For now)

Gongdo · Answer 3 · 2010-03-12T06:21:29.153

1

How about this?

<Line x:Name="line" 
StrokeThickness="1"  
HorizontalAlignment="Stretch"  
VerticalAlignment="Bottom"  
Stroke="Red" 
X2="{Binding ActualWidth, ElementName=line, Mode=OneWay}"
Stretch="Fill" 
StrokeStartLineCap="Square"
StrokeEndLineCap="Square"/>

edited Mar 12 '10 at 06:21

answered Mar 12 '10 at 05:27

Gongdo

11
2

Binding is interesting, thanks. For performance reasons though I'm weary to use it. – Jeff Wilcox Mar 12 '10 at 05:45
@gabe, you right. I missed Stretch, StrokeStartLineCap and StrokeEndLineCap. Now it'll be fine. Anyway, Your solution is better for all. :D – Gongdo Mar 12 '10 at 06:25
As far as I can tell, this is the only answer that actually satisfies the original question's requirement of being able to use `StrokeDashArray` and related properties to create a dotted/dashed line. Just one issue: binding directly to `ActualWidth` may not work as expected since it does not notify on update in Silverlight and WinRT. However there are ways to work around that as detailed in the [answers to this question](http://stackoverflow.com/questions/1602148/binding-to-actualwidth-does-not-work). Also, `Strech="Fill"` is unnecessary and can be removed. – Livven Oct 04 '14 at 13:41

In pure XAML, is it possible to get a Line to align to part of a Grid?

3 Answers3