Question

我看过这篇文章 Given a WPF Image control, how can I make it bigger through animation on MouseEnter?

我想知道我是否想在我的项目中的许多图像上重用此代码如何应用模板？

我尝试创建一个样式，但我得到了一个例外，我无法在Storyboard中使用TargetName.TargetName =“scale”

守则：

<Image Width="100" Height="100" Source="...">
    <Image.RenderTransform>
        <ScaleTransform 
            x:Name="scale" 
            CenterX="50" 
            CenterY="50" 
            ScaleX="1" 
            ScaleY="1" />
    </Image.RenderTransform>

    <Image.Triggers>
        <EventTrigger RoutedEvent="Image.MouseEnter">
            <BeginStoryboard>
                <BeginStoryboard.Storyboard>
                    <Storyboard Duration="0:0:0.2">
                        <DoubleAnimation 
                            Storyboard.TargetName="scale" 
                            Storyboard.TargetProperty="ScaleX" 
                            To="1.5" />
                        <DoubleAnimation 
                            Storyboard.TargetName="scale" 
                            Storyboard.TargetProperty="ScaleY" 
                            To="1.5" />
                    </Storyboard>
                </BeginStoryboard.Storyboard>
            </BeginStoryboard>
        </EventTrigger>

        <EventTrigger RoutedEvent="Image.MouseLeave">
            <BeginStoryboard>
                <BeginStoryboard.Storyboard>
                    <Storyboard Duration="0:0:0.2">
                        <DoubleAnimation 
                            Storyboard.TargetName="scale" 
                            Storyboard.TargetProperty="ScaleX" 
                            To="1" />
                        <DoubleAnimation 
                            Storyboard.TargetName="scale" 
                            Storyboard.TargetProperty="ScaleY" 
                            To="1" />
                    </Storyboard>
                </BeginStoryboard.Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Image.Triggers>
</Image>

Answer 1

这不是最后的答案，但我从今天早上起就一直在努力（我现在必须去:-)）但我认为这可以让你找到答案。我仍然有一个运行时错误，但似乎是在正确的道路上。

<Window.Resources>
    <ScaleTransform x:Key="Scale" 
        CenterX="50" 
        CenterY="50" 
        ScaleX="1.5" 
        ScaleY="1.5" />
    <Style x:Key="ImageStyle" TargetType="Image">
        <Style.Setters>
            <Setter Property="Image.RenderTransform" Value="{StaticResource Scale}" />
        </Style.Setters>
        <Style.Triggers>
            <EventTrigger RoutedEvent="Image.MouseEnter">
                <BeginStoryboard>
                    <BeginStoryboard.Storyboard>
                        <Storyboard Duration="0:0:0.2">
                            <DoubleAnimation 
                                Storyboard.Target="{DynamicResource Scale}"
                                Storyboard.TargetProperty="ScaleX" 
                                To="1.5" />
                            <DoubleAnimation 
                              Storyboard.Target="{DynamicResource Scale}"
                              Storyboard.TargetProperty="ScaleY" 
                              To="1.5" />
                        </Storyboard>
                    </BeginStoryboard.Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>


</Window.Resources>

   <Image Grid.Row="2" Width="100" Height="100" Source="C:\WindowPhoneApp7_1.PNG" Style="{StaticResource ImageStyle}">

图像的通用模板与样式和触发器

1 个答案: