将网格内部的大矩形居中，尺寸较小（并且ClipToBounds不起作用）

Question

我正在尝试将一个矩形放置在一个高度受限的网格中心，如下所示：

<Grid ClipToBounds="False">
    <Grid Background="LightBlue" Height="10" ClipToBounds="False" Margin="0,27,0,79">
        <Rectangle Height="40" Width="20" Fill="Black" VerticalAlignment="Center" HorizontalAlignment="Center" ClipToBounds="False"/>
    </Grid>
</Grid>

我预计它会是这样的：

但它看起来像那样：

我知道我的子矩形更大，它可以理解它剪辑，但是，我的ClipToBounds没有任何效果。读完之后，我发现确实是Grid does not respect "ClipToBounds"。

我尝试使用Canvas，正如Dr.Wpf在aforementioned article中所建议的那样，但我似乎无法做到正确。

有什么我可以做的让它看起来像第一张图片，而不是诉诸C＃代码？

谢谢！

Answer 1

要确切地告诉您这里的要求有点难。你说你用Canvas尝试过，但你似乎无法做到正确。什么不起作用？

我使用了这段代码：

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="TestApp.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="175" Height="170" Background="LightGray">

    <Grid>
        <Canvas Background="LightBlue" Height="10" 
                Margin="0,27,0,79" VerticalAlignment="Top">
            <Rectangle Height="40" Width="20" Fill="Black" 
                       Canvas.Left="66" Canvas.Top="-15" />
        </Canvas>
    </Grid>

</Window>

并且能够基本上伪造你的截图。但是（正如你可以通过我的代码的Canvas.Left和Canvas.Top部分所说的那样）它有点像hackish。您可以通过绑定Canvas.Left的{​​{1}}并使用ActualWidth将其转换为正确的值来摆脱Canvas。

修改

经过一番进一步探索后，我想出了一种稍微不那么强硬的方式。虽然嵌套的那种让我感到畏缩，但唯一硬编码的是使其垂直居中的上边距。同样，这可以使用IValueConverter完成，但您不希望如此。不幸的是，我不确定我能比这更好。

IValueConverter