首页 文章

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

提问于
浏览 次
1

我在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}}"/>
c# wpf binding textblock ellipse

4 回答

  • 2

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

    请考虑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

    回复于
  • 4

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

    <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>
    回复于
  • 2

    您不需要任何绑定 . 将带有循环 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>
    回复于
  • 1

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

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

相关问题