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>

ListView包含WPF中带缩放动画的位图

1 个答案: