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

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

工具栏面板在鼠标光标位于用户控件之外时隐藏。

当鼠标光标进入用户控件时，工具栏面板从用户控件底部向上移动并位于用户控件底部。

我创建了它但是，我有一个问题，
见下图:

当鼠标光标进入 UserControl 时:

当鼠标光标离开 UserControl 时:

我的问题:
当面板移出 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>

最佳答案

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 内可见。

关于wpf - RenderTransform.TranslateTransform 在 wpf 中的用户控件中设置动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17741818/