绑定到 ActualHeight 不起作用

Question

我尝试创建一个具有半透明圆形背景的自定义控件：

<Canvas>
    <TextBlock x:Name="StopText" Text="Some test text"/>
    <Rectangle Fill="SkyBlue"
               Width="{Binding Source=StopText, Path=ActualHeight}" 
               Height="20"  
               RadiusX="5" RadiusY="5" Opacity="0.2"/>
</Canvas>

问题是我可能无法绑定到 ActualHeight/ActualWidth 属性，因为它们是不是依赖的。

如何保持矩形和文本框大小相同？

Answer 1

正确的绑定是在绑定到另一个元素时使用 ElementName，而不是 Source：

<Canvas>
    <TextBlock x:Name="StopText" Text="Some test text"/>
    <Rectangle Fill="SkyBlue"
               Width="{Binding ElementName=StopText, Path=ActualHeight}" 
               Height="20"  
               RadiusX="5" RadiusY="5" Opacity="0.2"/>
</Canvas>

此外，您确实意识到您正在绑定 Rectangle 的宽度code> 到 TextBlock 的 Height，对吧？

如果这确实是您想要设置控件的方式，您将需要将 Rectangle 的宽度绑定到 TextBlock 的 ActualWidth，并将高度更改为ActualHeight。

更新
根据下面的评论，这是使用没有绑定的 Grid 的实现：

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <TextBlock x:Name="StopText" Text="Some test text"/>
    <Rectangle Fill="SkyBlue"
               HorizontalAlignment="Stretch"
               VerticalAlignment="Stretch"  
               RadiusX="5" RadiusY="5" Opacity="0.2"/>
</Grid>

Grid 和 Canvas 使用不同的布局系统，并且由于您没有使用 Canvas 提供的功能，因此 Grid 是更好的选择。

子元素的最大区别在于，Rectangle 现在仅使用 Horizo​​ntal 和 VerticalAlignment 在整个 Grid 上进行Stretch >，而不用担心任何东西的大小。