2

I'm trying to create a line that looks like this in wpf.

Does anyone have any idea how to do this? I need to bind the x and y coordinates, so a line works really well except I can't make it look like this.

Line with outline and fill

Nazim Kerimbekov
  • 4,712
  • 8
  • 34
  • 58
DTig
  • 1,044
  • 11
  • 13

3 Answers3

6

You can't do this with a simple line, but with a Border object it is very easy.

<Border Width="100" Height="10" Background="#FFFFDAAD" BorderBrush="Orange" BorderThickness="0,3"/>
Stewbob
  • 16,759
  • 9
  • 63
  • 107
  • Yes, it looks like I can get the look I'm after but I really need to bind to x1,x2,y1,y2 like on the line. – DTig Mar 10 '12 at 19:42
  • You can bind x1 to Canvas.Left and y1 to Canvas.Top of the border. For x2 and y2, you would need to implement a ValueConverter to change x1,x2 into Width and y1,y2 into Height. – Stewbob Mar 12 '12 at 18:23
2

You can overlay multiple Lines, Polylines or Polygons to achieve similar effects and use resources to avoid duplication, for example (just inspiration):

<Canvas ClipToBounds="True" Height="200" Width="200">
    <Canvas.Resources>
        <PointCollection x:Key="Wings">0,-2 62,-2 62,22 58,22 58,2 0,2</PointCollection>
    </Canvas.Resources>
    <Polygon Points="{StaticResource Wings}" Fill="Black" Stroke="White" StrokeThickness="4"/>
    <Polygon Points="{StaticResource Wings}" StrokeThickness="8" Stroke="White"/>
    <Polygon Points="{StaticResource Wings}" StrokeThickness="4" Stroke="Red"/>
</Canvas>
kwesolowski
  • 695
  • 8
  • 18
1

I have best solution, make for "outline" line StrokeThickness more than "simple" line:

      <Line x:Name="borderLine" X1="0" X2="400" Y1="0" Y2="0" StrokeThickness="1" Stroke="White"/>
      <Line x:Name="borderOutlineLine" X1="0" X2="400" Y1="0" Y2="0" StrokeThickness="0.3" Stroke="Black"/>
Олег Ладыко
  • 112
  • 4