Центрирование большого прямоугольника внутри сетки, размеры которой меньше (а 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 ни на что не влияют.После прочтения я обнаружил, что действительно Сетка не относится к "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, связавшись с ActualWidth из Canvas и используя IValueConverter, который преобразует его в правильное значение.

Редактировать:

После небольшого дальнейшего исследования я придумал немного менее хакерский способ сделать это.Хотя вложенность заставляет меня съеживаться, единственное, что жестко закодировано, - это верхнее поле для его центрирования по вертикали.Опять же, это можно сделать с помощью 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>