wpf - RenderTransform.TranslateTransform 在 wpf 中的用户控件中进行动画处理

Question

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

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

我创建了它，但是我有一个问题，见下文:
当鼠标光标进入用户控件时:
当鼠标光标离开 UserControl 时:
我的问题:
当面板移出用户控件的一侧时，外侧部分必须是不可见的，就像下面这样:
我的 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 内可见.