WPF Clip Прямоугольник

Question

У меня есть UserControl, который имеет размер 45x45 (жестко заданный размер - это часть сетки элементов). Когда определенное свойство имеет значение, я хочу показать «клип» в верхнем правом углу, указывая это. Саму видимость легко достичь, однако мой прямоугольник выходит за границы элемента управления и накладывается на другие элементы управления. Я попытался использовать свойство ClipToBounds, но ничего не получилось. Когда я добавил это к общему элементу управления, клип работал отлично, но мои эффекты наведения на главный прямоугольник (заполняет ячейку) перестали работать.

Есть идеи? Я уверен, что это просто сделать, но все еще будучи довольно новым для WPF (и ужасным в геометрии - следовательно, не использующим Polygon), я немного растерялся.

Вот полная разметка:

<Grid>        
    <Rectangle x:Name="MainRectangle" Fill="{Binding Background}" Opacity="0" MouseEnter="MainRectangle_MouseEnter" MouseLeave="MainRectangle_MouseLeave">
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Rectangle.MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="0.8" Duration="0:0:0.33" AutoReverse="False" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="Rectangle.MouseLeave">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.8" To="0.0" Duration="0:0:0.33" AutoReverse="False" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding VisualCount}" />
    <Rectangle Fill="Black" HorizontalAlignment="Right" Height="20" Margin="0,-14,-20,0" Stroke="Black" VerticalAlignment="Top" Width="20" Visibility="{Binding HasNotes}">
        <Rectangle.RenderTransform>
            <RotateTransform CenterX="0" CenterY="0" Angle="45" />
        </Rectangle.RenderTransform>
    </Rectangle>
</Grid>

Answer 1

Вот простой путь:

<Path Fill="Black" HorizontalAlignment="Right" Visibility="{Binding HasNotes}">
    <Path.Data>
        <PathGeometry>
            <PathFigure StartPoint="0,0">
                <LineSegment Point="14,0"/>
                <LineSegment Point="14,14"/>
            </PathFigure>
        </PathGeometry>
    </Path.Data>
</Path>