绑定到 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 的宽度绑定到TextBlock 的Height，对吧？

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

更新 根据下面的 cmets，这是一个使用 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 use different layout systems，由于您没有使用Canvas 提供的功能，所以Grid 是更好的选择。

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