Шаблон для изображения с эффектами и триггерами - PullRequest
Новая
       1

Шаблон для изображения с эффектами и триггерами

1 голос
/ 14 марта 2012

Привет, у меня есть код 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>

Теперь я хочу создать стиль или шаблон, чтобы я мог применить это к другим изображениям, где я могу указать цвет.

Пожалуйста, помогите, я не смог сделать это после различных попыток.

Ответы [ 2 ]

2 голосов
/ 14 марта 2012

Добавляя к тому, что опубликовал 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 голосов
/ 14 марта 2012

Вот стиль - хорошо работает.Проблема была с 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...