Posted by: Zeeshan Amjad | July 22, 2009

UIElement Class in WPF


UIElement class brings life. Here L mean “Layout”, I mean “Input”, F mean “Focus” and E mean “Event”. In other words every class inherited from UIElements has support for layout, input, focus and event handling.

This class also provides one protected virtual function name OnRender, which gives use to render for UIElement. There isn’t any implementation of this method in UIElement and derived classes are supposed to override this method and draw its contents on the screen. We have already discussed this method during the discussion of Visual class i.e. if we select the Content property of window to UIElement or any of its subclass then framework will calls OnRender function, on the other hand framework calls ToString function. Here is a simple program to show that OnRender function of UIElement class does nothing, but just provides hook up point so derived class can override it and render the contents of it.

  1: using System;
  2: using System.Windows;
  3: 
  4: public class MyWindow : Window
  5: {
  6:     public MyWindow()
  7:     {
  8:         Title = "UIElement  Class";
  9:         Width = 400;
 10:         Height = 300;
 11:         WindowStartupLocation = WindowStartupLocation.CenterScreen;
 12: 
 13:         Content = new UIElement();
 14:     }
 15: }
 16: 
 17: public class wpf17
 18: {
 19:     [STAThread]
 20:     public static void Main()
 21:     {
 22:         MyWindow win = new MyWindow();
 23: 
 24:         Application app = new Application();
 25:         app.Run(win);
 26:     }
 27: }
 28: 

Output of this program is one blank window with a caption “UIElement Class”. This programs shows that the default implementation of OnRender function in UIElement class does nothing.

Now let’s try to override the OnRender function of UIElement class. We inherited one class from UIElement named MyUIElement and draw one rounded rectangle with gradient brush. Here is a sample code of this program.

  1: using System;
  2: using System.Windows;
  3: using System.Windows.Media;
  4: 
  5: public class MyUIElement : UIElement
  6: {
  7:     protected override void OnRender(DrawingContext dc)
  8:     {
  9:         Rect rect = new Rect(new Point(10, 10), new Point(360, 250));
 10:         LinearGradientBrush gBrush = new LinearGradientBrush(Colors.AliceBlue,
 11:             Colors.Blue, new Point(0, 0), new Point(1, 1));
 12:         dc.DrawRoundedRectangle(gBrush, new Pen(Brushes.Brown, 5), rect, 10, 10);
 13:     }
 14: }
 15: 
 16: public class MyWindow : Window
 17: {
 18:     public MyWindow()
 19:     {
 20:         Title = "MyUIElement  Class";
 21:         Width = 400;
 22:         Height = 300;
 23:         WindowStartupLocation = WindowStartupLocation.CenterScreen;
 24: 
 25:         Content = new MyUIElement();
 26:     }
 27: }
 28: 
 29: public class wpf18
 30: {
 31:     [STAThread]
 32:     public static void Main()
 33:     {
 34:         MyWindow win = new MyWindow();
 35: 
 36:         Application app = new Application();
 37:         app.Run(win);
 38:     }
 39: }
 40: 

 

Note that OnRender function has only one parameter and that is DrawingContext. One more difference between this class and DrawingVisual is that here we don’t have to call the Close function on DrawingContext class. Framework automatically calls the Close function.

OnRender function is called internally from Arrange function and this function creates the DrawingContext before calling the OnRender and close it after that. Here is a pseudo code of Arrnage function.

  1: void Arrange(Rect finalRect)
  2: {
  3: 	// do something
  4: 	DrawingContext dc = RenderOpen(); 
  5: 	OnRender(dc);
  6: 	dc.Close();
  7: 	// do something
  8: }
  9: 

Here is the output of the program.

wpf_20

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: