C# 如何使元素看起来像它'；s"；以下是「；边界，但是；“以上”；边界'；s内容，当边框具有圆角时？ 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>

如果是我的话。我将使用LinearGradient动画填充边界，而不使用其他对象（如路径）来实现此效果。这只是一个简单的例子。像这样的东西

我们的故事板控制渐变的起点/终点，从一个角度将其引入

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



通过这种方式，无论是否设置了拐角半径，或者如果您想获得灵感，您都可以在任何形状或路径上执行相同的操作，而不管其几何体如何，并且在执行动画时，它将均匀分布该区域。但是，边框需要在DOM中具有更高的z索引或更低的位置才能呈现在内容的顶部

您可能希望调整StartPoint/EndPoint和KeyTime上的值，以获得所需的精确值，但这只是一个60秒的示例，用于传达此概念

希望这有帮助，干杯
 如何设置
ZIndex
以将
边框
的内容与其自己的
边框.背景
？您不需要z-index，只需以这种方式对DOM中的元素进行排序即可。我最后就是这样做的，但是
不在
范围内，我必须
将覆盖边界的尺寸绑定到网格的尺寸。问题是我不能把内容放在那里。这个内容是覆盖的全部目的…好吧，是的，我认为有一些沟通错误，你仍然可以让它看起来好像内容在边界内，但从技术上讲它不会，你不必在任何东西之间绑定任何维度，因为父项默认会为其子项建立边界。