how to flip Image in wpf

后端 未结 6 1096
时光说笑
时光说笑 2021-01-31 01:56

I recently learned how to rotate a BitmapImage using the \'TransformedBitmap\' and \'RotateTransformed\' classes. Now I am able to perform clockwise rotations on my images. But

相关标签:
6条回答
  • 2021-01-31 02:29

    You can use ScaleTransform with negative ScaleX/ScaleY:

      <TextBlock Text="P">
       <TextBlock.RenderTransform>
        <ScaleTransform ScaleY="-1" ScaleX="-1" />
       </TextBlock.RenderTransform>
      </TextBlock>
    
    0 讨论(0)
  • 2021-01-31 02:34

    A quick trick for horizontal (only) flipping btw is to set FlowDirection property to FlowDirection.RightToLeft. If the component is a container though, some children of it may interpret the property differently (custom logic)

    0 讨论(0)
  • 2021-01-31 02:36
    <Image x:Name="SampleImage"  Margin="0" RenderTransformOrigin="0.5,0.5" >
            <Image.LayoutTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="1" ScaleX="-1"/>
                    <SkewTransform AngleY="0" AngleX="0"/>
                    <RotateTransform Angle="0"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Image.LayoutTransform>
        </Image>
    

    Create an image component like this. And when its source is set, the image will flip from left to right.

    0 讨论(0)
  • 2021-01-31 02:41

    Use a ScaleTransform with a ScaleX of -1 for horizontal and ScaleY of -1 for vertical flipping, applied to the image's RenderTransform property. Using RenderTransformOrigin="0.5,0.5" on the image makes sure your image gets flipped around its center, so you won't have to apply an additional TranslateTransform to move it into place:

    <Image Source="a.jpg" Padding="5" RenderTransformOrigin="0.5,0.5">
      <Image.RenderTransform>
        <ScaleTransform ScaleX="-1"/>
      </Image.RenderTransform>
    </Image>
    

    for horizontal flipping and

    <Image Source="a.jpg" Padding="5" RenderTransformOrigin="0.5,0.5">
      <Image.RenderTransform>
        <ScaleTransform ScaleY="-1"/>
      </Image.RenderTransform>
    </Image>
    

    for vertical.

    If you want to do it in code-behind, in C# it should look something like this:

    img.RenderTransformOrigin = new Point(0.5,0.5);
    ScaleTransform flipTrans = new ScaleTransform();
    flipTrans.ScaleX = -1;
    //flipTrans.ScaleY = -1;
    img.RenderTransform = flipTrans;
    
    0 讨论(0)
  • 2021-01-31 02:42

    Interesting 3d flippable usercontrol: http://flipcontrol.codeplex.com/releases/view/22358

    In your case you will have to display on both sides the same image.

    0 讨论(0)
  • 2021-01-31 02:46

    To give your flip a little more "depth" so that is looks more like a true flip you probably want to do a skew transform with a smaller scale transform.

    You would want to skew the object about 20 degrees to make it look as if it is flipping in 3D. This is a poor mans 3D flip. You can accomplish a true 3D flip in WPF but that takes a bit more work.

    This will give you the animation that looks cleaner, then you can toggle visibility on two different panels to give the impression of a front and a backside to your element.

    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyControl" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
      <SplineDoubleKeyFrame KeyTime="00:00:00.0" Value="1" />
      <SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="0.3" />
      <SplineDoubleKeyFrame KeyTime="00:00:00.12" Value="0.6" />                              
      <SplineDoubleKeyFrame KeyTime="00:00:00.15" Value="0.8" />
      <SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="1" />
      <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" />
    </DoubleAnimationUsingKeyFrames>
    
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyControl" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
      <SplineDoubleKeyFrame KeyTime="00:00:00.0" Value="1" />
      <SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="0.9" />
      <SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="1" />
      <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" />
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyControl" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)">
      <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
      <SplineDoubleKeyFrame KeyTime="00:00:00.06" Value="-10" />
      <SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="-20" />
      <SplineDoubleKeyFrame KeyTime="00:00:00.1" Value="20" />
      <SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="0" />
    </DoubleAnimationUsingKeyFrames>
    
    0 讨论(0)
提交回复
热议问题