Wpf Workgroup 3

Slide 1: Andrei Iacob Microsoft Student Partners

Slide 2: Agenda • Intro • 2D - Clasa Shape - Linii - alte forme primitive geometrice - Brushes & pens - Path, “geometrii” şi mini-limbajul său - Transformări • XAML exploitation

Slide 3: Intro • XAMLPad • Cuvinte cheie: SVG, Media Integration Layer, FrameworkElement (UIElement), GDI+

Slide 4: Ierarhia • UIElement - FrameworkElement - Shape (abstract) - Ellipse - Line - Path - Polygon - Polyline - Rectangle

Slide 5: Line • Proprietăţi: - X1, Y1, X2, Y2 – Double - Stroke - Brush

Slide 6: Rectangle • Proprietăţi - Width, Height – Double - Fill, Stroke – Brush - RadiusX, RadiusY – Double

Slide 7: Ellipse • Proprietăţi - Width, Height – Double - Fill, Stroke – Brush

Slide 8: Polyline • Proprietăţi - Points – PointCollection - Stroke, Fill – Brush • Exemplu: <Polyline Stroke=\"Blue” Points=\"0,80 60,80 65,50 68,110 73,80 85,80 90,50 93,110 98,80 210,80\" />

Slide 9: Polyline • O spirală poly=new Polyline(); poly.Stroke = SystemColors.WindowTextBrush; Panza.Children.Add(poly); Point[] pts=new Point[numpts]; for (int i=0;i<numpts;i++) { double angle = i * 2 * Math.PI / (numpts/revs); double scale = 250 * ( 1 - (double)i/numpts); pts[i].X = scale * Math.Cos(angle); pts[i].Y = scale * Math.Sin(angle); } poly.Points = new PointCollection(pts);

Slide 10: Polygon • Proprietăţi - Points – PointCollection - Stroke, Fill – Brush • Exemplu: <Polygon Stroke=\"Blue” Points=\"0,80 60,80 65,50 68,110 73,80 85,80 90,50 93,110 98,80 210,80\" />

Slide 11: Brush • Culori în WPF - 4 canale: Red, Green, Blue, Alpha - 16 biţi/culoare • SolidColorBrush

Slide 12: Brush 0,0 1,0 • LinearGradientBrush <Rectangle Width=\"80\" Height=\"60\"> 0,1 1,1 <Rectangle.Fill> <LinearGradientBrush StartPoint=\"0,0\" EndPoint=\"1,1\"> <LinearGradientBrush.GradientStops> <GradientStop Color=\"Black\" Offset=\"0\" /> <GradientStop Color=\"White\" Offset=\"1\" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>

Slide 13: Brush • RadialGradientBrush <Rectangle Width=\"200\" Height=\"150\"> <Rectangle.Fill> <RadialGradientBrush Center=\"0.5,0.4\" RadiusX=\"0.3” RadiusY=\"0.5” GradientOrigin=\"0.25,0.4\"> <RadialGradientBrush.GradientStops> <GradientStop Color=\"White\" Offset=\"0\" /> <GradientStop Color=\"DarkBlue\" Offset=\"1\" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Rectangle.Fill> </Rectangle>

Slide 14: Brush • Alte brush-uri: - ImageBrush - DrawingBrush - VisualBrush

Slide 15: Pens • StrokeThickness • StrokeDashArray

Slide 16: Path • Cel mai puternic element grafic din WPF • Proprietăţi: Stroke, Fill, Data (conţinutul) • Are ca şi conţinut o “Geometrie”

Slide 17: Path • Geometrii: - LineGeometry - RectangleGeometry - EllipseGeometry - GeometryGroup - CombinedGeometry - PathGeometry - StreamGeometry

Slide 18: Geometrii • LineGeometry <Path Stroke=\"Black\"> <Path.Data> <LineGeometry StartPoint=\"10 10\" EndPoint=\"10 100\" /> </Path.Data> </Path> • RectangleGeometry <Path Fill=\"Blue\"> <Path.Data> <RectangleGeometry Rect=\"0, 0, 40, 80\" /> </Path.Data> </Path>

Slide 19: Geometrii • EllipseGeometry <Path Stroke=\"Black\"> <Path.Data> <EllipseGeometry Center=\"20, 40\" RadiusX=\"10\" RadiusY=\"30\" /> </Path.Data> </Path> • GeometryGroup <Path Fill=\"Cyan\" Stroke=\"Black\"> <Path.Data> <GeometryGroup> <EllipseGeometry Center=\"20, 40\" RadiusX=\"20\" RadiusY=\"40\" /> <EllipseGeometry Center=\"20, 40\" RadiusX=\"10\" RadiusY=\"30\" /> </GeometryGroup> </Path.Data> </Path>

Slide 20: Geometrii • PathGeometry <Path Fill=\"Cyan\" Stroke=\"Black\"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure> <PathFigure.Segments> <StartSegment Point=\"0,0\" /> <LineSegment Point=\"50,0\" /> <LineSegment Point=\"50,50\" /> <LineSegment Point=\"0,50\" /> <CloseSegment /> </PathFigure.Segments> </PathFigure> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path>

Slide 21: Geometrii • StreamGeometry <Path Fill=\"Cyan\" Stroke=\"Black\" Data=\"M 0,0 L 50,0 50,50 0,50 Z\" />

Slide 22: Geometrii • StreamGeometry Mxy Move Moveto x y Lxy Line Hx Horizontal line Vy Vertical line A xr yr a i j x y Arc Arc pana la x y din elipsa xr yr cu a grade i:1 LargeArc j:1 Clockwise C x1 y1 x2 y2 x3 y3 Cubic Bezier Bezier pana la x3 y3, cu x1 y1 x2 y2 ca puncte de control S x2 y2 x3 y3 Smooth Bezier Q x1 y1 x2 y2 Quadratic Bezier Z Close

Slide 23: Transformări • RenderTransform • LayoutTransform • Tipuri de transformări: - TranslateTransform - ScaleTransform - SkewTransform - RotateTransform - MatrixTransform - TransformGroup

Slide 24: XAML Exploitation • StringReader reader = new StringReader( this.DocumentRoot.TextBox. Text); XmlReader xmlReader = XmlReader.Create( reader); try { Control dynamicControl = (Control)XamlReader .Load(xmlReader) ; this.DocumentRoot. Grid.Children. Add(dynamicContr ol); } catch (Exception ex) { MessageBox.Show( ex.Message) ; }

Slide 25: XAML Exploitation • string StrXaml=“<Rectangle Width=‘100’ Height=‘100’ Stroke=‘Blue’>”; StringReader strreader = new StringReader(StrXaml); XmlTextReader xmlreader = new XmlTextReader(strreader); object obj = XamlReader.Load(xmlreader); • Uri uri = new Uri(“pack://application:,,,/LoadXaml.xml”); Stream stream = Application.GetResourceStream(uri).Stream; FrameworkElement el = XamlReader.Load(stream) as FrameworkElement; Button btn = el.FindName(“Buton”) as Button