Implement flip effect to image in WPF

Question

0.00/5 (No votes)

See more:

Hello Everyone,
I am trying to Implement flip effect to Image . Here is my XAML code

HTML

<Window.Background>

       <VisualBrush  TileMode="None" Viewport="0,0,1,1">
           <VisualBrush.Visual>
               <Image Source="Windows_7_Rejected_Artwork_03.jpg"/>
           </VisualBrush.Visual>
       </VisualBrush>
   </Window.Background>
   <Window.Resources>
       <Style TargetType="Image">
           <Style.Triggers>
               <EventTrigger RoutedEvent="Mouse.MouseEnter">
                   <BeginStoryboard>
                       <Storyboard TargetProperty="Width">
                           <DoubleAnimation From="0" To="360" Duration="0:0:05" AutoReverse="True"></DoubleAnimation>
                       </Storyboard>
                   </BeginStoryboard>
               </EventTrigger>
           </Style.Triggers>
       </Style>
   </Window.Resources>

   <Grid>
       <Grid.RowDefinitions>
           <RowDefinition Height="60"/>
           <RowDefinition Height="60"/>
           <RowDefinition Height="60"/>
           <RowDefinition Height="60"/>
           <RowDefinition Height="*"/>
       </Grid.RowDefinitions>

       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="170"/>
           <ColumnDefinition Width="170"/>
           <ColumnDefinition Width="*"/>
       </Grid.ColumnDefinitions>
       <Image Source="ImagesIcon\DeskTop.JPG" Grid.Column="0" Grid.Row="0" Margin="2"/>
       <Image Source="ImagesIcon\clander.JPG" Grid.Column="2" Grid.Row="0" Margin="2"/>

       <Image Source="ImagesIcon\Stores.JPG" Grid.Column="0" Grid.Row="1" Margin="2"/>
       <Image Source="ImagesIcon\twteer.JPG" Grid.Column="1" Grid.Row="1" Margin="2"/>

       <Image Source="ImagesIcon\weather.JPG" Grid.Column="1" Grid.Row="2" Margin="2"/>
       <Image Source="ImagesIcon\Google.JPG" Grid.Column="2" Grid.Row="2" Margin="2"/>

       <Image Source="ImagesIcon\sales.JPG" Grid.Column="0" Grid.Row="3" Margin="2"/>
       <Image Source="ImagesIcon\Computer.JPG" Grid.Column="1" Grid.Row="3" Margin="2"/>
       <Image Source="ImagesIcon\firefox.JPG" Grid.Column="3" Grid.Row="3" Margin="2"/>

       <Image Source="ImagesIcon\crome.JPG" Grid.Column="0" Grid.Row="4" Margin="2"/>
       <Image Source="ImagesIcon\ControlPanels.JPG" Grid.Column="1" Grid.Row="4" Margin="2"/>
       <Image Source="ImagesIcon\Recycle.JPG" Grid.Column="3" Grid.Row="4" Margin="2"/>


   </Grid>

I the grid the cells are loaded with Images.So when ever mouse enters the Image area image has to filp . Hope I am struggling in

HTML

<Storyboard TargetProperty="Width">

in this property . So can anyone guide/suggest how can I flip the images . I tried with other propertylike "Height","Angle".

Advance Thanks
Arun R.V

Posted 6-Oct-13 2:16am

arunrv

Updated 22-Feb-18 20:37pm

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

ridoy · Answer 1 · 2013-10-06T08:17:00

Solution 1

You can view this one:
how to flip Image in wpf[^]

Posted 6-Oct-13 8:17am

ridoy

Comments

arunrv 7-Oct-13 0:37am

Thanks for your reply Ridoy. But Cant I implement inside style triggers so that instead of writing to each image I want to write inside a style .

zia khan · Answer 2 · 2018-02-22T20:37:00

<Image HorizontalAlignment="Left" Height="114" Margin="58,0,0,0" VerticalAlignment="Top" Width="126" Source="logo.png" RenderTransformOrigin=".5,.5">
            <Image.RenderTransform>
                <ScaleTransform x:Name="AnimatedScaleTransform" ScaleX="-1" />
            </Image.RenderTransform>
            <Image.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation To="1" Duration="0:0:2"  Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Image.Triggers>
        </Image

Implement flip effect to image in WPF

2 solutions

Solution 1

Solution 3

Add your solution here

Preview 0

Implement flip effect to image in WPF

2 solutions

Solution 1

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us