CODEWITHSUNDEEP
wpfxamlline
DTig
DTig

Reputation: 1084

Line with fill and stroke

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

Upvotes: 2

Views: 3749

Answers (3)

Олег Ладыко
Олег Ладыко

Reputation: 112

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"/>

Upvotes: 1

kwesolowski
kwesolowski

Reputation: 724

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>

Upvotes: 2

Stewbob
Stewbob

Reputation: 16899

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"/>

Upvotes: 6

Related Questions