How to make an element look like “below” the border, but “above” the contents of the border when the border has rounded corners?

Question

TL / DR:

How to make an element look like “below” the border, but “above” the contents of the border when the border has rounded corners?

Development:

This is what I'm trying to accomplish: when the mouse moves to the border, the “curtain” is drawn from the upper left corner until it covers the entire content of the border or maybe only 3/4, like this example:

This "curtain" is designed to transfer additional controls to update the contents of its window.

I'm stuck right now creating a red path - I can't make it perfectly aligned along the black border, so it will look as if it comes from under the border, but above its contents.

Here is the XAML I have:

 <UserControl x:Class="FamilyTree.GroupBox" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="100" d:DesignWidth="100"> <Grid> <StackPanel Orientation="Horizontal" VerticalAlignment="Center"> <StackPanel.Resources> <Style TargetType="{x:Type TextBlock}"> <Style.Setters> <Setter Property="VerticalAlignment" Value="Center" /> </Style.Setters> </Style> </StackPanel.Resources> <Border CornerRadius="5" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center" ToolTip="{Binding ToolTipString}" Background="White"> <Grid> <StackPanel Margin="3"> <StackPanel.Resources> <Style TargetType="{x:Type Border}"> <Setter Property="CornerRadius" Value="3" /> <Setter Property="BorderBrush" Value="Blue" /> <Setter Property="BorderThickness" Value="0.6" /> <Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="Padding"> <Setter.Value> <Thickness Right="2" /> </Setter.Value> </Setter> <Setter Property="Margin" Value="0" /> </Style> </StackPanel.Resources> <StackPanel Orientation="Horizontal"> <Border> <TextBlock Text="Name" /> </Border> <TextBlock Text="/"/> <Border> <TextBlock Text="Family" /> </Border> </StackPanel> <TextBlock Text="Group"/> </StackPanel> <Path Stroke="Red" Fill="Red" Data="M50,0 L5,0 C1.5,0 0,1.5 0,5 L0,50" StrokeLineJoin="Round" Margin="0.5"/> </Grid> </Border> </StackPanel> </Grid> </UserControl> 

Answer 1

If it were me. I would use the LinearGradient animation to fill your border without using another object, such as Path, to achieve this effect. So just a quick and messy example. Something like that;

Our storyboard is for controlling the StartPoint / EndPoint gradient to bring it at an angle;

 <Storyboard x:Key="Curtain"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="border"> <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="border"> <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> 

Then our border:

 <Border x:Name="border" BorderBrush="Blue" BorderThickness="1" Height="200" Width="350"> <Border.Background> <LinearGradientBrush EndPoint="0.964,0.992" StartPoint="0.017,0.019"> <GradientStop Color="#FFF90202" Offset="0"/> <GradientStop Offset="0.001"/> </LinearGradientBrush> </Border.Background> </Border> 

Thus, it doesn't matter if your CornerRadius is installed, or if you want a fantasy, you can do the same on any shape or path, regardless of its geometry, and evenly distribute the area during its animation. However, Border will need a higher z-index or lower placement in the DOM to display on top of the content.

You probably want to change the values ​​in StartPoint / EndPoint and KeyTime to get exactly what you want, but it was just a quick 60sec example to convey the concept.

Hope this helps, cheers!