{"id":37497,"date":"2024-11-01T09:58:02","date_gmt":"2024-11-01T09:58:02","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=37497"},"modified":"2024-11-01T11:02:29","modified_gmt":"2024-11-01T11:02:29","slug":"uwp-development-pen-and-shape","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/37497\/","title":{"rendered":"UWP Development, Pen and Shape"},"content":{"rendered":"
\n
\n

UWP (Universal Windows Platform) is a platform provided by Microsoft that allows applications to be developed for various devices running Windows 10. This article will explain in detail how to draw graphics using Pen and Shape in UWP.<\/p>\n<\/header>\n

\n

Overview of Graphics Processing in UWP<\/h2>\n

In UWP, XAML and C# are used for graphics processing, enabling developers to easily and quickly create UIs and implement interactions with users. Pen and Shape play important roles in this graphic implementation.<\/p>\n<\/section>\n

\n

Introduction to Pen<\/h2>\n

The Pen object is a tool used to draw lines, curves, or other paths. The Pen can specify the thickness, color, style, and more of the line.<\/p>\n

using Windows.UI.Xaml.Media;\n\/\/ Create a Pen object\nvar myPen = new Pen\n{\n    Brush = new SolidColorBrush(Windows.UI.Colors.Blue),\n    Thickness = 2\n};<\/code><\/pre>\n<\/section>\n
\n
Introduction to Shape<\/h2>\n
Shape is a class for drawing basic shapes. There are several Shape classes available in UWP, including Rectangle, Ellipse, Line, Polygon, and Path. Each class is used to represent various shapes.<\/p>\n<\/section>\n
\n
Basic Pen Usage Example<\/h2>\n
The code below is a simple example of drawing a line on a Canvas using Pen in a UWP application.<\/p>\n
<Canvas x:Name=\"myCanvas\">\n    <Path Stroke=\"{StaticResource MyPen}\" Data=\"M 20,20 L 200,200\" \/>\n<\/Canvas>\n\nprivate void DrawLine()\n{\n    var myPen = new Pen\n    {\n        Brush = new SolidColorBrush(Windows.UI.Colors.Red),\n        Thickness = 3\n    };\n    \n    var line = new Line\n    {\n        X1 = 20,\n        Y1 = 20,\n        X2 = 200,\n        Y2 = 200,\n        Stroke = myPen.Brush,\n        StrokeThickness = myPen.Thickness\n    };\n\n    myCanvas.Children.Add(line);\n}<\/code><\/pre>\n<\/section>\n
\n
Examples of Various Shapes<\/h2>\n
UWP allows you to use various Shapes. Below is an example of drawing a Rectangle and an Ellipse.<\/p>\n
<Canvas x:Name=\"myCanvas\">\n    <Rectangle Width=\"100\" Height=\"50\" Fill=\"Green\" \/>\n    <Ellipse Width=\"100\" Height=\"50\" Fill=\"Blue\" \/>\n<\/Canvas>\n\nprivate void DrawShapes()\n{\n    var rectangle = new Rectangle\n    {\n        Width = 100,\n        Height = 50,\n        Fill = new SolidColorBrush(Windows.UI.Colors.Green)\n    };\n\n    var ellipse = new Ellipse\n    {\n        Width = 100,\n        Height = 50,\n        Fill = new SolidColorBrush(Windows.UI.Colors.Blue)\n    };\n\n    myCanvas.Children.Add(rectangle);\n    myCanvas.Children.Add(ellipse);\n}<\/code><\/pre>\n<\/section>\n
\n
Adding Interactions<\/h2>\n
After drawing graphics with Pen and Shape, you can add interactions with users. For example, here is how to change the color of a shape when the mouse is clicked.<\/p>\n
private void myCanvas_PointerPressed(object sender, PointerRoutedEventArgs e)\n{\n    var point = e.GetCurrentPoint(myCanvas).Position;\n    var ellipse = new Ellipse\n    {\n        Width = 50,\n        Height = 50,\n        Fill = new SolidColorBrush(Windows.UI.Colors.Red),\n        Margin = new Thickness(point.X, point.Y, 0, 0)\n    };\n    myCanvas.Children.Add(ellipse);\n}<\/code><\/pre>\n<\/section>\n
\n
Utilizing the Combination of Pen and Shape in UWP<\/h2>\n
Pen and Shape can be used together to create complex graphics easily. For example, it is possible to combine multiple Shapes to create a complex figure. Additionally, the path of the Shape can be drawn using the Pen.<\/p>\n
private void DrawComplexShape()\n{\n    var myPath = new Path\n    {\n        Stroke = new SolidColorBrush(Windows.UI.Colors.Black),\n        StrokeThickness = 1,\n        Data = Geometry.Parse(\"M 10,100 C 20,10, 40,10, 50,100\")\n    };\n\n    myCanvas.Children.Add(myPath);\n}<\/code><\/pre>\n<\/section>\n
\n
Performance Optimization<\/h2>\n
Optimizing performance while using Pen and Shape in UWP is very important. Especially when drawing a large number of shapes, performance degradation might occur, so batching and offscreen rendering should be considered.<\/p>\n
private void OptimizeRendering()\n{\n    var visualLayer = new DrawingVisual();\n    using (var dc = visualLayer.RenderOpen())\n    {\n        for (int i = 0; i < 1000; i++)\n        {\n            dc.DrawEllipse(new SolidColorBrush(Colors.Blue), null, new Point(i * 10, i * 10), 5, 5);\n        }\n    }\n}<\/code><\/pre>\n<\/section>\n