views:

991

answers:

2

I need to draw some simple lines within a Border control (or similar) that always stretch to the bounds of the Border. Is there a way to stretch the lines only but not its pen? Without involving lots of C#?

In this version the lines stretch:

<Border>
   <Border.Background>
      <DrawingBrush>
         <DrawingBrush.Drawing>
            <DrawingGroup>
               <GeometryDrawing Brush="Red">
                  <GeometryDrawing.Geometry>
                     <GeometryGroup>
                        <RectangleGeometry Rect="0,0 100,1000" />
                        <LineGeometry  StartPoint="0,0" EndPoint="100,1000"/>
                        <LineGeometry  StartPoint="100,0" EndPoint="0,1000"/>
                     </GeometryGroup>
                  </GeometryDrawing.Geometry>
                  <GeometryDrawing.Pen>
                     <Pen Thickness="20" Brush="Black"/>
                  </GeometryDrawing.Pen>
               </GeometryDrawing>
            </DrawingGroup>
         </DrawingBrush.Drawing>
      </DrawingBrush>
   </Border.Background>
</Border>

The best solution I have come up with is this:

<Border>
   <Grid>
      <Path Stretch="Fill" Fill="Red" Stroke="Black" StrokeThickness="4"  Data="M0,0 L100,0 100,1000 0,1000 z" />
      <Path Stretch="Fill" Stroke="Black" StrokeThickness="4"  Data="M 0,0 L0,0 100,1000" />
      <Path Stretch="Fill" Stroke="Black" StrokeThickness="4"  Data="M 100,0 L100,0 0,1000" />
   </Grid>
</Border>

But isn't there a better solution? That doesn't involve extra Grid?

+1  A: 
Kent Boogaart
I am surpised that I have to wirte my own control for doing such a simple thing.
bitbonk
+3  A: 

Within a line, you can bind the width (or height, depending on which way you are drawing the line) to that of the parent container to achieve what you want.

    <Grid x:Name="Grid" Margin="10">
        <Border BorderBrush="Black" BorderThickness="1"  />
        <Line X1="0" X2="{Binding ElementName=Grid, Path=ActualWidth}" Y1="1" Y2="1" Stroke="Red" Margin="0,10,0,0" />
        <Line X1="0" X2="{Binding ElementName=Grid, Path=ActualWidth}" Y1="1" Y2="1" Stroke="Green" Margin="0,30,0,0" />
        <Line X1="0" X2="{Binding ElementName=Grid, Path=ActualWidth}" Y1="1" Y2="1" Stroke="Blue" Margin="0,50,0,0" />
    </Grid>

Edit: Here is another way without using binding

<Border BorderBrush="Black" BorderThickness="1" >
    <Path Stroke="Red" StrokeThickness="1" Data="M0,0 1,0Z" Stretch="Fill" />
</Border>
mdm20
Have you tried this in VS 2008 (Blend too I think)? The designer will scale such a control endlessly. It becomes larger and larger. This is because the line that is bound to the ActualWidth of the parent acutally is a little longer than the ActualWith (think LineCap etc.). This will cause the acutal with to be increased wich again will cause the line endpoint to be updated and so on.
bitbonk
It looks fine in my VS2008 designer. Looks fine when I run it also.
mdm20
It only seems to happen if omit the grid and put it directly in a user control.
bitbonk
Good point mdm20 - you can do simple stuff with Line elements. However, as soon as you want coordinates other than (0, 0) and (ActualWidth, ActualHeight) your code descends into a mess of converters and MultiBindings. Not to mention that it is less efficient at runtime.
Kent Boogaart
His question specifically asked for "simple lines"...
mdm20