Rendering with Graphics

This tutorial will teach you how to create a custom Control, which draws itself on the screen using Graphics class.

1. Create a new AlterNET UI Application project, name it DrawingContextTutorial. For step-by-step guidance on how to create a new AlterNET UI project, see "Hello, World" Tutorial.

2. Add a new empty class named DrawingControl to the project. Make the class public, and derive it from Control:

   using Alternet.UI;
   
   namespace DrawingContextTutorial
   {
       public class DrawingControl : Control
       {
       }
   }
   

3. Open MainWindow.uixml. Add the reference to the local namespace, and add a DrawingControl to the window:

   <Window xmlns="http://schemas.alternetsoft.com/ui/2021"
           xmlns:x="http://schemas.alternetsoft.com/ui/2021/uixml"
           x:Class="DrawingContextTutorial.MainWindow"
           Title="DrawingContextTutorial"
           xmlns:local="clr-namespace:DrawingContextTutorial;assembly=DrawingContextTutorial">
     <local:DrawingControl />
   </Window>
   

4. Compile and run the application. An empty window will appear. This is because DrawingControl does not paint itself yet.

5. In the DrawingControl class, add a default constructor. In its body, set UserPaint property to true. Also, override the OnPaint method:

   using Alternet.Drawing;
   using Alternet.UI;
   
   namespace DrawingContextTutorial
   {
       public class DrawingControl : Control
       {
           public DrawingControl()
           {
               UserPaint = true;
           }
   
           protected override void OnPaint(PaintEventArgs e)
           {
           }
       }
   }
   

6. In the overridden OnPaint method, add the following Graphics.FillRectangle call to paint the control's background LightBlue:

   using Alternet.Drawing;
   using Alternet.UI;
   
   namespace DrawingContextTutorial
   {
       public class DrawingControl : Control
       {
           public DrawingControl()
           {
               UserPaint = true;
           }
   
           protected override void OnPaint(PaintEventArgs e)
           {
               e.DrawingContext.FillRectangle(Brushes.LightBlue, e.Bounds);
           }
       }
   }
   

7. Build and run the application. The displayed window will have a light blue background:

   

8. In the overridden OnPaint method, add the following two lines of code to paint a red circular pattern:

   using Alternet.Drawing;
   using Alternet.UI;
   
   namespace DrawingContextTutorial
   {
       public class DrawingControl : Control
       {
           public DrawingControl()
           {
               UserPaint = true;
           }
   
           protected override void OnPaint(PaintEventArgs e)
           {
               e.DrawingContext.FillRectangle(Brushes.LightBlue, e.Bounds);
   
               for (int size = 10; size < 200; size += 10)
                   e.DrawingContext.DrawEllipse(Pens.Red, new(10, 10, size, size));
           }
       }
   }
   

9. Build and run the application. The displayed window will look like the following:

   

10. Now, let's draw a simple line of text. To do that, we will create a cached Font instance, and draw a text line using the Graphics.DrawText method:

    using Alternet.Drawing;
    using Alternet.UI;
    
    namespace DrawingContextTutorial
    {
        public class DrawingControl : Control
        {
            public DrawingControl()
            {
                UserPaint = true;
            }
    
            private static Font font = new Font(FontFamily.GenericSerif, 15);
    
            protected override void OnPaint(PaintEventArgs e)
            {
                e.DrawingContext.FillRectangle(Brushes.LightBlue, e.Bounds);
    
                for (int size = 10; size < 200; size += 10)
                    e.DrawingContext.DrawEllipse(Pens.Red, new(10, 10, size, size));
    
                e.DrawingContext.DrawText("Hello!", font, Brushes.Black, new PointF(10, 220));
            }
        }
    }
    

11. Build and run the application. The displayed window will look like the following:

    

12. To demonstrate how Graphics.MeasureText works, let's draw the names of the three spring months one under another:

    using Alternet.Drawing;
    using Alternet.UI;
    
    namespace DrawingContextTutorial
    {
        public class DrawingControl : Control
        {
            public DrawingControl()
            {
                UserPaint = true;
            }
    
            private static Font font = new Font(FontFamily.GenericSerif, 15);
    
            protected override void OnPaint(PaintEventArgs e)
            {
                e.DrawingContext.FillRectangle(Brushes.LightBlue, e.Bounds);
    
                for (int size = 10; size < 200; size += 10)
                    e.DrawingContext.DrawEllipse(Pens.Red, new(10, 10, size, size));
    
                float y = 210;
                for (int month = 3; month <= 5; month++)
                {
                    var text = System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(month);
                    var textSize = e.DrawingContext.MeasureText(text, font);
                    e.DrawingContext.DrawText(text, font, Brushes.Black, new(0, y, textSize.Width, textSize.Height));
                    y += textSize.Height + 10;
                }
            }
        }
    }
    

13. Build and run the application. The displayed window will look like the following:

    

---

Congratulations, you have completed the Rendering Graphics with DrawingContext tutorial.