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

Curtis 发表于 Dev

柯蒂斯

我在Grid.Row和Grid.Column内部绘制了一个椭圆。行始终比列宽高。

我想绘制一个椭圆，该椭圆填充网格列的宽度，谁的高度使其成为一个完美的圆。

我也想在上述椭圆的正中央绘制一个数字。基本上以一个以数字为中心的圆结束。

我可以在椭圆和包含该数字的TextBlock上轻松设置HorizontalAlignment =“ Stretch”。这为我照顾宽度。但是，即使Grid.Column的宽度发生变化，如何使Ellipse和TextBlock的高度始终匹配其Width？

这是一些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}}"/>

赫多

假设您有一个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>

请考虑ActualWidth有关MSDN上该属性的说明：

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