Center a polygon within a Grid control

Question

Hello,

Can anyone tell me how to center a polygon object within a given row/column of a Grid control?

The example that I have tried is taken from msdn.

<Grid x:Name="LayoutRoot" >
  <Polygon Points="300,200 400,125 400,275 300,200" 
           Stroke="Purple" 
           StrokeThickness="2"
           HorizontalAlignment="Center"
           VerticalAlignment="Center" >
    <Polygon.Fill>
        <SolidColorBrush Color="Blue" Opacity="0.4" />
    </Polygon.Fill>
 </Polygon>

Cheers,

Xam

Answer 1

Add the attributes :-

 HorizontalAlignment="Center" VerticalAlignment="Center"

to the Polygon.

Answer 2

Although a height and width are implied by the bounds of the polygon, it defaults to the size of the container.

If you just set

HorizontalAlignment="Center" VerticalAlignment="Center"

it will position the polygon's top-left in the centre.

You also have to explicitly set the height and width of the polygon to centre it and retain its bounds

Sample polygon Xaml with dimensions added:

<Grid x:Name="LayoutRoot">
   <Path Data="M0.5,41.5 L201,0.5 L302,115 L157.25,157 z" Fill="#FFF4F4F5" Stroke="Black" UseLayoutRounding="False" HorizontalAlignment="Center" VerticalAlignment="Center" Width="302.5" Height="157.5"/>
</Grid>