将网格内部的大矩形居中,尺寸较小(并且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.Left您可以通过绑定到 theActualWidth并Canvas使用IValueConverter将其转换为正确值的an来摆脱 the 。

编辑：

经过进一步的探索，我想出了一种稍微不那么黑客的方法。虽然嵌套让我感到畏缩，但唯一硬编码的是顶部边距，以使其垂直居中。同样，这可以通过 来完成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>