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

【问题标题】：How do I Bind a WPF Ellipse's Height to its own Width?如何将 WPF 椭圆的高度绑定到它自己的宽度？
【发布时间】：2015-05-23 03:02:35
【问题描述】：

我在 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}}"/>

【问题讨论】：

把 Ellipse 和 TextBlock 放到一个共同的 Grid 中也可以解决文本居中问题。

标签： c# wpf binding textblock ellipse

【解决方案1】：

假设您有一个包含 Ellipse 的 Grid，您可以使用 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>

请注意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 - 会更改其布局）：

【讨论】：

【解决方案2】：

您不需要任何绑定。将带有圆形 EllipseGeometry 和 Stretch="Uniform" 的 Path 放入一个公共的内部 Grid 中，然后将其放入外部 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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

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

【讨论】：

这可行，但宽度被硬编码为“50”。我在网格的一列内有这个椭圆和 TextBlock，并且该列根据窗口的宽度改变大小。它可能会在 30-70 之间波动，具体取决于用户拉伸主应用程序窗口的程度。我需要椭圆宽度基于包含它的 grid.column 的宽度。
所以，只需删除硬编码的宽度并设置 Horizontalalignment=stretch