时间戳

首页 > 解决方案 > 在鼠标悬停的图像标签中放大图像

c# - 在鼠标悬停的图像标签中放大图像

问题描述

我有这样的图像：

<Image Height="180" Width="180" Source="{Binding Result}" Grid.Column="1" />

如何在鼠标悬停时放大（缩放）此标签中的图像？尽可能以最简单的方式。我想Image从上面编辑。我想放大此标签中的图像并保持此尺寸 ( 180*180)

标签： c#wpfxaml

解决方案

您可以将 放在Image一个固定的size网格中，对其应用 aScaleTransform并为后者设置动画。像这样的东西：

<Grid Height="180" Width="180">
    <Image Height="180" Width="180" Source="{Binding Result}" Grid.Column="1">
        <Image.LayoutTransform>
            <ScaleTransform x:Name="st" CenterX="90" CenterY="90" ScaleX="1" ScaleY="1" />
        </Image.LayoutTransform>
        <Image.Triggers>
            <EventTrigger RoutedEvent="Image.MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="st"
                                             Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                             To="3.0" Duration="0:0:0" />
                            <DoubleAnimation Storyboard.TargetName="st"
                                             Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                             To="3.0" Duration="0:0:0" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger RoutedEvent="Image.MouseLeave">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="st"
                                             Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                             To="1.0" Duration="0:0:0" />
                            <DoubleAnimation Storyboard.TargetName="st"
                                             Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                             To="1.0" Duration="0:0:0" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Image.Triggers>
    </Image>
</Grid>

推荐阅读