WPO 4

In WPO 4 wordt het tekenen van allerhande geometrische figuren behandeld. Sommige elementen binnen de toolbox van Visual Studio (zoals een canvas) laten toe om grafische constructies zelf uit te tekenen. De voorbeelden die hieronder aangehaald worden, zijn gebaseerd op de canvas als tekenveld. Het tekenen van objecten verloopt steeds in stappen: het aanmeken van het object met alle eigenschappen en het achteraf toevoegen van dit object aan de canvas.

Hieronder wordt het aanmaken van een aantal object geïllustreerd. Als canvas wordt hier "cvs" gebruikt.

Tekenen van een lijn

// create a line object
Line ln = new Line();
// give the line the red color -> we use stroke for lines and contours
ln.Stroke = new SolidColorBrush(Colors.Red);
// give the line a given width of 5 pixels
ln.StrokeThickness = 5;
// set X and Y coordinates to the line 
ln.X1 = 0;
ln.X2 = cvs.Width;
ln.Y1 = cvs.Height;
ln.Y2 = cvs.Height;

Tekenen van een rechthoek

// create a rectangle object
Rectangle rect = new Rectangle();
// set contour width and color
rect.Stroke = new SolidColorBrush(Colors.GreenYellow);
rect.StrokeThickness = 1;
// position the rectangle against a canvas: 
// here 10,10 pixels from the upper left corner of the canvas
Canvas.SetLeft(rect, 10);
Canvas.SetTop(rect, 10);
// set width and height of our rectangle
rect.Height = 100;
rect.Width = 100;

Tekenen van een cirkel (ellips)

// create an ellips object
Ellipse el = new Ellipse();
// set contour color and width
el.Stroke = new SolidColorBrush(Color.FromArgb(255, 0, 200, 0));
el.StrokeThickness = 5;
// set the ellips width and height, if both are equal we obtain a circle
el.Width = 25;
el.Height = 25;
// position the rectangle against a canvas: 
// here 10,10 pixels from the upper left corner of the canvas
Canvas.SetTop(el, 10);
Canvas.SetLeft(el, 10);

Tekenen van een balk (gevulde rechthoek)

// create a rectangle object
Rectangle rect = new Rectangle();
// set area color
rect.Fill = new SolidColorBrush(Colors.GreenYellow);
// position the rectangle against a canvas: 
// here 10,10 pixels from the upper left corner of the canvas
Canvas.SetLeft(rect, 10);
Canvas.SetTop(rect, 10);
// set width and height of our rectangle
rect.Height = 100;
rect.Width = 100;

Tekenen van een schijf (gevulde ellips)

// create an ellips object
Ellipse el = new Ellipse();
// set area color
el.Fill = new SolidColorBrush(Color.FromArgb(255, 0, 200, 0));
// set the ellips width and height, if both are equal we obtain a circle
el.Width = 25;
el.Height = 25;
// position the rectangle against a canvas: 
// here 10,10 pixels from the upper left corner of the canvas
Canvas.SetTop(el, 10);
Canvas.SetLeft(el, 10);

Nadat deze getekend zijn kunnen die toegevoegd worden aan de canvas. Het toevoegen gebeurt zoals hieronder weergegeven.

Toevoegen van de getekende objecten aan de tekencanvas ("cvs")

// add line to canvas
cvs.Children.Add(ln);
// add ellips to canvas
cvs.Children.Add(el);
// add rectangle to canvas
cvs.Children.Add(rect);

De canvas verwijderen kan met een eenvoudige regel code

cvs.Children.Clear();

Assenstelsel van de canvas

Merk op dat alle objecten (met uitzondering van de lijn) steeds vanuit het linkerhoekpunt van het object getekend worden. Indien het object een hoogte en breedte heeft, dan zal het object vanuit dat punt naar links en naar onder getekend worden. Het assenstelsel van de canvas loopt zoals in de meeste andere programmeeromgevingen van links naar rechts en van boven naar onder toe.

Kleuren

In WPF wordt (toch in de oefeningen) er bijna uitsluitend met een brush gewerkt. In bovenstaande voorbeelden is aangetoond hoe men kleur kan toewijzen aan een object. Het toewijzen van kleuren aan objecten kan op verschillende manieren:

// get a color from 4 gradients 
// Alpha = 255, Red = 0, Green = 255, Blue = 255 -> gives a color between blue and green
// note that the first gradient specefies the transparancy: 
// 0 = fully transparant, 255 = fully opaque
Color clr = Color.FromArgb(255,0,255,255);
// we can also do it without transparancy
clr = Color.FromRgb(0,255,255);
// we can also choose a predefined color from WPF
// note the difference between Color and Colors
clr = Colors.Black;
// assigning the color
rect.Fill = new SolidColorBrush(clr);
el.Fill = new SolidColorBrush(clr);

Het is dus volledig mogelijk om zelf een kleur samen te stellen uit 3 of 4 waarden. Indit geval geeft de eerste waarde de doorzichtigheid (alfa) gevolgd door de rode, groene en blauwe kleurcomponent. Alle componenten zijn hierbij begrensd tussen 0 en 255 (inclusief). Het datatype van de componenten is steeds een byte. Het is dus noodzakelijk om de gewenste typecast te doen indien men vanuit een integer of ander type vertrekt. Het is echter ook mogelijk om vanuit de vooropgestelde kleure van WPF te vertrekken.