WPF中自定义绘制内容

先说结论：实现了在自定义大小的窗口中，加载图片，并在图片上绘制一个矩形框；且在窗口大小改变的情况，保持绘制的矩形框与图片的先对位置不变。

在WinForm中，我们可以很方便地绘制自己需要的内容，在WPF中似乎被限制了，不能够很方便的使用；然后需求有总是奇葩的，所以在这里简单地总结一下。

在WinForm中，如果需要自己绘制，就需要拿到Graphics对象；同样的，我们就希望在WPF也得到一个其同样作用的对象，这个对象就是DrawingContext类的实例对象。

具体来说，就是要重载 UIElement 类的 OnRender 方法。

 public class YourControl : UIElement
 {
     /// <summary>
     /// 重写绘制
     /// </summary>
     protected override void OnRender(DrawingContext drawingContext)
     {
         // your logic here
     }
 }

Talk is cheap, here is the code. 下面的代码完整的组织后，编译可运行，已经调试通了；希望对看到的同学有帮助，有问题，我们也可以探讨。

• 项目的组织方式；

• DrawableGrid.cs

 using System;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Input;
 using System.Windows.Media;
 using System.Windows.Media.Imaging;

 namespace draw
 {
     /// <summary>
     /// 基本思想
     /// 1 在绘制结束时，计算相对于图片真实大小的情况下，绘制的矩形框的大小，及相对于图片的偏移
     /// 2 每次刷新绘制前，计算当前窗口大小，及应该绘制的图片的大小，及其偏移
     /// 3 每次刷新绘制前，计算绘制的矩形框，相对于当前图片的偏移
     /// 其中，
     /// 框的偏移及大小，每次使用针对原始图片的数据，作为基础来计算比例，就能够保证即使窗体缩小到0，依旧可以恢复
     /// </summary>
     public class DrawableGrid : Control
     {
         #region vars

         private Point mousedown;
         private Point mouseup;
         private bool mouseBtnDown = false;
         private bool bSelectionDraw = false;

         private SolidColorBrush mBrush = Brushes.LightBlue;
         private Pen mPen = new Pen(Brushes.Red, );
         private BitmapImage Img = null;

         private Grid drawgrid;

         private Rect curPicRect;
         private Rect curSelectRect;

         private Rect realSelectRect;
         private Rect realPicRect;

         #endregion

         #region ctors

         static DrawableGrid()
         {
             DefaultStyleKeyProperty.OverrideMetadata(typeof(DrawableGrid), new FrameworkPropertyMetadata(typeof(DrawableGrid)));
         }

         #endregion

         #region overrides

         /// <summary>
         /// 重写绘制
         /// </summary>
         protected override void OnRender(DrawingContext drawingContext)
         {
             if (Img == null)
                 return;

             curPicRect = CalcRect(Img.Height, Img.Width, this.ActualHeight, this.ActualWidth);
             curSelectRect = CalcResizeRect(curPicRect.X, curPicRect.Y, realSelectRect.X, realSelectRect.Y, realSelectRect.Height, realSelectRect.Width, curPicRect.Height / realPicRect.Height);

             drawingContext.DrawImage(Img, curPicRect);

             if (mouseBtnDown)
             {
                 int xmin = (int)Math.Min(mousedown.X, mouseup.X);
                 int xmax = (int)Math.Max(mousedown.X, mouseup.X);
                 int ymin = (int)Math.Min(mousedown.Y, mouseup.Y);
                 int ymax = (int)Math.Max(mousedown.Y, mouseup.Y);
                 var r = new Rect(xmin, ymin, xmax - xmin, ymax - ymin);
                 drawingContext.DrawRectangle(mBrush, mPen, r);
             }

             if (bSelectionDraw)
             {
                 drawingContext.DrawRectangle(mBrush, mPen, curSelectRect);
             }

             base.OnRender(drawingContext);
         }

         public override void OnApplyTemplate()
         {
             drawgrid = GetTemplateChild("drawgrid") as Grid;
             if (drawgrid != null)
             {
                 drawgrid.MouseDown += drawgrid_MouseDown;
                 drawgrid.MouseMove += drawgrid_MouseMove;
                 drawgrid.MouseUp += drawgrid_MouseUp;
             }

             string picaddr = System.IO.Path.Combine(System.AppDomain.CurrentDomain.BaseDirectory, "pic", "2.jpg");
             Img = new BitmapImage(new Uri(picaddr));
             realPicRect = new Rect(, , Img.Width, Img.Height);
         }

         #endregion

         #region methods

         /// <summary>
         /// 计算图片大小相对于当前的控件大小，应该如何展示
         /// </summary>
         /// <param name="imgHeight">图片高</param>
         /// <param name="imgWidth">图片宽</param>
         /// <param name="gridHeight">容器高</param>
         /// <param name="gridWidth">容器宽</param>
         /// <returns>当前实际应该绘制图片的矩形大小及相对于容器的偏移</returns>
         private Rect CalcRect(double imgHeight, double imgWidth, double gridHeight, double gridWidth)
         {
             Rect rect;
             double imgRatio = imgHeight / imgWidth;
             double gridRatio = gridHeight / gridWidth;

             if (imgRatio >= gridRatio)
             {
                 double hi = gridHeight;
                 double wi = gridHeight / imgRatio;

                 double left = (gridWidth - wi) / ;
                 double top = ;

                 rect = new Rect(left, top, wi, hi);
             }
             else
             {
                 double wi = gridWidth;
                 double hi = gridWidth * imgRatio;

                 double left = ;
                 double top = (gridHeight - hi) / ;

                 rect = new Rect(left, top, wi, hi);
             }

             return rect;
         }

         /// <summary>
         /// 在图片上绘制的框相对于图片的位置
         /// </summary>
         private Rect CalcResizeRect(double curx, double cury, double lastx, double lasty, double lastheight, double lastwidth, double ratio)
         {
             double x = curx + lastx * ratio;
             double y = cury + lasty * ratio;
             double wid = lastwidth * ratio;
             double hei = lastheight * ratio;
             return new Rect(x, y, wid, hei);
         }

         #endregion

         #region events

         private void drawgrid_MouseDown(object sender, MouseButtonEventArgs e)
         {
             if (e.LeftButton == MouseButtonState.Pressed && e.RightButton == MouseButtonState.Released)
             {
                 bSelectionDraw = false;
                 mouseBtnDown = true;
                 mousedown = e.GetPosition(drawgrid);
             }
         }

         private void drawgrid_MouseMove(object sender, MouseEventArgs e)
         {
             if (mouseBtnDown)
             {
                 mouseup = e.GetPosition(drawgrid);
                 this.InvalidateVisual();
             }
         }

         private void drawgrid_MouseUp(object sender, MouseButtonEventArgs e)
         {
             if (e.LeftButton == MouseButtonState.Released && e.RightButton == MouseButtonState.Released)
             {
                 bSelectionDraw = true;
                 mouseBtnDown = false;
                 mouseup = e.GetPosition(drawgrid);

                 int xmin = (int)Math.Min(mousedown.X, mouseup.X);
                 int xmax = (int)Math.Max(mousedown.X, mouseup.X);
                 int ymin = (int)Math.Min(mousedown.Y, mouseup.Y);
                 int ymax = (int)Math.Max(mousedown.Y, mouseup.Y);

                 var relativeRect = new Rect(xmin, ymin, xmax - xmin, ymax - ymin);
                 var fullSizeImgRect = CalcRect(Img.Height, Img.Width, Img.Height, Img.Width);
                 double tempration = fullSizeImgRect.Height / curPicRect.Height;
                 realSelectRect = CalcResizeRect(fullSizeImgRect.X, fullSizeImgRect.Y, relativeRect.X - curPicRect.X, relativeRect.Y - curPicRect.Y, relativeRect.Height, relativeRect.Width, tempration);
             }
         }

         #endregion
     }
 }

• DrawableGrid.xaml

 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:local="clr-namespace:draw">

     <Style TargetType="{x:Type local:DrawableGrid}">
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type local:DrawableGrid}">
                     <Grid x:Name="drawgrid" Background="Transparent" />
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
 </ResourceDictionary>

• Generic.xaml

 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

     <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="draw;component/DrawableGrid/DrawableGrid.xaml" />
     </ResourceDictionary.MergedDictionaries>

 </ResourceDictionary>

• MainWindow.xaml

 <Window x:Class="draw.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:draw"
         Title="MainWindow" Height="" Width="">
     <local:DrawableGrid />
 </Window>

• MainWindow.xaml.cs

 using System.Windows;

 namespace draw
 {
     public partial class MainWindow : Window
     {
         public MainWindow()
         {
             InitializeComponent();
         }
     }
 }