Creating Custom UI Elements in VB.NET

Printer Quick Response Code in VB.NET Creating Custom UI Elements

The following sections describe how to create custom WPF user interface elements tailored to your particular needs by extending the built-in elements or writing an element from scratch.

To create custom user interface elements, you can either extend existing ones or write custom elements from scratch. Before you start, you should be clear how your element should appear and behave, so that you can choose the right base class. You should derive owner-drawn elements from the most lightweight UIElement class possible; start at the top of the hierarchy to choose the class. If your owner-drawn element should render a background, select Control as the base

class. If your element should have child elements, choose ContentControl if you do not require child element arrangement. Use the Panel class or a subclass of it to use or implement custom child positioning.

During the layout process, the virtual MeasureOverride method is called for each element to tell an element the size that is available for it to occupy and to allow the element to request the dimensions that it desires. This method accepts the available width and height and returns the desired size of an element. A Text element implements this method to calculate and return the size needed to display its text, while an Image element returns the size of the image. A ContentElement object returns the desired size of its child element by calling the MeasureOverride method of its child element. To let your element fill the entire available space, set the desired size to the available size: protected virtual void MeasureOverride(int int out out availableWidth, availableHeight, int desiredWidth, int desiredHeight);

After the system knows the desired sizes of the elements, it calls the virtual ArrangeOverride method to let the element know the final size allocated for this component. A Panel component, for example, will use this method to arrange its child elements. You can further allocate and initialize objects that depend on the element s size like so: protected virtual void ArrangeOverride(int arrangeWidth, int arrangeHeight);

After all elements are measured and arranged, they need to be rendered on the display. This is done with the virtual method OnRender: public virtual void OnRender(DrawingContext dc); The method accepts a DrawingContext object (see Listing 11-36) that enables you to draw on the element s client area. The top-left corner of your element has the coordinates (0, 0). You can get the render size with the ActualWidth and ActualHeight properties or with the void GetRenderSize(out int width, out int height) method. The following code shows an OnRender implementation that will render an ellipse in the element s client area: public override void OnRender(DrawingContext dc) { base.OnRender(dc); dc.DrawEllipse(null, // brush: filling not supported new Pen(Colors.Blue), // pen this.ActualWidth / 2, // x this.ActualHeight / 2, // y this.ActualWidth / 2, // x radius this.ActualHeight / 2); // y radius }

Listing 11-36. The Microsoft.SPOT.Presentation.Media.DrawingContext Class using Microsoft.SPOT; using System; namespace Microsoft.SPOT.Presentation.Media { public class DrawingContext : DispatcherObject { public DrawingContext(Bitmap bmp); public DrawingContext(int width, int height); public Bitmap Bitmap { get; } public int Height { get; } public int Width { get; } public void BlendImage(Bitmap source, int destinationX, int destinationY, int sourceX, int sourceY, int sourceWidth, int sourceHeight, ushort opacity); public void Clear(); public void DrawEllipse(Brush brush, Pen pen, int x, int y, int xRadius, int yRadius); public void DrawImage(Bitmap source, int x, int y); public void DrawImage(Bitmap source, int destinationX, int destinationY, int sourceX, int sourceY, int sourceWidth, int sourceHeight); public void DrawLine(Pen pen, int x0, int y0, int x1, int y1); public void DrawPolygon(Brush brush, Pen pen, int[] pts); public void DrawRectangle(Brush brush, Pen pen, int x, int y, int width, int height); public void DrawText(string text, Font font, Color color, int x, int y); public bool DrawText(ref string text, Font font, Color color, int x, int y, int width, int height, TextAlignment alignment, TextTrimming trimming); public void GetClippingRectangle(out int x, out int y, out int width, out int height); public void PopClippingRectangle(); public void PushClippingRectangle(int x, int y, int width, int height); public void SetPixel(Color color, int x, int y); public void Translate(int dx, int dy); } }