wpf图片浏览器，实现缩放平移操作图片切换等功能

wpf经常要用到控件来查看图片，尤其是高清图片，于是做了一个例子：

1.定义图片的队列，用list来存。

  private readonly List<string> files;

　　

2.切换图片。

给图片的imageSource赋值。在快速切换的时候，这种方法的效果还行，占用内存并不高。

   var bmp = new BitmapImage(new Uri(files[i]));
            Img.Source = bmp;
            i++; 
            GC.Collect();
            GC.WaitForPendingFinalizers();

　　

3.定义xaml元素，给图片一个变换矩阵。

 

  <ScrollViewer x:Name="Sv">
            <Viewbox  x:Name="Box" 
                      MouseWheel="Box_OnMouseWheel"
                      PreviewMouseLeftButtonDown="Box_OnPreviewMouseLeftButtonDown"
                      PreviewMouseLeftButtonUp="Box_OnPreviewMouseLeftButtonUp"
                      PreviewMouseMove="Box_OnPreviewMouseMove"
                      Stretch="Uniform">
                <Viewbox.RenderTransform>
                    <MatrixTransform>
                        <MatrixTransform.Matrix>
                            <Matrix OffsetX="0"
                                    OffsetY="0" />
                        </MatrixTransform.Matrix>
                    </MatrixTransform>
                </Viewbox.RenderTransform>
                <Grid>
                    <Image  x:Name="Img"></Image>

                    <Grid x:Name="InfoGrid" Visibility="Collapsed">
                       
                    </Grid>
                </Grid>
            </Viewbox>
 </ScrollViewer>

　　4.给图片上加一个标识，显示图片上的小图标，图标跟着图片运动。（根据实际情况需要来加或者不加）

 

   <Ellipse Width="50"
                                 Height="50"
                                 RenderTransformOrigin="0.5,0.5"
                                 x:Name="Rect"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 SnapsToDevicePixels="True"
                                 Visibility="Visible">
                            <Ellipse.Fill>
                                <RadialGradientBrush>

                                    <GradientStop Color="#FF9494"
                                                  Offset="1" />
                                    <GradientStop Color="#FF2727"
                                                  Offset="0.664" />
                                    <GradientStop Color="#AC0000"
                                                  Offset="0.29" />
                                    <GradientStop Color="#FFF4F7F4"
                                                  Offset="0" />
                                </RadialGradientBrush>
                            </Ellipse.Fill>
                            <Ellipse.RenderTransform>
                                <ScaleTransform x:Name="Stf"
                                                ScaleX="0.5"
                                                ScaleY="0.5">
                                </ScaleTransform>
                            </Ellipse.RenderTransform>
                        </Ellipse>

　　

5.变换（拖动平移，放大缩小）

这些在后台cs代码中做。

缩放代码：

 var m = ((MatrixTransform) ctrl.RenderTransform).Matrix;
            if (big)
            {
                m.ScaleAtPrepend(1.1, 1.1, centerX, centerY);
            }
            else
            {
                m.ScaleAtPrepend(1/1.1, 1/1.1, centerX, centerY);
            }
            ctrl.RenderTransform = new MatrixTransform(m);

　　移动代码：

 

   var point = e.MouseDevice.GetPosition(Sv);
            var m = Box.RenderTransform.Value;
            //计算x偏移量 
            m.OffsetX = m.OffsetX + point.X - start.X;
            //计算y偏移量
            m.OffsetY = m.OffsetY + point.Y - start.Y;
            Box.RenderTransform = new MatrixTransform(m);

　　

效果如下：

 

可以用鼠标任意缩放图片了。

源码如下：

https://files.cnblogs.com/files/lizhijian/viewbox%E7%BC%A9%E6%94%BE.rar

感谢阅读，希望对你有帮助。