RenderTransform.TranslateTransform animating in usercontrol in wpf

Question

i want to create a wpf usercontrol that displays an Image and has a toolbar panel, i want to set features listed below to the my userControl: - tool bar panel hidden when mouse cursor is out side of the usercontrol. - When mouse cursor enter the usercontrol,toolbar panel move up from the bottom of the usercontrol and locate at the bottom of the usercontrol. i create it but ,i have a problem , see bellow: when mouse cursor enter the UserControl: and when mouse cursor leaved UserControl: My Problem: when panel is moving out side of the UserControl,the out side parts must be invisible, like bellow: my UserControl's Xaml codes: ```

Accepted Answer

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

something like:

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

Now with `ClipToBounds="True"` being set on the `Border`, any child of the `Border` which is outside the `Border` is not going to be visible.

This would thus satisfy your requirement of having the `StackPanel` invisible when the mouse is not over the image as well since `TranslateTransform` keeps it outside the `Border`. Thus you only see the `StackPanel` when mouse is over the image and the Slide in/out is only visible inside the `Border`.

RenderTransform.TranslateTransform animating in usercontrol in wpf

Solution

Problem