Applying borders in .NET MAUI

Howdy! 🙋‍♀️ Continuing with “☃️ Coding Winter 2021 – C # and .NET MAUI ❄️”initiative, today is #DayFive and we will be learning about Border in .NET MAUI!

Throughout our experience in Xamarin Forms, we have had the need to add Borders, and in order to achieve this, we have developed different “tactics” because we didn’t have a direct mechanism to do it. However, this made us use other controls that did not necessarily have this purpose, such as Frames for example, and it could alter the development time a bit.

I’m here to tell you that with .NET MAUI you will no longer have to do this !!! 💃 We have new Border control available to add to our UI! I invite you to read this article to know more about this! 🌟 🌟

Let’s start!

Knowing about Borders

Preview 9, .NET Maui has given us Microsoft.Maui.Graphics library which provides us with a consistent UI drawing API based on native graphics engines, thus making it easier for us to add borders, corners rendering, and shadows for most of the controls and layout contained in .NET MAUI. In this post, we will be focusing on the Borders.

The new Border Control allows us to add Borders to a single element as content, this one can be both a control and a Layout. This control brings us a very flexible behavior that enables independent control of each corners: top-left, top-right, bottom-left, bottom-right, allowing us to play in different ways with our user interface, some of those cases can be adding the border to a button and rounding the upper left and lower right corners.

And how can I implement it? 🧐

Let’s know the properties:

To do it, you can add some of the following properties:

🟠 Stroke: Sets the color that the border will take on.

🟠 StrokeThickness: It’s the thickness (width) of the Border.

🟠 StrokeDashOffset: It’s the distance within the dash pattern.

🟠 StrokeDashArray: Collection of values, which is responsible for specifying the Dash pattern and the spaces used for the border to implement.

🟠 StrokeLineCap: Defines the start and end stroke that the border will have. For the stroke shape, it receives the following values: Flat, Round, and Square.

🟠 StrokeMiterLimit: Limit on the ration of the miter length to half of the stroke thickness.

We also have the StrokeShape, this property allows us to modify the shape of the Stroke based on a Shape (the one you want), in addition to this Shape you can modify the edges as you need, for example, in case you want to modify the CornerRadius!

Among the available Shapes we have Rectangle, Ellipse, Polyline, among others. If you want to know more information about them you can read here.

Our final structure, have to be like this: