如何将WPF椭圆的高度绑定到其自身宽度？

Question

我在Grid.Row和Grid.Column中画了一个椭圆。行高始终大于列宽。

我想要画一个填满网格列宽度的椭圆，其高度使其成为一个完美的圆形。

我还想在上述椭圆的正中央精确地画出一个单个数字。基本上是画了一个内部有数字居中的圆。

我可以轻松地在我的Ellipse和包含数字的TextBlock上设置HorizontalAlignment="Stretch"。这为我处理了宽度。然而，当Grid.Column的宽度改变时，如何使Ellipse和TextBlock的高度始终与其宽度匹配呢？

以下是一些XAML来说明这一点。在下面的XAML中，我希望硬编码的'63'基于Grid.Column的宽度或椭圆的Width字段：

    <Ellipse Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" Height="63" Stroke="Black" StrokeThickness="3" VerticalAlignment="Top"/>
    <TextBlock Grid.Row="1" Grid.Column="0" Width="63" Height="63" VerticalAlignment="Top" Text="1" TextAlignment="Center" FontSize="42" FontWeight="Bold"/>

感谢你的帮助。最终我使用了 Herdo 的答案，只需将 HorizontalAlignment 设置为 Stretch，然后将高度绑定到椭圆的实际宽度即可。我对椭圆和文本块都进行了相同的操作：

    <Ellipse HorizontalAlignment="Stretch" Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"/>
    <TextBlock HorizontalAlignment="Stretch" Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"/>

- Curtis

---

将椭圆和TextBlock放入一个公共的Grid中也可以解决文本居中问题。 - Clemens

Answer 1

假设您有一个包含椭圆形的Grid，您可以使用ActualWidth属性，并保持其拉伸，而不设置Width属性- 这样您就可以在没有任何对父容器的引用的情况下使用椭圆形：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/> <!-- Or whatever width -->
    </Grid.ColumnDefinitions>

    <Ellipse Grid.Column="0"
             HorizontalAlignment="Stretch"
             Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"/>
</Grid>

请参考 MSDN 上关于 ActualWidth 属性的说明：

由于 ActualWidth 是一个计算出来的值，因此您应该知道，在布局系统执行各种操作时，可能会多次或增量报告其更改。布局系统可能正在计算子元素所需的测量空间、父元素设置的限制等等。

因此，以下示例代码...

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="30"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Ellipse Grid.Row="1"
             Grid.Column="1"
             HorizontalAlignment="Stretch"
             Fill="Red"
             Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"/>
</Grid>

这将导致以下行为（每当容器 - 在这种情况下是Grid - 更改其布局时，宽度/高度都会更新）：

- Herdo

Answer 2

不需要任何绑定。在一个带有圆形EllipseGeometry和Stretch="Uniform"的路径中，放置到公共的内部网格中，然后将其放置到外部网格中即可。

<Grid>
    <Grid.ColumnDefinitions>
        ...
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        ...
    </Grid.RowDefinitions>
    <Grid Grid.Row="1" Grid.Column="0" VerticalAlignment="Top">
        <Path Stretch="Uniform" Stroke="Black" StrokeThickness="3">
            <Path.Data>
                <EllipseGeometry RadiusX="1" RadiusY="1"/>
            </Path.Data>
        </Path>
        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center"
                   FontSize="42" FontWeight="Bold" Text="1"/>
    </Grid>
</Grid>

- Clemens

Answer 3

您需要将椭圆的高度绑定到网格列的宽度，如下所示：

<Grid x:Name="MyGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="70"/>
            <ColumnDefinition Width="80"/>
        </Grid.ColumnDefinitions>

        <Ellipse Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" Height="{Binding ElementName=MyGrid, Path=ColumnDefinitions[0].Width.Value}" Stroke="Black" StrokeThickness="3" VerticalAlignment="Top"/>
    </Grid>

- Dragos Stoica

Answer 4

我已经跳过了不重要的属性

<Ellipse x:Name="El" Width="50" Height="{Binding ElementName=El,Path=ActualWidth}"/>
<TextBlock Height="{Binding ElementName=El,Path=ActualWidth}"/>

- Mikolaytis

---

这个代码可以运行，但是宽度被硬编码为“50”。我有一个椭圆和一个TextBlock在网格的一列中，该列的大小根据窗口的宽度而改变。它可能会在30-70之间波动，具体取决于用户拉伸主应用程序窗口的程度。我需要椭圆的宽度基于包含它的grid.column的宽度。 - Curtis

所以，只需移除硬编码的宽度并设置horizontalalignment = stretch。 - Mikolaytis