V 1.0 Programming III. Visual/FrameworkElement descendants

V 1.0ÓE-NIK, 2014 Possibilities in WPF Shapes (System.Windows.Shapes.Shape descendants) –Simple, pre-defined shapes –Can be (mostly) accessed from the Toolboxban –FrameworkElement descendants: input, focus, events… –Max (-100) objects Drawing objects (System.Windows.Media.Drawing namespace) –No built-in support for event management –No built-in support for display, requires a hosting object –Usually driven from the XAML, using converters/geometry instances –Faster (max objects) Visual descendants (System.Windows.Media.Visual) –Most complicated, fastest ( objects) –We always use C# code 2

V 1.0ÓE-NIK, 2014 Visual Provides ways to render the given type Special descendant classes: DrawingVisual (2D), Viewport3DVisual (3D) Two usages: –We add visual children to the visual element, and the children do the rendering –We define our own class + render method using the FrameworkElement class 3

V 1.0ÓE-NIK, 2014 DrawingVisual 2D drawing –We have to call RenderOpen(), which will return a DrawingContext instance We can use the DrawingContext method to „fill” the Visual (or the DrawingGroup) with content –DrawEllipse() –DrawRectangle() –DrawGeometry() –DrawImage() … –Retained mode: it only stores the objects to be drawn –Internally, the objects to be drawn are stored inside a Drawing (in a DrawingGroupb). –The time of the drawing is decided by the system / OS 4

V 1.0ÓE-NIK, 2014 Usage of Visuals – 1 st usage public partial class MainWindow : Window { DrawingVisual visualChild; //We could create a FrameworkElement public MainWindow() //descendant and put it to the { //MainWindow InitializeComponent(); visualChild = new DrawingVisual(); using (DrawingContext context = visualChild.RenderOpen()) { context.DrawEllipse(Brushes.Red, null, new Point(50, 50),10,10); } AddVisualChild(visualChild); AddLogicalChild(visualChild); } protected override int VisualChildrenCount { get { return base.VisualChildrenCount + 1; } } protected override Visual GetVisualChild(int index) { if (index < base.VisualChildrenCount) return base.GetVisualChild(index); else return visualChild; } 5

V 1.0ÓE-NIK, 2014 Usage of Visuals – 2 nd usage We create/use a FrameworkElement descendant Wen it is displayed, the OnRender() method is called –It can be overridden, it gets a DrawingContext typed parameter that can be used to draw to the Visual We can ask a re-draw using the InvalidateVisual method class MainWindow : Window //Typically we use a { //FrameworkElement descendant... protected override void OnRender(DrawingContext drawingContext) { drawingContext.DrawGeometry(Brushes.Blue, new Pen(Brushes.Red, 2), geometry); } 6

V 1.0ÓE-NIK, 2014 Example – Asteroids 7

V 1.0ÓE-NIK, 2014 Transformations Transform descendant (transformation matrix) –RotateTransform –ScaleTransform –SkewTransform –TranslateTransform –MatrixTransform –TransformGroup – multiple transformations 8

V 1.0ÓE-NIK, 2014 Applying tranformations UI elements –LayoutTransform (before the placement of the element) –RenderTransform (after the placement of the element) Geometry: –Transform It does not modify the coordinates!! –By removing the transformation (xxx.Transform = Transform.Identity) the object moves back to its original state –Can be a problem when detecting intersection/collision 9

V 1.0ÓE-NIK, 2014 Intersection (hit test) We have to create a combination of the two geometry instances, and check the surface area (GetArea()) Warning: the surface area for a LineGeometry is always zero – we have to “extend” the line to make it wider –geometry.GetWidenedPathGeometry(new Pen(Brushes.Blue, 2)) Geometry intersection = Geometry.Combine(geometry, otherGeometry, GeometryCombineMode.Intersect, null); return intersection.GetArea() != 0; 10

V 1.0ÓE-NIK, 2014 Exercise – Flappy Birds Turbo 11

V 1.0ÓE-NIK, 2014 Suggested approach Every game item should be created with a (0;0) centered geometry Before drawing / collision test, we transform into the appropriate position/rotation TransformGroup tg = new TransformGroup(); tg.Children.Add(new TranslateTransform(cx, cy)); tg.Children.Add(new RotateTransform(degree, cx, cy)); Geometry copy = area.Clone(); copy.Transform = tg; return copy.GetFlattenedPathGeometry(); 12

V 1.0ÓE-NIK, 2014 Review 13 ApproachEvent managementUsageNo. of objects ShapeSeparately for every object XAML + Binding~100 DrawingThere is a host- object that handles events / input XAML + Binding + Converters (xxx  Geometry) ~1000 VisualThere is a host- object that handles events / input / render CS code: OnRender + DrawingContext + Geometry ~10000