0

こんにちはguyz私は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）のようにマージンを減らすように位置を変更することです。したがって、画像はwidth ++ height ++left--top--としてポップアウトされます。

誰でも？感謝と神のご加護を:)

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 に答える