RenderTransform.TranslateTransform在wpf中的usercontrol中设置动画

Question

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

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

我创造它但是，我有一个问题， 见吼叫：
当鼠标光标进入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>

Answer 1

Clip只有button_panel Border ClipToBounds="True" Border <{1}}

类似的东西：

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

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

因此，当StackPanel将鼠标悬停在TranslateTransform之外时，这样就可以满足您在鼠标不在图像上时Border不可见的要求。因此，当鼠标悬停在图像上时，您只能看到StackPanel，而幻灯片输入/输出仅在Border内可见。