在WPF中实现对图像的翻转效果 [英] Implement flip effect to image in WPF

问题描述

Hello Everyone，

我正在尝试为图像实现翻转效果。这是我的XAML代码

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

<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

<Storyboard TargetProperty="Width">

此属性中的
。所以任何人都可以指导/建议我如何翻转图像。我尝试了其他属性高度，角度。





预付款

Arun RV

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

推荐答案

你可以查看这个：

如何翻转wpf中的图片 [ ^ ]

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

<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

这篇关于在WPF中实现对图像的翻转效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！