0

嗨，伙计们，我看到并尝试了使用 andrej 博客中关于如何平滑弹出图像的 scaletransform 的代码，这很好。这是代码

<Window.Resources>
 <Storyboard x:Key="expandStoryboard">
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
        To="2" Duration="0:0:0.2" />
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
        To="2" Duration="0:0:0.2" />
</Storyboard>
<!-- This storyboard will make the image revert to its original size -->
<Storyboard x:Key="shrinkStoryboard">
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
        To="1" Duration="0:0:0.2" />
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
        To="1" Duration="0:0:0.2" />
</Storyboard>
</Window.Resources>

在网格区域，是这样的：

        <Image Name="image2" Source="C:\Documents and Settings\My Documents\Visual Studio 2010\settings_256.png" Margin="23,44,372,221" HorizontalAlignment=" center" VerticalAlignment="Center" >
        <Image.Triggers>
            <EventTrigger RoutedEvent="Image.MouseEnter">
                <BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
            </EventTrigger>
            <EventTrigger RoutedEvent="Image.MouseLeave">
                <BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
            </EventTrigger>
        </Image.Triggers>
        <Image.RenderTransform>
            <ScaleTransform ScaleX="1" ScaleY="1"/>
        </Image.RenderTransform>
    </Image>

因此，当我将鼠标指向图像时，它会平滑地调整图像的高度和宽度。但我还想做的是，如果我要进行鼠标悬停，我希望图像的左侧和顶部会改变位置，比如减少像 image1.margin(left-5,top-5) 这样的边距。所以它会将图像弹出为宽度++高度++左--顶部--

任何人？谢谢，上帝保佑:)

4

1 回答 1

0

您可以使用UIElement.RenderTransformOrigin 属性：

<Image RenderTransformOrigin="0.5, 0.5"
       Name="image2" Source="C:\Documents and Settings\My Documents\Visual Studio 2010\settings_256.png"
       Margin="23,44,372,221" HorizontalAlignment="center" VerticalAlignment="Center">
    <Image.Triggers>
        <EventTrigger RoutedEvent="Image.MouseEnter">
            <BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
        </EventTrigger>
        <EventTrigger RoutedEvent="Image.MouseLeave">
            <BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
        </EventTrigger>
    </Image.Triggers>
    <Image.RenderTransform>
        <ScaleTransform ScaleX="1" ScaleY="1"/>
    </Image.RenderTransform>
</Image>
于 2012-05-20T02:43:21.780 回答