RenderTransform.TranslateTransform animation in usercontrol in wpf

Question

I want to create a wpf user control that displays an image and has a toolbar, I want to set the functions listed below in my userControl:

• the toolbar is hidden when the mouse cursor is out of user control.
• When the mouse cursor enters the usercontrol, the toolbar panel rises from the bottom of the user control and is located at the bottom of the user control.

I create it, but I have a problem, see below:
when the mouse cursor enters UserControl:
and when the mouse cursor left UserControl:
My problem:
when the panel leaves the UserControl side, the outer parts should be invisible, like a roar:
my UserControl Xaml codes are:

<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

Just Clip button_panel when it leaves Border with ClipToBounds="True" on Border

sort of:

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

Now that ClipToBounds="True" set to Border , any Border child that is outside of Border will not be visible.

Thus, this will satisfy your StackPanel invisibility StackPanel when the mouse is not above the image, as TranslateTransform saves it outside the Border . Thus, you only see the StackPanel when the mouse is above the image, and the insert / insert slide is visible only inside the Border .