Andrei Iacob Microsoft Student Partners
Agenda <ul><li>Intro </li></ul><ul><li>2D - Clasa Shape - Linii - alte forme primitive geometrice - Brushes & pens - Path ...
Intro <ul><li>XAMLPad </li></ul><ul><li>Cuvinte cheie: SVG, Media Integration Layer, FrameworkElement (UIElement), GDI+ </...
Ierarhia <ul><li>UIElement - FrameworkElement   - Shape (abstract)   - Ellipse   - Line   - Path   - Polygon   - Polyline ...
Lin e <ul><li>Propriet ăţi:  - X1, Y1, X2, Y2 – Double </li></ul><ul><li>- Stroke - Brush </li></ul>
Rectangle <ul><li>Proprietăţi - Width, Height – Double - Fill, Stroke – Brush - RadiusX, RadiusY – Double </li></ul>
Ellipse <ul><li>Proprietăţi - Width, Height – Double - Fill, Stroke – Brush </li></ul>
Polyline <ul><li>Proprietăţi - Points – PointCollection - Stroke, Fill – Brush </li></ul><ul><li>Exemplu: </li></ul><ul><l...
Polyline <ul><li>O spiral ă poly=new Polyline(); poly.Stroke = SystemColors.WindowTextBrush; </li></ul><ul><li>Panza.Child...
Polygon <ul><li>Proprietăţi - Points – PointCollection - Stroke, Fill – Brush </li></ul><ul><li>Exemplu: </li></ul><ul><li...
Brush <ul><li>Culori în WPF - 4 canale: Red, Green, Blue, Alpha - 16 biţi /culoare </li></ul><ul><li>SolidColorBrush </li>...
Brush <ul><li>LinearGradientBrush </li></ul><ul><li><Rectangle Width=&quot;80&quot; Height=&quot;60&quot;>    <Rectangle.F...
Brush <ul><li>RadialGradientBrush </li></ul><ul><li><Rectangle Width=&quot;200&quot; Height=&quot;150&quot;> </li></ul><ul...
Brush <ul><li>Alte brush-uri: - ImageBrush - DrawingBrush - VisualBrush </li></ul>
Pens <ul><li>StrokeThickness </li></ul><ul><li>StrokeDashArray </li></ul>
Path <ul><li>Cel mai puternic element grafic din WPF </li></ul><ul><li>Proprietăţi: Stroke, Fill, Data (conţinutul) </li><...
Path <ul><li>Geometrii: - LineGeometry - RectangleGeometry - EllipseGeometry - GeometryGroup - CombinedGeometry - PathGeom...
Geometrii <ul><li>LineGeometry  <Path Stroke=&quot;Black&quot;>   <Path.Data> </li></ul><ul><li><LineGeometry StartPoint=&...
Geometrii <ul><li>EllipseGeometry <Path Stroke=&quot;Black&quot;> </li></ul><ul><li><Path.Data> </li></ul><ul><li><Ellipse...
Geometrii <ul><li>PathGeometry <Path Fill=&quot;Cyan&quot; Stroke=&quot;Black&quot;>    <Path.Data>    <PathGeometry>    <...
Geometrii <ul><li>StreamGeometry   <Path Fill=&quot;Cyan&quot; Stroke=&quot;Black&quot; Data=&quot;M 0,0 L 50,0 50,50 0,50...
Geometrii <ul><li>StreamGeometry   </li></ul>M x y Move Moveto x y L x y Line H x Horizontal line V y Vertical line A xr y...
Transformări <ul><li>RenderTransform </li></ul><ul><li>LayoutTransform </li></ul><ul><li>Tipuri de transformări: - Transla...
XAML Exploitation <ul><li>StringReader reader = new StringReader( this.DocumentRoot.TextBox. Text);    XmlReader xmlReader...
XAML Exploitation <ul><li>string StrXaml=“<Rectangle Width=‘100’ Height=‘100’ Stroke=‘Blue’>”; StringReader strreader = ne...
Upcoming SlideShare
Loading in...5
×

Wpf Workgroup 3

2,101

Published on

