wpf 查看图片大图

xaml

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="240" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!--  缩略图  -->
        <Image
            x:Name="OriginalImage"
            Grid.Column="0"
            Margin="5"
            MouseMove="OriginalImage_OnMouseMove" Source="/Resource/Images/BearAndFox5.jpg" />

        <!--  取图区域  -->
        <Rectangle
            x:Name="TargetRectangle"
            Grid.Column="0"
            Width="30" Height="30"
            IsHitTestVisible="False" RenderTransformOrigin=".5 .5" Stroke="DodgerBlue" StrokeThickness="1">

            <!--  取图区域跟随鼠标  -->
            <Rectangle.RenderTransform>
                <TranslateTransform x:Name="TargetRectangleTransform" X="30" Y="30" />
            </Rectangle.RenderTransform>

            <!--  鼠标移出源图后隐藏  -->
            <Rectangle.Resources>
                <Style TargetType="Rectangle">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=OriginalImage, Path=IsMouseOver}" Value="False">
                            <Setter Property="Visibility" Value="Hidden" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Rectangle.Resources>

        </Rectangle>

        <!--  视图输出, 这里使用 Viewbox 表示从源图取范围值  -->
        <Rectangle
            Grid.Column="1"
            Margin="5"
            Stroke="DodgerBlue" StrokeThickness="1">
            <Rectangle.Fill>
                <VisualBrush
                    x:Name="ViewAreaVisualBrush"
                    Stretch="Uniform" Viewbox="0 0 .5 .5" Viewport="0 0 1 1"
                    Visual="{Binding ElementName=OriginalImage}" />
            </Rectangle.Fill>
        </Rectangle>

    </Grid>

cs


        // 设置取图的 rect 位置与鼠标同步, 使用向量计算
        var mousePostion = e.GetPosition(image);

        var mouseVector = new Vector(mousePostion.X, mousePostion.Y);
        var centerVector = new Vector(image.ActualWidth / 2, image.ActualHeight / 2);
        var targetvector = mouseVector - centerVector;

        this.TargetRectangleTransform.X = targetvector.X;
        this.TargetRectangleTransform.Y = targetvector.Y;

        // 显示右侧大图, 这里按 0 - 1 的比例计算
        var x = (mousePostion.X - this.TargetRectangle.ActualWidth / 2) / image.ActualWidth;
        var y = (mousePostion.Y - this.TargetRectangle.ActualHeight / 2) / image.ActualHeight;
        var width = this.TargetRectangle.ActualWidth / image.ActualWidth;
        var height = this.TargetRectangle.ActualHeight / image.ActualHeight;

        this.ViewAreaVisualBrush.Viewbox = new Rect(x, y, width, height);
上一篇
下一篇