将一个大矩形放在尺寸较小的网格内居中（并且 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 不尊重“ClipToBounds” 。

我尝试使用 Canvas，正如 Dr.Wpf 的前述文章中所建议的，但我不能似乎没有做对。

我可以做些什么来让它看起来像第一张图片，而不需要求助于 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 部分看出的）它有点黑客。您可以通过绑定到 Canvas 的 ActualWidth 并使用 IValueConverter 来摆脱 Canvas.Left将其转换为正确的值。

编辑：

经过进一步探索，我想出了一种稍微不那么黑客化的方法。虽然嵌套让我感到畏缩，但唯一硬编码的是顶部边距，以使其垂直居中。同样，这可以通过 IValueConverter 来完成，但您不希望这样做。不幸的是，我不确定我能得到比这更好的东西。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WpfApplication10.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot">
        <Grid Background="LightBlue" Height="10" ClipToBounds="False" Margin="0,27,0,79">        
            <Canvas>
                <Grid Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=Canvas}}"
                      Height="{Binding ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType=Canvas}}">
                    <Canvas HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0 -40 0 0">
                        <Rectangle Height="40" Width="20" Fill="Black" ClipToBounds="False"/>           
                    </Canvas>
                </Grid>
            </Canvas>
        </Grid>
    </Grid>
</Window>