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

Question

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

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

我也想在上面椭圆的中心画一个个位数。基本上以一个以数字为中心的圆圈结束。

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

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

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

Answer 1

我跳过了不重要的属性

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

Answer 2

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

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

Answer 3

假设您有一个包含椭圆的 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 属性的备注：

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.

因此，下面的示例代码...

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

...将导致此行为（width/height 每次都会更新，容器 - 在本例中为 Grid - 更改其布局）：

Answer 4

您不需要任何绑定。将带有圆形 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>

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

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

c#

wpf

binding

textblock

ellipse