如何将WPF椭圆的高度与自身的宽度绑定?

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

在网格中画一个椭圆。行和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?

我可以在椭圆和包含数字的TextBlock上轻松设置horizontalalign ="Stretch"。这是我的宽度。但是，如何使椭圆和TextBlock的高度始终与它的宽度匹配，即使是在网格中。列宽变化?

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”基于网格。列宽，或椭圆的宽度

    <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的答案。只需将水平对齐设置为拉伸，然后将高度绑定到椭圆的实际宽度。我对椭圆和文本块做了同样的处理:

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

4 个解决方案

#1

Assuming you have a Grid containing the Ellipse, you can use the ActualWidth property, and keeping it stretched, without setting the Width property - allowing you to use the Ellipse without any reference to the parent container:

假设您有一个包含椭圆的网格，您可以使用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>

Please take into account the remarks for the ActualWidth property on MSDN:

请考虑MSDN上的实际宽度属性备注:

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.

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

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 Grid in this case - changes its layout):

…将导致这种行为(宽度/高度每次都会更新，容器——本例中的网格——更改其布局):

#2

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>

#3

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

您不需要任何绑定。将一个圆形的椭圆几何图形和拉伸=“均匀”的路径放入一个公共的内部网格中，然后将其放置到外部网格中。

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

#4

I have skipped unimportant attributes

我跳过了不重要的属性

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