当我将光标从一个元素移动到另一个元素时，为什么我的 Storyboard 会运行？ [复制]

Question

我用一个有两个按钮的面板构建了一个小控件。当我悬停控件时，我想显示面板并在我离开时将其隐藏。一切都很好，但我有一个错误。当我将光标从 TextBlock 移动到 Image 时，我的 Storyboard 再次运行。我不明白为什么，因为它们都在控件内。我尝试添加Border 来包装控件，但它不起作用。

<UserControl.Resources>
    <Storyboard x:Key="Show">
        <DoubleAnimationUsingKeyFrames
            Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"
            Storyboard.TargetName="QuickPanel">
            <EasingDoubleKeyFrame KeyTime="0" Value="18"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="Hide">
        <DoubleAnimationUsingKeyFrames
            Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"
            Storyboard.TargetName="QuickPanel">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="18"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>

<UserControl.Triggers>
    <EventTrigger RoutedEvent="Border.MouseEnter">
        <BeginStoryboard Storyboard="{StaticResource Show}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="Border.MouseLeave">
        <BeginStoryboard Storyboard="{StaticResource Hide}"/>
    </EventTrigger>
</UserControl.Triggers>

<Border Width="144" Height="36" ClipToBounds="True" BorderThickness="0">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Image Source="http://www.streamplay.fr/thumb/fanart/3000/3000/1321396.jpg"
           VerticalAlignment="Center" HorizontalAlignment="Center" Margin="2"
           Stretch="UniformToFill" Height="34" Width="34"/>
        <Grid Grid.Column="1">
            <StackPanel VerticalAlignment="Center" Margin="6,0,0,0">
                <TextBlock FontSize="12" FontWeight="DemiBold">Sample Title</TextBlock>
                <TextBlock FontSize="10" Text="{Binding Title, Mode=TwoWay}"></TextBlock>
            </StackPanel>
        </Grid>
        <StackPanel x:Name="QuickPanel" Grid.Column="1" Width="18" HorizontalAlignment="Right" RenderTransformOrigin="0.5,0.5">
            <StackPanel.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform X="18"/>
                </TransformGroup>
            </StackPanel.RenderTransform>
            <Button x:Name="button" Height="18" Content="p" IsDefault="True" />
            <Button x:Name="button1" Height="18" Content="k" />
        </StackPanel>
    </Grid>
</Border>

知道如何改变吗？

Answer 1

您需要为边框元素 UI 设置背景：

边框 Background="透明" ...

如果不设置背景，图片和文本块之间的空间就是你的父窗口。