The third WPF workgroup at FCS, UAIC

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,101
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wpf Workgroup 3

  1. 1. Andrei Iacob Microsoft Student Partners
  2. 2. Agenda <ul><li>Intro </li></ul><ul><li>2D - Clasa Shape - Linii - alte forme primitive geometrice - Brushes & pens - Path , “geometrii” şi mini-limbajul său - Transform ări </li></ul><ul><li>XAML exploitation </li></ul>
  3. 3. Intro <ul><li>XAMLPad </li></ul><ul><li>Cuvinte cheie: SVG, Media Integration Layer, FrameworkElement (UIElement), GDI+ </li></ul>
  4. 4. Ierarhia <ul><li>UIElement - FrameworkElement - Shape (abstract) - Ellipse - Line - Path - Polygon - Polyline - Rectangle </li></ul>
  5. 5. Lin e <ul><li>Propriet ăţi: - X1, Y1, X2, Y2 – Double </li></ul><ul><li>- Stroke - Brush </li></ul>
  6. 6. Rectangle <ul><li>Proprietăţi - Width, Height – Double - Fill, Stroke – Brush - RadiusX, RadiusY – Double </li></ul>
  7. 7. Ellipse <ul><li>Proprietăţi - Width, Height – Double - Fill, Stroke – Brush </li></ul>
  8. 8. Polyline <ul><li>Proprietăţi - Points – PointCollection - Stroke, Fill – Brush </li></ul><ul><li>Exemplu: </li></ul><ul><li><Polyline Stroke=&quot;Blue” Points=&quot;0,80 60,80 65,50 68,110 73,80 85,80 90,50 93,110 98,80 210,80&quot; /> </li></ul>
  9. 9. Polyline <ul><li>O spiral ă poly=new Polyline(); poly.Stroke = SystemColors.WindowTextBrush; </li></ul><ul><li>Panza.Children.Add(poly); </li></ul><ul><li>Point[] pts=new Point[numpts]; </li></ul><ul><li>for (int i=0;i<numpts;i++) </li></ul><ul><li>{ </li></ul><ul><li>double angle = i * 2 * Math.PI / (numpts/revs); </li></ul><ul><li>double scale = 250 * ( 1 - (double)i/numpts); </li></ul><ul><li>pts[i].X = scale * Math.Cos(angle); </li></ul><ul><li>pts[i].Y = scale * Math.Sin(angle); </li></ul><ul><li>} </li></ul><ul><li>poly.Points = new PointCollection(pts); </li></ul>
  10. 10. Polygon <ul><li>Proprietăţi - Points – PointCollection - Stroke, Fill – Brush </li></ul><ul><li>Exemplu: </li></ul><ul><li><Poly gon Stroke=&quot;Blue” Points=&quot;0,80 60,80 65,50 68,110 73,80 85,80 90,50 93,110 98,80 210,80&quot; /> </li></ul>
  11. 11. Brush <ul><li>Culori în WPF - 4 canale: Red, Green, Blue, Alpha - 16 biţi /culoare </li></ul><ul><li>SolidColorBrush </li></ul>
  12. 12. Brush <ul><li>LinearGradientBrush </li></ul><ul><li><Rectangle Width=&quot;80&quot; Height=&quot;60&quot;> <Rectangle.Fill> <LinearGradientBrush StartPoint=&quot;0,0&quot; EndPoint=&quot;1,1&quot;> <LinearGradientBrush.GradientStops> <GradientStop Color=&quot;Black&quot; Offset=&quot;0&quot; /> <GradientStop Color=&quot;White&quot; Offset=&quot;1&quot; /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </li></ul>0,1 0,0 1,0 1,1
  13. 13. Brush <ul><li>RadialGradientBrush </li></ul><ul><li><Rectangle Width=&quot;200&quot; Height=&quot;150&quot;> </li></ul><ul><li><Rectangle.Fill> </li></ul><ul><li><RadialGradientBrush Center=&quot;0.5,0.4&quot; RadiusX=&quot;0.3” RadiusY=&quot;0.5” GradientOrigin=&quot;0.25,0.4&quot;> </li></ul><ul><li><RadialGradientBrush.GradientStops> </li></ul><ul><li><GradientStop Color=&quot;White&quot; Offset=&quot;0&quot; /> </li></ul><ul><li><GradientStop Color=&quot;DarkBlue&quot; Offset=&quot;1&quot; /> </li></ul><ul><li></RadialGradientBrush.GradientStops> </li></ul><ul><li></RadialGradientBrush> </li></ul><ul><li></Rectangle.Fill> </li></ul><ul><li></Rectangle> </li></ul>
  14. 14. Brush <ul><li>Alte brush-uri: - ImageBrush - DrawingBrush - VisualBrush </li></ul>
  15. 15. Pens <ul><li>StrokeThickness </li></ul><ul><li>StrokeDashArray </li></ul>
  16. 16. Path <ul><li>Cel mai puternic element grafic din WPF </li></ul><ul><li>Proprietăţi: Stroke, Fill, Data (conţinutul) </li></ul><ul><li>Are ca şi conţinut o “Geometrie” </li></ul>
  17. 17. Path <ul><li>Geometrii: - LineGeometry - RectangleGeometry - EllipseGeometry - GeometryGroup - CombinedGeometry - PathGeometry - StreamGeometry </li></ul>
  18. 18. Geometrii <ul><li>LineGeometry <Path Stroke=&quot;Black&quot;> <Path.Data> </li></ul><ul><li><LineGeometry StartPoint=&quot;10 10&quot; EndPoint=&quot;10 100&quot; /> </Path.Data> </Path> </li></ul><ul><li>RectangleGeometry <Path Fill=&quot;Blue&quot;> <Path.Data> <RectangleGeometry Rect=&quot;0, 0, 40, 80&quot; /> </Path.Data> </Path> </li></ul>
  19. 19. Geometrii <ul><li>EllipseGeometry <Path Stroke=&quot;Black&quot;> </li></ul><ul><li><Path.Data> </li></ul><ul><li><EllipseGeometry Center=&quot;20, 40&quot; RadiusX=&quot;10&quot; RadiusY=&quot;30&quot; /> </li></ul><ul><li></Path.Data> </li></ul><ul><li></Path> </li></ul><ul><li>GeometryGroup <Path Fill=&quot;Cyan&quot; Stroke=&quot;Black&quot;> <Path.Data> <GeometryGroup> <EllipseGeometry Center=&quot;20, 40&quot; RadiusX=&quot;20&quot; RadiusY=&quot;40&quot; /> <EllipseGeometry Center=&quot;20, 40&quot; RadiusX=&quot;10&quot; RadiusY=&quot;30&quot; /> </GeometryGroup> </Path.Data> </Path> </li></ul>
  20. 20. Geometrii <ul><li>PathGeometry <Path Fill=&quot;Cyan&quot; Stroke=&quot;Black&quot;> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure> <PathFigure.Segments> <StartSegment Point=&quot;0,0&quot; /> <LineSegment Point=&quot;50,0&quot; /> <LineSegment Point=&quot;50,50&quot; /> <LineSegment Point=&quot;0,50&quot; /> <CloseSegment /> </PathFigure.Segments> </PathFigure> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> </li></ul>
  21. 21. Geometrii <ul><li>StreamGeometry <Path Fill=&quot;Cyan&quot; Stroke=&quot;Black&quot; Data=&quot;M 0,0 L 50,0 50,50 0,50 Z&quot; /> </li></ul>
  22. 22. Geometrii <ul><li>StreamGeometry </li></ul>M x y Move Moveto x y L x y Line H x Horizontal line V y 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
  23. 23. Transformări <ul><li>RenderTransform </li></ul><ul><li>LayoutTransform </li></ul><ul><li>Tipuri de transformări: - TranslateTransform - ScaleTransform - SkewTransform - RotateTransform - MatrixTransform - TransformGroup </li></ul>
  24. 24. XAML Exploitation <ul><li>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) ;    } </li></ul>
  25. 25. XAML Exploitation <ul><li>string StrXaml=“<Rectangle Width=‘100’ Height=‘100’ Stroke=‘Blue’>”; StringReader strreader = new StringReader(StrXaml); XmlTextReader xmlreader = new XmlTextReader(strreader); object obj = XamlReader.Load(xmlreader); </li></ul><ul><li>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 </li></ul>

×