ListView containing Bitmaps with Zoom Animation in WPF

Question

I have a simple requirement as mentioned below:

A ListView or any control displays list of bitmaps/images. When user mouse hovers on any bitmap that bitmap zoomed to show that is currently selected.

Since I have to provide drag drop operations and click operation that why I taken the list view.

Pleas help!!

It will be great if any body provide the xaml to this..

Answer 1

In short - use render transform (or layout transform) scaling to zoom in on the pictures with mouse hover.

Sorry for the long listing - animation are very long in wrting :) Hope this helps.

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication2.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
    <Style x:Key="ListViewItemStyle1" TargetType="{x:Type ListViewItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="OnMouseEnter1">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1.5"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1.5"/>
                            </DoubleAnimationUsingKeyFrames>
                            <Int32AnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(Panel.ZIndex)">
                                <SplineInt32KeyFrame KeyTime="00:00:00" Value="0"/>
                                <SplineInt32KeyFrame KeyTime="00:00:00.3000000" Value="0"/>
                            </Int32AnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="OnMouseLeave1">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.5"/>
                                <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.5"/>
                                <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <Grid Background="{x:Null}">
                        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Left" Width="100" RenderTransformOrigin="0.5,0.5">
                            <ContentPresenter.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </ContentPresenter.RenderTransform>
                        </ContentPresenter>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="Mouse.MouseLeave">
                            <BeginStoryboard x:Name="OnMouseLeave1_BeginStoryboard" Storyboard="{StaticResource OnMouseLeave1}"/>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="Mouse.MouseEnter">
                            <BeginStoryboard x:Name="OnMouseEnter1_BeginStoryboard" Storyboard="{StaticResource OnMouseEnter1}"/>
                        </EventTrigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Panel.ZIndex" Value="100"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid x:Name="LayoutRoot">
    <ListView ItemContainerStyle="{DynamicResource ListViewItemStyle1}">
        <ListView.View>
            <GridView>
                <GridViewColumn/>
            </GridView>
        </ListView.View>
        <Image Width="64" Height="64" Source="167.png" Stretch="Fill"/>
        <Image Width="64" Height="64" Source="167.png" Stretch="Fill"/>
        <Image Width="64" Height="64" Source="167.png" Stretch="Fill"/>
        <Image Width="64" Height="64" Source="167.png" Stretch="Fill"/>
        <Image Width="64" Height="64" Source="167.png" Stretch="Fill"/>
    </ListView>
</Grid>
</Window>