Question

我有四个元素在玩：一个标尺和三个文字标签。我试图水平对齐文本标签，使它们以仪表中心为中心，但我现在的产品看起来像这样：

该块的xaml如下：

<Grid Margin="0 283 0 0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="83*"/>
                    <ColumnDefinition Width="149*"/>
                </Grid.ColumnDefinitions>
                <lvc:Gauge x:Name="FreeSpaceGauge" Height="85" 
                   Uses360Mode="True"
                   From="0" To="100" Foreground="White"
                   HighFontSize="60" 
                   InnerRadius="70" GaugeActiveFill="{DynamicResource PrimaryHueMidBrush}" Margin="-3,-31,3,33" Grid.ColumnSpan="2">
                    <lvc:Gauge.GaugeRenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="90"></RotateTransform>
                            <ScaleTransform ScaleX="1"></ScaleTransform>
                        </TransformGroup>
                    </lvc:Gauge.GaugeRenderTransform>
                </lvc:Gauge>
                <TextBlock Name="FreeSpaceText" Foreground="Gray" FontWeight="Medium" FontSize="20" Width="Auto" Margin="10,-2,65,64" Grid.Column="1" />
                <TextBlock Name="FreeSpaceText_Used" Text="USED" Foreground="Gray" FontWeight="Thin" FontSize="15" Width="Auto" Margin="12,24,63,38" Grid.Column="1" />
                <TextBlock Name="FreeSpaceText_Available" Foreground="Gray" FontSize="15" Width="Auto" Margin="70,84,50,-22" Grid.ColumnSpan="2" />
            </Grid>

关于如何实现所需中心对齐的任何想法？

Answer 1

使用 WPF 元素的静态定位（即使用candidate_set = [(4, 3), (6, 4), (7, 5)]）通常不是一个好选择，特别是如果您希望它们居中（水平和/或垂直），因为您需要知道与事先定位元素相关的元素的确切运行时位置和大小。此外，要么位置和大小需要保持不变（这使得未来的调整成为真正的痛苦），或者你最终设置了一堆丑陋的绑定。

当然，有时这是不可避免的，但幸运的是，通过正确组合容器（result = 3 s）和Margin以及Panel值，您可以轻松实现您的特定目标。我已经省略了与获取所需布局无关的属性，并将HorizontalAlignment控件替换为VerticalAlignment，以便此代码尽可能多地构成MCVE：

Gauge

以下是它在实践中的表现：

现在让我们分解代码。首先，我们需要两行文本 - 一个显示百分比，另一个字符串“USED”，两者都水平居中，因此我们创建了两个Ellipse的{{1}}，并将它们放在{{1}中以自上而下的顺序，以便它们垂直堆叠（<StackPanel> <Grid> <Ellipse Stroke="LightBlue" StrokeThickness="16" Width="100" Height="100" /> <StackPanel VerticalAlignment="Center"> <TextBlock Text="0%" HorizontalAlignment="Center" /> <TextBlock Text="USED" HorizontalAlignment="Center" /> </StackPanel> </Grid> <TextBlock Text="8 EB free" HorizontalAlignment="Center" /> </StackPanel>具有TextBlock属性，默认值为HorizontalAlignment="Center"）。然后，我们希望该部件显示在一个垂直居中的仪表上。因此，我们将量表和StackPanel按照从前到后的顺序放入StackPanel，并在Orientation上设置Vertical（请注意，我们没有定义任何内容）列或行）。最后，我们想要在该部分下方添加一些文字，因此我们再次将该部分和StackPanel（带Grid）放在VerticalAlignment="Center"中，然后瞧！

现在你可以通过仅修改外部StackPanel来定位整个部分 - 再次，通过设置对齐和使用正确的容器，但你也可以使用TextBlock属性。

Answer 2

Grx70已经发布了一个非常好的小解决方案。如果您想要更多地控制放置控件的方式和位置，可以使用嵌套网格更深入。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="85" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Border x:Name="FreeSpaceGauge" Height="85" Width="85" BorderBrush="Black"  BorderThickness="15" CornerRadius="50" />

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TextBlock Name="FreeSpaceText" Text="0%" Foreground="Gray" FontWeight="Medium" FontSize="20" Width="Auto" 
                   VerticalAlignment="Center" HorizontalAlignment="Center"
                   Grid.Row="1"/>
        <TextBlock Name="FreeSpaceText_Used" Text="USED" Foreground="Gray" FontWeight="Thin" FontSize="15" Width="Auto" 
                   VerticalAlignment="Center" HorizontalAlignment="Center"
                   Grid.Row="2"/>
    </Grid>

    <TextBlock Name="FreeSpaceText_Available" Text="8 EB free" Foreground="Gray" FontSize="15" Width="Auto" Grid.Row="1"
               VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>

您在安排中使用了大量不必要的边距。这使得很难安排这种控制。

如何对齐叠加元素

2 个答案: