C＃WPF - 创建自定义控件。不确定如何正确对齐文本

Posted 2021-04-07

我正在尝试创建一个自定义控件;类似的，对指南针说，所以它是循环的。我有一个罗盘图像和一个箭头图像，我可以旋转指向正确的方向。问题是我有N，S，E，W标记，我有时需要更新，从而使它们成为标签。我将字段分成百分比，并将标签放在正确的网格位置。

这一切看起来都很棒。

但是当我在各种页面上使用这个自定义控件时，有些工作，有些则没有。它归结为新页面上网格单元格的大小。在一种情况下，网格宽度是网格高度的4倍。背景图像增长以填充高度;这是正确的。 West和East TextBlocks远离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>

答案

在这种情况下，网格不是真正的最佳布局，但您可以通过在其周围放置一个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>