WPF Image Transformation

I have simple graphic images which I would like to transform on triggered events. Transform means change the width or move it to another position.

For now I use the Im开发者_如何学Goage element of the toolbox and Animations via Storyboard, for instance DoubleAnimation or ThicknessAnimation.

However the following issues arise:

1. the images flickers when changing the width
2. the image quality varies, does WPF support vector graphics?

Regarding 1. my question is, if other animations should be used.

---

So I tried the Transformation, see the code :

    <Image Height="150" HorizontalAlignment="Left" Margin="12,0,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Source="images/side_view.jpg" Width="1244">
        <Image.RenderTransform>
            <ScaleTransform x:Name="Minimize"  ScaleX="1.0" ScaleY="1.0"/>
        </Image.RenderTransform>
    </Image>

    <Button Content="Next Train" Height="23" HorizontalAlignment="Left" Margin="528,233,0,0" Name="btnNext" VerticalAlignment="Top" Width="75" />
    <Grid.Triggers>
        <EventTrigger RoutedEvent="Button.Click" SourceName="btnNext">
            <BeginStoryboard>
                <Storyboard TargetName="Minimize" TargetProperty="ScaleX">
                    <DoubleAnimation To="0.65" Duration="0:0:2"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>

Works the same as the Animation I applied to width and margin. However, it still flickers! Are there any reasonable explanations?

---

If you're animating the Width of an image, you're making WPF re render the image, and create it from scatch each time. It goes through both the Layout process and the Rendering process, which makes it flicker and not work as best as it could be.

The best option here is to animate a ScaleTransform. ScaleTransform is done completely in hardware via DirectX and therefor will be extremlely fast, it won't flicker, and the image quality should stay pretty much the same the whole way. (unless ofcourse you are resizing it substantially in which case you'll lose percision.)