如何将 WPF 椭圆的高度绑定到它自己的宽度？

How do I Bind a WPF Ellipse's Height to its own Width?

提问by Curtis

I have an ellipse drawn inside a Grid.Row and Grid.Column. The Row is always taller than the Column is wide.

我在 Grid.Row 和 Grid.Column 内绘制了一个椭圆。行总是比列高。

I want to draw an ellipse that fills the width of the grid column and who's height makes it a perfect circle.

我想画一个椭圆来填充网格列的宽度，谁的高度使它成为一个完美的圆。

I also want to draw a single digit number exactly in the center of the above ellipse. Basically ending up with a circle that has a number centered inside it.

我还想在上面椭圆的中心精确绘制一个数字。基本上最终得到一个圆圈，里面有一个数字。

I can easily set HorizontalAlignment="Stretch" on my Ellipse and on the TextBlock containing the number. This takes care of the width for me. However, how do I get the Height of the Ellipse and TextBlock to always match its Width, even when the Grid.Column width changes?

我可以轻松地在我的 Ellipse 和包含数字的 TextBlock 上设置 Horizo​​ntalAlignment="Stretch"。这为我照顾了宽度。但是，如何使 Ellipse 和 TextBlock 的高度始终与其宽度匹配，即使 Grid.Column 宽度发生变化？

Here's some XAML to illustrate this. In the XAML below, I want the hard coded '63' to be based on the Grid.Column width, or the Width feild of the ellipse:

下面是一些 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"/>

Thanks for all your help. I ended up using Herdo's answer. Just set HorizontalAlignment to Stretch and then bind the height to the actual width of the ellipse. I did this same thing to the ellipse and to the text block:

感谢你的帮助。我最终使用了 Herdo 的答案。只需将 Horizo​​ntalAlignment 设置为 Stretch，然后将高度绑定到椭圆的实际宽度。我对椭圆和文本块做了同样的事情：

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

回答by Herdo

Assuming you have a Gridcontaining the Ellipse, you can use the ActualWidthproperty, and keeping it stretched, without setting the Widthproperty - allowing you to use the Ellipse without any reference to the parent container:

假设您有一个Grid包含 Ellipse 的对象，您可以使用该ActualWidth属性并使其保持拉伸状态，而无需设置该Width属性 - 允许您在不引用父容器的情况下使用 Ellipse：

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

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

Please take into account the remarks for the ActualWidthproperty on MSDN:

请考虑MSDNActualWidth上对该属性的注释：

Because ActualWidth is a calculated value, you should be aware that there could be multiple or incremental reported changes to it as a result of various operations by the layout system. The layout system may be calculating required measure space for child elements, constraints by the parent element, and so on.

因为 ActualWidth 是一个计算值，所以您应该知道，由于布局系统的各种操作，可能会有多个或增量报告的更改。布局系统可能正在计算子元素所需的度量空间、父元素的约束等。

Therefore, the following example code...

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

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

...will result into this behavior (the width/height would update every time, the container - the Gridin this case - changes its layout):

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

回答by Clemens

You don't need any bindings. Put a Path with a circular EllipseGeometryand Stretch="Uniform"into a common inner Grid, which you then place into your outer Grid.

您不需要任何绑定。将一个路径具有圆形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>

回答by Dragos Stoica

You have to bind the Height of the Ellipse to the grid column width like this :

您必须像这样将椭圆的高度绑定到网格列宽：

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

回答by Mikolaytis

I have skipped unimportant attributes

我跳过了不重要的属性

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