Question

我使用两个按钮面板构建一个小控件。当我悬停控件时，我想显示面板并在我离开时隐藏它。一切都很好，但我有一个错误。当我将光标从TextBlock移动到Image我的故事板再次运行时。我不明白为什么因为他们都在控制之内。我尝试添加一个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

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

边框背景=“透明” ...

如果您没有设置背景，图像和文本块之间的空间就是您的父窗口。

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

1 个答案: