Заполните "угловой луч" границы

Question

Надеюсь, что мой вопрос достаточно прост :) У меня есть ГРАНИЦА в качестве основного контейнера с некоторым радиусом угла.Внутри него есть СЕТКА, и если я хочу установить какой-либо цвет фона на сетку - уродливые части за пределами углов становятся ...

Итак, как мне установить мою ГРАНИЦУ какглобальный контейнер и все внутри остается внутри?

Спасибо!

Answer 1

См. Следующий вопрос: Как сделать так, чтобы содержимое рамки с закругленными углами также было закруглено?

ClippingBorder из ответа делает очень хорошую работу в этом. Вот сравнение между обычными Border и ClippingBorder.

<StackPanel Orientation="Horizontal">
    <Border CornerRadius="20,20,20,20"
            BorderThickness="4"
            BorderBrush="Black"
            Width="50"
            Height="50">
        <Grid Background="Red"/>
    </Border>
    <controls:ClippingBorder CornerRadius="20,20,20,20"
                             BorderThickness="4"
                             BorderBrush="Black"
                             Width="50"
                             Height="50"
                             Margin="20,0,0,0">
        <Grid Background="Red"/>
    </controls:ClippingBorder>
</StackPanel>

Answer 2

Если вы хотите, чтобы цвет фона заполнял закругленные углы, вам нужно установить свойство фона на самой границе, а не на сетке внутри нее. Теперь, если вы хотите, чтобы сетка полностью находилась внутри границы, установите поле в сетке, которое компенсирует радиус закругленного угла:

<Border CornerRadius="10" 
        BorderBrush="Black" 
        BorderThickness="5" 
        Background="Green">
    <Grid Background="Red" 
          Margin="2.5">

    </Grid>
</Border>