Centering a large rectangle inside a grid which dimensions are smaller (and ClipToBounds doesn't work)

Question

I'm trying to position a rectangle in the center of a grid with a restricted height, like so:

<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>

I've expected it to look like that:

But instead it looks like that:

I know the my child rectangle is bigger and it is understandable that it clips, however, my ClipToBounds have no effect of anything. After reading around, I found that indeed Grid does not respect "ClipToBounds".

I tried to use Canvas, as suggested in the aforementioned article by Dr.Wpf but I can't seem to get it right.

Is there anything I can do to make it look like the 1st picture, without resorting to C# code?

Thanks!

Answer 1

It's a little hard to tell exactly what your requirements are here. You said you tried it witha Canvas, but you can't seem to get it right. What didn't work?

I used this code:

<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>

and was able to essentially fake what your screenshot looked like. But (as you can tell by the Canvas.Left and Canvas.Top parts of my code) it is sort of hackish. You could get rid of the Canvas.Left by binding to the ActualWidth of the Canvas and using an IValueConverter that converts it to the correct value.

Edit:

After a little further exploration, I came up with a slightly less hackish way of doing it. Though the nesting kind of makes me cringe, the only thing hardcoded is the top margin to get it centered vertically. Again, that can be done with an IValueConverter, but you don't want that. I'm not sure I can get any better than this, unfortunately.

<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>