如何使一個元素看起來像是在邊框“下方”，但是當邊框有圓角時，邊框的內容“在”上方？

Question

TL / DR：

如何使一個元素看起來像是在邊框“下方”，但是當邊框有圓角時，邊框的內容“在”上方？

闡述：

這就是我想要完成的事情：當鼠標移動到邊框時，從左上角繪制一個“窗簾”，直到它覆蓋整個邊框的內容或者可能只是它的3/4，就像這個例子：

這個“窗簾”旨在攜帶額外的控件來更新其盒子內容。

我現在卡住了創建紅色路徑 - 我不能使它沿着黑色邊框完美對齊，所以它看起來像是來自邊框下方，但高於其內容。

這是我目前擁有的XAML ：

<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

如果是我。 我會使用LinearGradient動畫來填充你的邊框，而不使用像Path這樣的其他對象來完成這個效果。 所以這只是一個快速而草率的例子。 像這樣的東西;

我們的故事板控制漸變的StartPoint / EndPoint從一個角度帶來它;

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

然后我們的邊界;

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

這樣，無論你的CornerRadius是否被設置，或者如果你想獲得幻想，你可以在任何形狀或路徑上做同樣的事情，無論它的幾何形狀如何，它將在執行動畫時均勻地擴展該區域。 但是，Border需要在DOM中使用更高的z-index或更低的位置來呈現內容的頂部。

您可能希望調整StartPoint / EndPoint和KeyTime上的值以獲得您想要的內容，但這只是一個快速的60秒示例來傳達這個概念。

希望這會有所幫助，歡呼！