Introduction

You can draw a solid-color triangle in pure XAML without any code-behind by using a shape element and defining three points. In WPF, the simplest tool for this is Polygon, which fills the area enclosed by the points you provide.

Use Polygon for the Straightforward Case

The simplest triangle is:

1<Grid Width="120" Height="120">
2    <Polygon
3        Points="60,0 0,100 120,100"
4        Fill="SteelBlue" />
5</Grid>

That produces a filled triangle with no outline. The Points attribute lists the vertices in order as x,y coordinate pairs.

Because there are exactly three points, the polygon is a triangle. The Fill brush paints the interior.

Add an Outline if Needed

If you want a border around the triangle, add Stroke and StrokeThickness:

1<Grid Width="120" Height="120">
2    <Polygon
3        Points="60,0 0,100 120,100"
4        Fill="OrangeRed"
5        Stroke="Black"
6        StrokeThickness="2" />
7</Grid>

This is still XAML-only. No code is required unless you want to change the shape dynamically at runtime.

Understand the Coordinate System

WPF uses a top-left origin for layout coordinates:

• larger x moves right
• larger y moves down

So in the earlier example:

• '60,0 is the top vertex'
• '0,100 is the bottom-left vertex'
• '120,100 is the bottom-right vertex'

Changing those coordinates changes the triangle shape immediately. For example, a right-pointing triangle could be written like this:

1<Grid Width="120" Height="120">
2    <Polygon
3        Points="0,0 120,60 0,120"
4        Fill="MediumSeaGreen" />
5</Grid>

That is useful for arrow icons, expand/collapse markers, and directional indicators.

Path Is an Alternative

Polygon is usually easier for simple triangles, but you can also use a Path:

1<Grid Width="120" Height="120">
2    <Path
3        Fill="DodgerBlue"
4        Data="M 60,0 L 0,100 L 120,100 Z" />
5</Grid>

This does the same job with path geometry commands:

• 'M means move to the first point'
• 'L means draw a line'
• 'Z closes the figure'

Path becomes more useful when the shape is part of a larger vector drawing. For a simple triangle, Polygon is usually easier to read.

Keep Sizing and Stretching in Mind

A common surprise is that hard-coded points define the triangle in a specific coordinate space. If the container changes size, the triangle may not scale the way you expect unless you design for that.

For many fixed icons and decorations, hard-coded points are perfectly fine. If you need the shape to scale fluidly with the layout, a Viewbox can help:

1<Viewbox Width="60" Height="60">
2    <Canvas Width="120" Height="120">
3        <Polygon Points="60,0 0,100 120,100" Fill="SlateBlue" />
4    </Canvas>
5</Viewbox>

This preserves the triangle proportions while letting the rendered size change.

Common Pitfalls

The biggest mistake is providing points in the wrong order or with the wrong coordinates and then assuming the fill is broken. The triangle is only as correct as the points you define.

Another common issue is forgetting that WPF coordinates grow downward on the y axis. If you think in traditional math coordinates, the triangle may appear upside down from what you expected.

It is also easy to reach for code-behind when XAML alone is enough. For a static solid triangle, Polygon with a Fill brush is all you need.

Summary

• In WPF XAML, Polygon is the simplest way to draw a solid-color triangle.
• A triangle is just a polygon with three points.
• Use Fill for the solid interior and Stroke if you want an outline.
• 'Path is a valid alternative when the triangle is part of a more complex vector shape.'
• Pay attention to coordinates and sizing so the triangle appears in the intended direction and scale.