鼠标悬停在图像标签中放大图像

Question

我有这样的图像：<Image Height="180" Width="180" Source="{Binding Result}" Grid.Column="1" />如何在鼠标悬停时放大（缩放）此标签中的图像？尽可能以最简单的方式。我想Image从上面进行编辑。我想放大此标签中的图像并保持此尺寸 ( 180*180)

Answer 1

您可以将 放入Image固定size网格中，ScaleTransform对其应用 a 并对后者进行动画处理。像这样的事情：

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