Question

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

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

我还想在上面的椭圆的中心绘制一个正确的数字。基本上以一个以数字为中心的圆圈结束。

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

这里有一些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的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 - 更改其布局）：

enter image description here

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

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

Answer 4

我跳过了不重要的属性

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

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

4 个答案: