WPF图片查看器

一、功能需求：

1、打开图片、打开文件夹；

2、下一张、上一张图片；

3、支持拖动、缩放、还原图片显示适当大小；

cs部分代码

    /// <summary>
    /// Interaction logic for ImageView.xaml
    /// </summary>
    public partial class ImageView : UserControl
    {
        public ImageView()
        {
            InitializeComponent();
        }


        bool mouseDown = false;
        Point prePo;
        private void Img_MouseDown(object sender, MouseButtonEventArgs e)
        {
            mouseDown = true;
            Cursor = Cursors.Hand;
            prePo = e.GetPosition(canvas);
        }


        /// <summary>
        /// 移动图片
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Img_PreviewMouseMove(object sender, MouseEventArgs e)
        {
            Point currentPoint = e.GetPosition(canvas);
            if (mouseDown)
            {
                double left = Canvas.GetLeft(img);
                double top = Canvas.GetTop(img);
                if (currentPoint.X != prePo.X)
                    Canvas.SetLeft(img, left + currentPoint.X - prePo.X);
                if (currentPoint.Y != prePo.Y)
                    Canvas.SetTop(img, top + currentPoint.Y - prePo.Y);
                prePo = currentPoint;
            }
        }

        private void Img_MouseUp(object sender, MouseButtonEventArgs e)
        {
            mouseDown = false;
            Cursor = Cursors.Arrow;
        }
        
        double scale = 1;
        /// <summary>
        /// 放大、缩小图片
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Img_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
        {
            double left = Canvas.GetLeft(img);
            double top = Canvas.GetTop(img);
            double preW = img.ActualWidth;
            double preH = img.ActualHeight;

            if (e.Delta > 0)
                scale = scale + 0.01;
            else
                scale = scale - 0.01;
            if (scale <= 0.01)
                scale = 0.01;
            img.RenderTransform = new ScaleTransform(scale, scale);
        }

        /// <summary>
        /// 图片自适应显示
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void BtnDefault_Click(object sender, RoutedEventArgs e)
        {
            scale = 1;
            img.RenderTransform = new ScaleTransform(1, 1);
            InitImage();
        }

        /// <summary>
        /// 还原图片居中缩放适合尺寸显示
        /// 当图片宽（高）大于高（宽）时，如果图片宽（高）超过显示区域宽（高）则进行缩放
        /// 然后垂直水平居中
        /// </summary>
        void InitImage()
        {
            double areaH = canvas.ActualHeight;
            double areaW = canvas.ActualWidth;
            if (img.Width == 0) return;
            if(img.Width > img.Height)
            {
                if (img.Width > areaW)
                {
                    double scale = areaW / img.Width;
                    //img.RenderTransform = new ScaleTransform(scale, scale);
                    double scaleH = img.Height * scale;
                    Canvas.SetTop(img, (areaH - scaleH) / 2);
                    Canvas.SetLeft(img, 0);
                    img.Width = img.Width * scale;
                    img.Height = scaleH;
                    return;
                }
                Canvas.SetTop(img, (areaH - img.Height) / 2);
                Canvas.SetLeft(img, (areaW - img.Width) / 2);
            }
            else
            {
                if (img.Height > areaH)
                {
                    double scale = areaH / img.Height;
                    //img.RenderTransform = new ScaleTransform(scale, scale);
                    double scaleW = img.Width * scale;
                    Canvas.SetTop(img, 0);
                    Canvas.SetLeft(img, (areaW - scaleW) / 2);
                    img.Width = scaleW;
                    img.Height = img.Height * scale;
                    return;
                }
                Canvas.SetTop(img, (areaH - img.Height) / 2);
                Canvas.SetLeft(img, (areaW - img.Width) / 2);
            }
        }

        /// <summary>
        /// 上一张
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void BtnPreview_Click(object sender, RoutedEventArgs e)
        {
            if (images.Count <= 0) return;
            index = --index < 0 ? images.Count - 1 : index;
            ChangeSelect(index);
        }

        /// <summary>
        /// 下一张
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void BtnNext_Click(object sender, RoutedEventArgs e)
        {
            if (images.Count <= 0) return;
            index = ++index >= images.Count ? 0 : index;
            ChangeSelect(index);
        }

        /// <summary>
        /// 打开图片
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void BtnImage_Click(object sender, RoutedEventArgs e)
        {
            System.Windows.Forms.OpenFileDialog fileDialog = new System.Windows.Forms.OpenFileDialog();
            fileDialog.Title = "请选择图片文件";
            fileDialog.Filter = filter;
            fileDialog.RestoreDirectory = true;
            if(fileDialog.ShowDialog() == System.Windows.Forms.DialogResult.OK)
            {
                tbNotice.Visibility = Visibility.Collapsed;
                if (fileDialog.FileNames.Length > 1)
                    LoadImages(fileDialog.FileNames);
                else
                    LoadFolder(System.IO.Path.GetDirectoryName(fileDialog.FileName), fileDialog.FileName);
            }
        }

        int index = 0;
        string folder = null;
        List<string> images = new List<string>();
        string filter = "图像文件|*.png;*.jpg;*.jpeg;*.bmp";
        /// <summary>
        /// 打开文件夹
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void BtnFolder_Click(object sender, RoutedEventArgs e)
        {
            System.Windows.Forms.FolderBrowserDialog folderBrowser = new System.Windows.Forms.FolderBrowserDialog();
            folderBrowser.Description = "请选择图片目录";
            if (folderBrowser.ShowDialog() == System.Windows.Forms.DialogResult.OK)
            {
                tbNotice.Visibility = Visibility.Collapsed;
                folder = folderBrowser.SelectedPath;
                LoadFolder(folder);
            }
        }

        /// <summary>
        /// 切换当前图片
        /// </summary>
        /// <param name="select"></param>
        void ChangeSelect(int select)
        {
            if (select < 0 || images.Count < 1)
                return;
            if (select >= images.Count)
                select = images.Count - 1;

            string file = images[select];
            ChangeSelect(file);
        }

        /// <summary>
        /// 切换当前图片
        /// </summary>
        /// <param name="select"></param>
        void ChangeSelect(string select)
        {
            tbName.Text = System.IO.Path.GetFileName(select);
            if (!File.Exists(select))
            {
                int i = images.IndexOf(select);
                images.Remove(select);
                MessageBox.Show("图片丢失");
                if (images.Count <= 0)
                    tbNotice.Visibility = Visibility.Visible;
                else
                    ChangeSelect(i);
                return;
            }
            BitmapImage bitmap = new BitmapImage(new Uri(select));
            img.Source = bitmap;
            img.Width = bitmap.PixelWidth;
            img.Height = bitmap.Height;
            InitImage();
        }

        /// <summary>
        /// 加载文件到集合中
        /// </summary>
        /// <param name="files"></param>
        void LoadImages(string[] files)
        {
            images.Clear();
            images.AddRange(files);
            index = 0;
            ChangeSelect(index);
        }

        /// <summary>
        /// 加载目录图片到集合中
        /// </summary>
        /// <param name="folder"></param>
        /// <param name="select"></param>
        void LoadFolder(string folder, string select = null)
        {
            images.Clear();
            string[] files = Directory.GetFiles(folder);
            if (files == null)
                return;
            foreach (var item in files)
            {
                if (filter.Contains(System.IO.Path.GetExtension(item.ToLowerInvariant())))
                    images.Add(item);
            }
            index = 0;
            ChangeSelect(select ?? images[0]);
        }
    }

xaml部分代码：

<UserControl x:Class="MahAppsMetro.Demo.Views.ImageView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MahAppsMetro.Demo.Views"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Canvas x:Name="canvas" Background="Beige">
            <Image x:Name="img" Canvas.Top="0" Canvas.Left="0"
               MouseDown="Img_MouseDown" PreviewMouseMove="Img_PreviewMouseMove" MouseUp="Img_MouseUp" PreviewMouseWheel="Img_PreviewMouseWheel" />
        </Canvas>
        <TextBlock x:Name="tbNotice" Text="请选择图片" VerticalAlignment="Center" HorizontalAlignment="Center" />
        <TextBlock x:Name="tbName" HorizontalAlignment="Center" Margin="20" />
        <WrapPanel HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="20">
            <Button x:Name="btnImage" Content="打开" Width="40" Height="20" VerticalAlignment="Bottom" Background="Transparent" BorderThickness="1"
                Click="BtnImage_Click" />
            <Button x:Name="btnFolder" Content="文件夹" Width="40" Height="20" VerticalAlignment="Bottom" Background="Transparent" BorderThickness="1"
                Click="BtnFolder_Click"/>
            <Button x:Name="btnPreview" Content="上一张" Width="40" Height="20" VerticalAlignment="Bottom" Background="Transparent" BorderThickness="1"
                Click="BtnPreview_Click" />
            <Button x:Name="btnDefault" Content="适应" Width="40" Height="20" VerticalAlignment="Bottom" Background="Transparent" BorderThickness="1"
                Click="BtnDefault_Click" Canvas.Left="378" Canvas.Bottom="20"/>
            <Button x:Name="btnNext" Content="下一张" Width="40" Height="20" VerticalAlignment="Bottom" Background="Transparent" BorderThickness="1"
                Click="BtnNext_Click" />
        </WrapPanel>
    </Grid>
</UserControl>

效果：

待解决问题：拖动后释放鼠标有时没有释放状态