wpf - RenderTransform.TranslateTransform 在 wpf 中的用户控件中设置动画

Question

我想创建一个显示图像并具有工具栏面板的 wpf 用户控件，我想将下面列出的功能设置为我的用户控件：

1. 当鼠标光标在用户控件之外时隐藏工具栏面板。
2. 当鼠标光标进入用户控件时，工具栏面板从用户控件的底部向上移动，定位到用户控件的底部。

我创建它但是，我有一个问题，见下文：
当鼠标光标进入用户控件时：
当鼠标光标离开用户控件时：
我的问题：
当面板移出用户控件的一侧时，外侧部分必须是不可见的，如下所示：
我的 UserControl 的 Xaml 代码：

 <UserControl.Resources>
        <Storyboard x:Key="SB_MouseEnter">
            <DoubleAnimation To="0" Storyboard.TargetName="button_panel" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" Duration="0:0:0.2"/>
        </Storyboard>
        <Storyboard x:Key="SB_MouseLeave">
            <DoubleAnimation To="40" Storyboard.TargetName="button_panel" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" Duration="0:0:0.2"/>
        </Storyboard>
    </UserControl.Resources>
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseEnter">
            <BeginStoryboard Storyboard="{StaticResource ResourceKey=SB_MouseEnter}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave">
            <BeginStoryboard Storyboard="{StaticResource ResourceKey=SB_MouseLeave}"/>
        </EventTrigger>
    </UserControl.Triggers>
    <Border CornerRadius="4" BorderBrush="SeaGreen" BorderThickness="2">
        <Grid>
            <Image Source="Images/Koala.jpg"/>
            <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" Name="button_panel" Height="40" RenderTransformOrigin="0.5,0.5">
                <StackPanel.RenderTransform>
                    <TranslateTransform Y="40"/>
                </StackPanel.RenderTransform>
                <StackPanel.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black" Offset="1"/>
                        <GradientStop Color="#66FFFFFF"/>
                    </LinearGradientBrush>
                </StackPanel.Background>
                <Button Padding="5" Margin="5,0" Width="80" Height="30">
                    Open
                </Button>
                <Button Padding="5" Margin="5,0" Width="80" Height="30">
                    Clear
                </Button>
            </StackPanel>
        </Grid>
    </Border>

Answer 1

只是Clip当它button_panel离开Border时ClipToBounds="True"Border

就像是：

...
<Border BorderBrush="SeaGreen"
        BorderThickness="2"
        ClipToBounds="True"
        CornerRadius="4">
...

现在ClipToBounds="True"设置在 上Border，任何在Border之外的子级Border都将不可见。

因此，这将满足您StackPanel在鼠标不在图像上方时也具有不可见的要求，因为TranslateTransform它会将其保持在Border. 因此，您只能StackPanel在鼠标悬停在图像上时看到，而滑入/滑出仅在Border.