RenderTransform.TranslateTransform在用戶控件動畫在WPF

Question

我想創建顯示圖像並具有工具欄面板， 我想下面列出的功能設置爲我的用戶一個WPF用戶控件：

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它的葉子上Border與ClipToBounds="True"當button_panel的Border

類似：

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

與 ClipToBounds="True"

現在正在對Border設置，在Border之外的Border的任何孩子是不會被看見。

這樣就可以滿足您的要求，當鼠標不在圖像上時，StackPanel將不可見，因爲TranslateTransform使它不在Border之外。因此，只有當鼠標位於圖像上時纔會看到StackPanel，並且只有在Border內才能看到滑入/滑出。