C # WPF - Создание пользовательского элемента управления. Не уверен, как правильно выровнять текст

Question

Я пытаюсь создать пользовательский элемент управления; похоже, скажем, на компас, поэтому он круговой. У меня есть изображение лица компаса и изображение стрелки, которое я могу повернуть, чтобы указать правильное направление. Проблема в том, что у меня есть маркеры N, S, E, W, которые я хочу обновлять время от времени, и, таким образом, сделал их метками. Я разделил поле на проценты и разместил метки в нужных местах сетки.

Все это выглядит великолепно.

НО, когда я использую этот пользовательский элемент управления на разных страницах, некоторые работают, а некоторые нет. То, что сводится к размеру ячейки сетки на новой странице. В одном случае ширина сетки в 4 раза больше высоты сетки. Фоновое изображение увеличивается, чтобы заполнить высоту; это правильно. Текстовые блоки West и East находятся далеко от изображения Compass_Face, потому что 1/4 ширины ячейки расположена слева. Я думал, что они будут ограничены размером пользовательского элемента управления, но, похоже, это не проблема.

Я уверен, что должен быть способ сохранить текст ограниченным изображением compass_face. Мысли?

<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

Сетка на самом деле не лучший макет для использования в этом случае, но вы можете сделать так, чтобы он был квадратным, поместив вокруг него Viewbox и присвоив родительской сетке определенный размер. Это сохранит ваш текст выровненным правильно:

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