How to draw a line without explicitly specifying its coordinates

Hi,

I would like to draw horizontal dashed lines between elements in a
vertical StackPanel, letting the StackPanel layout the lines
appropriately (i.e. determine their width). I can easily draw a solid
line using a Rectangle shape like so:

<StackPanel>
<Button>Foo</Button>
<Rectangle Stroke="Red" StrokeThickness="2" />
<Button>Foo</Button>
<Rectangle Stroke="Red" StrokeThickness="2" />
<Button>Foo</Button>
</StackPanel>

But if I specify a StrokeDashArray to those "flat" rectangles, the dash
effect is't visible and the lines are still drawn solid:

<StackPanel>
<Button>toto</Button>
<Rectangle Stroke="Red" StrokeThickness="2" StrokeDashArray="2" />
<Button>toto</Button>
<Rectangle Stroke="Red" StrokeThickness="2" StrokeDashArray="2" />
<Button>toto</Button>
</StackPanel>

If I specify a height to those rectangles, I can see the StrokeDashArray
in action.

Ideally, I'd like to use a Line shape for this purpose, but the problem
is that Lines seem to require explicit start/end point coordinates
(X1,Y1 and X2,Y2) to draw anything. This prevents me from letting the
StackPanel determine their width automatically...


I feel this should be easy to achieve and that I am missing something
obvious, but I just can't figure out what...

Thanks!

Pascal

You can try to create a custom control:
- it will contain just the line as a child
- override Measure/Arrange to position the line
--
Valentin Iliescu [MVP C#]


"Pascal Bourque" wrote:

> Hi,
>
> I would like to draw horizontal dashed lines between elements in a
> vertical StackPanel, letting the StackPanel layout the lines
> appropriately (i.e. determine their width). I can easily draw a solid
> line using a Rectangle shape like so:
>
> <StackPanel>
> <Button>Foo</Button>
> <Rectangle Stroke="Red" StrokeThickness="2" />
> <Button>Foo</Button>
> <Rectangle Stroke="Red" StrokeThickness="2" />
> <Button>Foo</Button>
> </StackPanel>
>
> But if I specify a StrokeDashArray to those "flat" rectangles, the dash
> effect is't visible and the lines are still drawn solid:
>
> <StackPanel>
> <Button>toto</Button>
> <Rectangle Stroke="Red" StrokeThickness="2" StrokeDashArray="2" />
> <Button>toto</Button>
> <Rectangle Stroke="Red" StrokeThickness="2" StrokeDashArray="2" />
> <Button>toto</Button>
> </StackPanel>
>
> If I specify a height to those rectangles, I can see the StrokeDashArray
> in action.
>
> Ideally, I'd like to use a Line shape for this purpose, but the problem
> is that Lines seem to require explicit start/end point coordinates
> (X1,Y1 and X2,Y2) to draw anything. This prevents me from letting the
> StackPanel determine their width automatically...
>
>
> I feel this should be easy to achieve and that I am missing something
> obvious, but I just can't figure out what...
>
> Thanks!
>
> Pascal
>

Perhaps using the Path Element will work - it's a tad more complicated, but
it also has a few more features.

<Path Data="M0,0 1,0" Stroke="Red" StrokeThickness="2" Height="2"
Stretch="Fill"/>

In this case, the Path in a vacuum (or, say, in a Canvas) will just be a
line from 0,0 to 1,0. However, setting Stretch to Fill means that we will
stretch the underlying geometry (before applying the Stroke) to fill the
layout space reserved.

-Adam Smith [MS]

"viliescu" <viliescu@discussions.microsoft.com> wrote in message
news:02EE361F-1889-4812-9A4F-E2A4C4119307@microsoft.com...
> You can try to create a custom control:
> - it will contain just the line as a child
> - override Measure/Arrange to position the line
> --
> Valentin Iliescu [MVP C#]
>
>
> "Pascal Bourque" wrote:
>
>> Hi,
>>
>> I would like to draw horizontal dashed lines between elements in a
>> vertical StackPanel, letting the StackPanel layout the lines
>> appropriately (i.e. determine their width). I can easily draw a solid
>> line using a Rectangle shape like so:
>>
>> <StackPanel>
>> <Button>Foo</Button>
>> <Rectangle Stroke="Red" StrokeThickness="2" />
>> <Button>Foo</Button>
>> <Rectangle Stroke="Red" StrokeThickness="2" />
>> <Button>Foo</Button>
>> </StackPanel>
>>
>> But if I specify a StrokeDashArray to those "flat" rectangles, the dash
>> effect is't visible and the lines are still drawn solid:
>>
>> <StackPanel>
>> <Button>toto</Button>
>> <Rectangle Stroke="Red" StrokeThickness="2" StrokeDashArray="2" />
>> <Button>toto</Button>
>> <Rectangle Stroke="Red" StrokeThickness="2" StrokeDashArray="2" />
>> <Button>toto</Button>
>> </StackPanel>
>>
>> If I specify a height to those rectangles, I can see the StrokeDashArray
>> in action.
>>
>> Ideally, I'd like to use a Line shape for this purpose, but the problem
>> is that Lines seem to require explicit start/end point coordinates
>> (X1,Y1 and X2,Y2) to draw anything. This prevents me from letting the
>> StackPanel determine their width automatically...
>>
>>
>> I feel this should be easy to achieve and that I am missing something
>> obvious, but I just can't figure out what...
>>
>> Thanks!
>>
>> Pascal
>>

I did not try with the Path, but your suggestion led me to try this:

<Line X1="0"
Y1="0"
X2="1"
Y2="0"
Stroke="Red"
StrokeDashArray="2"
Stretch="Fill" />

And it works!

The key is to use 0,0-1,0 as coordinates for the Line, and specify
Stretch=Fill.

Thanks a lot!

Pascal

Adam Smith [MS] wrote:
> Perhaps using the Path Element will work - it's a tad more complicated, but
> it also has a few more features.
>
> <Path Data="M0,0 1,0" Stroke="Red" StrokeThickness="2" Height="2"
> Stretch="Fill"/>
>
> In this case, the Path in a vacuum (or, say, in a Canvas) will just be a
> line from 0,0 to 1,0. However, setting Stretch to Fill means that we will
> stretch the underlying geometry (before applying the Stroke) to fill the
> layout space reserved.
>
> -Adam Smith [MS]

Oh, yeah, that's even simpler - forgot that Line did that too.

Happy to help,
-Adam Smith [MS]

"Pascal Bourque" <bourquep@xceedsoft.com> wrote in message
news:%23o7QX3CKGHA.4020@TK2MSFTNGP10.phx.gbl...
>I did not try with the Path, but your suggestion led me to try this:
>
> <Line X1="0"
> Y1="0"
> X2="1"
> Y2="0"
> Stroke="Red"
> StrokeDashArray="2"
> Stretch="Fill" />
>
> And it works!
>
> The key is to use 0,0-1,0 as coordinates for the Line, and specify
> Stretch=Fill.
>
> Thanks a lot!
>
> Pascal
>
> Adam Smith [MS] wrote:
>> Perhaps using the Path Element will work - it's a tad more complicated,
>> but it also has a few more features.
>>
>> <Path Data="M0,0 1,0" Stroke="Red" StrokeThickness="2" Height="2"
>> Stretch="Fill"/>
>>
>> In this case, the Path in a vacuum (or, say, in a Canvas) will just be a
>> line from 0,0 to 1,0. However, setting Stretch to Fill means that we
>> will stretch the underlying geometry (before applying the Stroke) to fill
>> the layout space reserved.
>>
>> -Adam Smith [MS]