C# WPF - Creating Custom Control. Not sure how to align Text Correctly

Question

I'm trying to create a custom control; similar, say to a Compass, so it is circular. I have a compass face image, and an arrow image that I can rotate to point the right direction. The problem is that I have N,S,E,W markers that I want to update at times and thus made them labels. I divided the field up into percentages and put the labels in the right grid locations.

This all looks great.

BUT when I use this custom control on various pages, some work and some don't. What it comes down to is the size of the cell of the grid on the new page. In one case the grid width is 4x the grid height. The background image grows to fill the height; this is right. The West and East TextBlocks are way off of the Compass_Face image because the 1/4th the width of the cell is way to the left. I thought that they would be constrained to the size of the custom control but that appears to not be the problem.

I'm sure that there has to be a way to keep the text constrained to the compass_face image. Thoughts?

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="25*"/>
        <ColumnDefinition Width="50*"/>
        <ColumnDefinition Width="25*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="25*"/>
        <RowDefinition Height="50*"/>
        <RowDefinition Height="25*"/>
    </Grid.RowDefinitions>
    <Image x:Name="imageBackground" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="3" Source="Resources/compass_face.png"/>
    <Image x:Name="imageArrow" Grid.Column="1" Grid.Row="1" Source="Resources/arrow.png"/>
    <TextBlock x:Name="labelNorth" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="N"/>
    <TextBlock x:Name="labelSouth" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="S"/>
    <TextBlock x:Name="labelEast" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="E"/>
    <TextBlock x:Name="labelWest" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="W"/>
</Grid>

Answer 1

Grid isn't really the best layout to use in this case, but you can force it to be square by putting a Viewbox around it and assigning your parent grid to a specific size. That will keep your text aligned properly:

<Viewbox>
    <Grid Width="200" Height="200">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="25*"/>
            <ColumnDefinition Width="50*"/>
            <ColumnDefinition Width="25*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="25*"/>
            <RowDefinition Height="50*"/>
            <RowDefinition Height="25*"/>
        </Grid.RowDefinitions>

        <!--<Image x:Name="imageBackground" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="3" Source="Resources/compass_face.png"/>
        <Image x:Name="imageArrow" Grid.Column="1" Grid.Row="1" Source="Resources/arrow.png"/>-->
        <Ellipse Fill="CornflowerBlue" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="3" />
        <TextBlock Grid.Column="1" Grid.Row="1" Text="&#x2191;" FontSize="200" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />

        <TextBlock x:Name="labelNorth" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="N"/>
        <TextBlock x:Name="labelSouth" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="S"/>
        <TextBlock x:Name="labelEast" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="E"/>
        <TextBlock x:Name="labelWest" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="W"/>
    </Grid>
</Viewbox>