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

2018-06-22 15:55:23

我在Grid.Row和Grid.Column中绘制了一个椭圆。该行总是高于列宽。

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

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

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

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

假设你有一个包含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 - 改变它的布局）：

您必须将Ellipse的高度绑定到网格列的宽度，如下所示：

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

你不需要任何绑定。将一个圆形的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>

链接地址: http://www.djcxy.com/p/63587.html

上一篇: How do I Bind a WPF Ellipse's Height to its own Width?

下一篇: google cloud storage