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

【问题标题】：RenderTransform.TranslateTransform animating in usercontrol in wpfRenderTransform.TranslateTransform 在 wpf 中的用户控件中设置动画
【发布时间】：2013-07-18 11:41:20
【问题描述】：

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

当鼠标光标在用户控件之外时隐藏工具栏面板。
当鼠标光标进入用户控件时，工具栏面板从用户控件底部向上移动，定位到用户控件底部。

我创建了它，但是，我有一个问题，见下图：
当鼠标光标进入用户控件时：
当鼠标光标离开用户控件时：
我的问题：
当面板移出用户控件的一侧时，外侧部分必须是不可见的，像下面这样：
我的 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>

【问题讨论】：

标签： wpf user-controls

【解决方案1】：

当它离开Border 和ClipToBounds="True" 在Border 上时，只需Clip 和button_panel

类似：

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

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

因此，这将满足您在鼠标不在图像上方时使StackPanel 不可见的要求，因为TranslateTransform 将其保持在Border 之外。因此，当鼠标悬停在图像上时，您只会看到StackPanel，并且滑入/滑出仅在Border 内可见。

【讨论】：