Question

嗨我有wpf xaml代码，如下所示

<Image Source="/MyProject;component/Resources/Icons/button_cancel_256.png"
   DockPanel.Dock="Right"
   Margin="0,1,10,1"
   RenderTransformOrigin="0.5,0.5"
   >
<Image.RenderTransform>
    <ScaleTransform x:Name="ImageScaleTransform" 
                    ScaleX="1" ScaleY="1" 
                    />
</Image.RenderTransform>
    <Image.Effect>
       <DropShadowEffect x:Name="ImageGlowEffect"
           BlurRadius="20"
           ShadowDepth="0"
           Color="White">
       </DropShadowEffect>
   </Image.Effect>
<Image.Triggers>
    <EventTrigger RoutedEvent="Image.MouseEnter">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation
                        Storyboard.TargetName="ImageGlowEffect"
                        Storyboard.TargetProperty="Color"
                        From="White"
                        To="Red"
                        Duration="0:0:1">
                    </ColorAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="Image.MouseLeave">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation
                        Storyboard.TargetName="ImageGlowEffect"
                        Storyboard.TargetProperty="Color"
                        From="Red"
                        To="White"
                        Duration="0:0:1">
                    </ColorAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="ImageScaleTransform"
                        Storyboard.TargetProperty="ScaleX"
                        From="1"
                        To=".9"
                        Duration="0:0:0.1">
                    </DoubleAnimation>
                    <DoubleAnimation
                        Storyboard.TargetName="ImageScaleTransform"
                        Storyboard.TargetProperty="ScaleY"
                        From="1"
                        To=".9"
                        Duration="0:0:0.1">
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>

    <EventTrigger RoutedEvent="Image.MouseLeftButtonUp">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="ImageScaleTransform"
                        Storyboard.TargetProperty="ScaleX"
                        From=".9"
                        To="1"
                        Duration="0:0:0.1">
                    </DoubleAnimation>
                    <DoubleAnimation
                        Storyboard.TargetName="ImageScaleTransform"
                        Storyboard.TargetProperty="ScaleY"
                        From=".9"
                        To="1"
                        Duration="0:0:0.1">
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Image.Triggers>

现在我想创建一个样式或模板，以便我可以将其应用于我可以指定颜色的其他图像。

请帮助我在各种尝试之后无法做到。

Answer 1

这是风格 - 效果很好。问题出在Storyboard.TargetName属性上。我刚删除它并修改了Storyboard.TargetProperty。这就是为什么我在评论中问你问题是什么。如果您从头开始指定其他信息，对我来说会容易得多。

<Style TargetType="Image">
    <Setter Property="Margin" Value="0,1,10,1"/>
    <Setter Property="DockPanel.Dock" Value="Right"/>
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    <Setter Property="RenderTransform">
        <Setter.Value>
            <ScaleTransform ScaleX="1" ScaleY="1" />
        </Setter.Value>
    </Setter>
    <Setter Property="Effect">
        <Setter.Value>
            <DropShadowEffect BlurRadius="20" ShadowDepth="0" Color="White"/>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <EventTrigger RoutedEvent="Image.MouseEnter">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation
                            Storyboard.TargetProperty="Effect.Color"
                            From="White"
                            To="Red"
                            Duration="0:0:1">
                        </ColorAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>

        <EventTrigger RoutedEvent="Image.MouseLeave">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation
                            Storyboard.TargetProperty="Effect.Color"
                            From="Red"
                            To="White"
                            Duration="0:0:1">
                        </ColorAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetProperty="RenderTransform.ScaleX"
                            From="1"
                            To=".9"
                            Duration="0:0:0.1">
                        </DoubleAnimation>
                        <DoubleAnimation
                            Storyboard.TargetProperty="RenderTransform.ScaleY"
                            From="1"
                            To=".9"
                            Duration="0:0:0.1">
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>

        <EventTrigger RoutedEvent="Image.MouseLeftButtonUp">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetProperty="RenderTransform.ScaleX"
                            From=".9"
                            To="1"
                            Duration="0:0:0.1">
                        </DoubleAnimation>
                        <DoubleAnimation
                            Storyboard.TargetProperty="RenderTransform.ScaleY"
                            From=".9"
                            To="1"
                            Duration="0:0:0.1">
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Style.Triggers>
</Style>

Answer 2

添加到EvAlex发布的内容，您可以动态更改特定于图像的颜色，然后使用DynamicResource和Opacity双动画（代替ColorAnimation），如下所示...

  <Style TargetType="{x:Type Image}"
           x:Key="DropShadowImageStyle">
         <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform
                    ScaleX="1"
                    ScaleY="1" />
            </Setter.Value>
        </Setter>
        <Setter Property="Effect">
            <Setter.Value>
                <DropShadowEffect
                    BlurRadius="20"
                    ShadowDepth="0" 
                    Opacity="0"
                    Color="{DynamicResource MyToColor}">
                </DropShadowEffect>
            </Setter.Value>
        </Setter> 
        <Style.Triggers>
            <EventTrigger RoutedEvent="Image.MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation  
                                Storyboard.TargetProperty="Effect.Opacity"
                                From="0"
                                To="1"                                     
                                Duration="0:0:1">
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger RoutedEvent="Image.MouseLeave">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetProperty="Effect.Opacity"
                                From="1"
                                To="0"
                                Duration="0:0:1">
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetProperty="RenderTransform.ScaleX"
                                From="1"
                                To=".9"
                                Duration="0:0:0.1">
                            </DoubleAnimation>
                            <DoubleAnimation
                                Storyboard.TargetProperty="RenderTransform.ScaleY"
                                From="1"
                                To=".9"
                                Duration="0:0:0.1">
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>

            <EventTrigger RoutedEvent="Image.MouseLeftButtonUp">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetProperty="RenderTransform.ScaleX"
                                From=".9"
                                To="1"
                                Duration="0:0:0.1">
                            </DoubleAnimation>
                            <DoubleAnimation
                                Storyboard.TargetProperty="RenderTransform.ScaleY"
                                From=".9"
                                To="1"
                                Duration="0:0:0.1">
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>

 <StackPanel Orientation="Horizontal">
    <Image Source="MyImage1.JPG"
           Width="50" Height="50" Margin="5"
           Style="{StaticResource DropShadowImageStyle}">
        <Image.Resources>
            <Color x:Key="MyToColor">Red</Color>
        </Image.Resources>
    </Image>
    <Image Source="MyImage2.JPG"
           Width="50" Height="50" Margin="5"
           Style="{StaticResource DropShadowImageStyle}">
        <Image.Resources>
            <Color x:Key="MyToColor">Blue</Color>
        </Image.Resources>
    </Image>
    <Image Source="MyImage3.JPG"
           Width="50" Height="50" Margin="5"
           Style="{StaticResource DropShadowImageStyle}">
        <Image.Resources>
            <Color x:Key="MyToColor">Orange</Color>
        </Image.Resources>
    </Image>
</StackPanel>

带有效果和触发器的图像模板

2 个答案: