UWP Development, Pen and Shape

Overview of Graphics Processing in UWP

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.

Introduction to Pen

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.

using Windows.UI.Xaml.Media;
// Create a Pen object
var myPen = new Pen
{
    Brush = new SolidColorBrush(Windows.UI.Colors.Blue),
    Thickness = 2
};

Introduction to Shape

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.

Basic Pen Usage Example

The code below is a simple example of drawing a line on a Canvas using Pen in a UWP application.

<Canvas x:Name="myCanvas">
    <Path Stroke="{StaticResource MyPen}" Data="M 20,20 L 200,200" />
</Canvas>

private void DrawLine()
{
    var myPen = new Pen
    {
        Brush = new SolidColorBrush(Windows.UI.Colors.Red),
        Thickness = 3
    };
    
    var line = new Line
    {
        X1 = 20,
        Y1 = 20,
        X2 = 200,
        Y2 = 200,
        Stroke = myPen.Brush,
        StrokeThickness = myPen.Thickness
    };

    myCanvas.Children.Add(line);
}

Examples of Various Shapes

UWP allows you to use various Shapes. Below is an example of drawing a Rectangle and an Ellipse.

<Canvas x:Name="myCanvas">
    <Rectangle Width="100" Height="50" Fill="Green" />
    <Ellipse Width="100" Height="50" Fill="Blue" />
</Canvas>

private void DrawShapes()
{
    var rectangle = new Rectangle
    {
        Width = 100,
        Height = 50,
        Fill = new SolidColorBrush(Windows.UI.Colors.Green)
    };

    var ellipse = new Ellipse
    {
        Width = 100,
        Height = 50,
        Fill = new SolidColorBrush(Windows.UI.Colors.Blue)
    };

    myCanvas.Children.Add(rectangle);
    myCanvas.Children.Add(ellipse);
}

Adding Interactions

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.

private void myCanvas_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    var point = e.GetCurrentPoint(myCanvas).Position;
    var ellipse = new Ellipse
    {
        Width = 50,
        Height = 50,
        Fill = new SolidColorBrush(Windows.UI.Colors.Red),
        Margin = new Thickness(point.X, point.Y, 0, 0)
    };
    myCanvas.Children.Add(ellipse);
}

Utilizing the Combination of Pen and Shape in UWP

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.

private void DrawComplexShape()
{
    var myPath = new Path
    {
        Stroke = new SolidColorBrush(Windows.UI.Colors.Black),
        StrokeThickness = 1,
        Data = Geometry.Parse("M 10,100 C 20,10, 40,10, 50,100")
    };

    myCanvas.Children.Add(myPath);
}

Performance Optimization

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.

private void OptimizeRendering()
{
    var visualLayer = new DrawingVisual();
    using (var dc = visualLayer.RenderOpen())
    {
        for (int i = 0; i < 1000; i++)
        {
            dc.DrawEllipse(new SolidColorBrush(Colors.Blue), null, new Point(i * 10, i * 10), 5, 5);
        }
    }
}