ListView, содержащий растровые изображения с Zoom-анимацией в WPF

Question

У меня есть простое требование, как указано ниже:

ListView или любой элемент управления отображает список растровых изображений / изображений. Когда пользовательская мышь наводит курсор на любое растровое изображение, это растровое изображение увеличивается, чтобы показать, что оно выбрано в данный момент.

Поскольку я должен предоставить операции перетаскивания и операции щелчка, вот почему я взял представление списка.

Пожалуйста, помогите !!

Будет замечательно, если какое-нибудь тело предоставит xaml этому ..

Answer 1

Короче говоря - используйте масштабирование преобразования преобразования (или преобразования макета), чтобы увеличивать изображения при наведении курсора мыши.

Извините за длинный список - анимация очень длинная в написании :) Надеюсь, это поможет.

<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>