# Bunifu Shapes ## Overview Bunifu Shapes is a great control for applying a geometrical set of items in our Win-Forms applications, thus creating a winning and presentable user interfaces, that effectively engage the users of your application. Let’s first take a look at the shapes rendered by the control in the figure below. ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MGnmEnQCBc5XBF552UM%2F-MGnrHZNs6wHzyOmQbVz%2Fshapes%201.gif?alt=media\&token=e667146b-c318-4548-8bb4-a8857ff3d554) ## Getting started with Bunifu Shapes Bunifu Shapes can be added to the Form by dragging it from the toolbox as shown from the following visual. Once dropped in the form, the shape control will be preset with a circle shape. ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MGnrvB6TMcFAJgObGny%2F-MGnxDpa6UunEb9fGWin%2Fshapes%202.gif?alt=media\&token=dad55dab-08bd-4d7f-b90d-55a83d6609c7) Let's dive deep into the properties of this control and draw ideas of how we’ll use them to create awesome user interfaces. ## Customizing Bunifu Shapes Bunifu Shapes gives us more control as developers to set our own preferences for the shapes and bring out the full potential of creativeness. The following figure summarizes the commonly used properties t create custom displays for the shapes i.e.: `BorderColor`, `BackgroundColor`, `Size` and `ShapeType` ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MGnrvB6TMcFAJgObGny%2F-MGoBX6bAA7nnUkZgL4o%2Fshapes%204.gif?alt=media\&token=eace4378-1810-4ff2-8666-c4319855a092) ### Customizing the border of the shape #### The`BorderColor` property The `BorderColor` property allows us to get the current color or set a new color value to the shape. #### The `BorderThickness` property The `BorderThickness` property allows us to get the current value or set a new integral value to the border thickness of the shape. ### **Backdropping a color in the background of the shape** The `FillColor` property enables us to apply a background color for the shape. It allows us to get the current color value or set a new color to the shape. ### Changing the size of the shape The default `height` and `width` of the shape can be changed by accessing the `Size` property or adjust the `Height` or `Width` properties individually in the properties pane. ### Changing the shape The preset shape can be changed using the `Shape` property. It also allows us also to get the current value of the shape. The current shape can be changed to either a circle, a square, a polygon, an oval, or a line shape. ## Working out with polygonal shapes ### Setting the number of sides to the polygon The number of sides of the polygon helps us to define the type of polygon we would love to have in our user interface. The default value can be changed using the `Sides` property. Just like the other properties, we can get the current value of the number of sides. The figure below shows the number of sides set to 8 defining an octagonal shape during the design mode. ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MGoDCtJWaHDa1_5i12o%2F-MGoGefWt968rTC5VZO1%2Fimage.png?alt=media\&token=5ce2a79c-579e-4c3d-a8a7-939c9ac2ab00) ### Changing the angle of the polygonal shape The `Angle` property allows us to set a new angle value or get the current integral value of the shape. Changing the current value renders a new viewpoint of the shape on the same axis. The Values of the angle can be set to a maximum value of 360 and a minimum value of 0. Negative values can also be assigned to the Angle property having values ranging from -0 to -360 hence having the shape move in an anticlockwise direction. The figure below shows the angle set to a value 72 thus the triangle shape moves 72 degrees clockwise in the same axis. ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MGoDCtJWaHDa1_5i12o%2F-MGoH4_GQxETbM0u6l8C%2Fimage.png?alt=media\&token=9bdcf277-6636-428b-bfe7-27ccd667cd0e) ### Rendering animation using polygonal shapes (Bonus section) From the properties discussed above, let’s utilize the properties to create something entertaining! The figure below is a sample Win-Forms application that utilizes Bunifu Shape control and using the Timer control of the Win-Forms and a Bunifu Slider to increase or decrease the speed of the rotating shape animation. Let’s have a glance of the visual below ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MGoDCtJWaHDa1_5i12o%2F-MGoJ4ceV7puL_if1zzs%2Fshapes%205.gif?alt=media\&token=79225e74-9645-4cff-8cea-b965d9f637ae) The code below helps us to achieve the above animation {% tabs %} {% tab title="C#" %} ```csharp private void timer1_Tick(object sender, EventArgs e) { bunifuShapes1.Angle += 5; bunifuShapes2.Angle += 5; bunifuShapes3.Angle -= 5; bunifuShapes4.Angle += 5; bunifuShapes5.Angle -= 5; bunifuShapes6.Angle += 5; bunifuShapes7.Angle += 5; bunifuShapes8.Angle += 5; bunifuShapes9.Angle -= 5; bunifuShapes10.Angle -=5; } private void bunifuHSlider1_Scroll(object sender, Utilities.BunifuSlider.BunifuHScrollBar.ScrollEventArgs e) { try { if (timer1.Interval<5) { timer1.Interval = 80; } timer1.Interval = timer1.Interval - bunifuHSlider1.Value; } catch(Exception c) { string stcktrace= c.StackTrace; } } ``` {% endtab %} {% tab title="VB.NET" %} ```cpp Private Sub timer1_Tick(ByVal sender As Object, ByVal e As EventArgs) bunifuShapes1.Angle += 5 bunifuShapes2.Angle += 5 bunifuShapes3.Angle -= 5 bunifuShapes4.Angle += 5 bunifuShapes5.Angle -= 5 bunifuShapes6.Angle += 5 bunifuShapes7.Angle += 5 bunifuShapes8.Angle += 5 bunifuShapes9.Angle -= 5 bunifuShapes10.Angle -=5 End Sub Private Sub bunifuHSlider1_Scroll(ByVal sender As Object, ByVal e As Utilities.BunifuSlider.BunifuHScrollBar.ScrollEventArgs) Try If timer1.Interval<5 Then timer1.Interval = 80 End If timer1.Interval = timer1.Interval - bunifuHSlider1.Value Catch c As Exception Dim stcktrace As String= c.StackTrace End Try End Sub ``` {% endtab %} {% endtabs %} ## The ShapeChanged event The `ShapeChanged` event is useful in situations where we want to make our code more extensible, and have an easy coding experience when dealing with one control, that can render different shapes. Imagine, we want to have the line shape assigned with a different `FillColor` value, while the other shapes are assigned a **transparent** value to the `FillColor` property. Or suppose we want to assign a different color for the `BorderColor` property on different shapes with the same one control! Isn’t that exciting? Using the `ShapeChanged` event it is possible to implement these kinds of use-cases. Other use cases of your choice, comparable to the ones we’ve mentioned, can be applied to this event. The `ShapeChanged` event can be accessed in the events property pane of your Visual Studio. The example below illustrates the use cases mentioned:
![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MGqjBow85UzxI1j_bDZ%2F-MGqjKJr0M88zT_4d50N%2Fshapes%206.gif?alt=media\&token=e79bb006-a9b4-4639-a930-b8161699335d) The code below helps us achieve the functionalities shown from the above visual {% tabs %} {% tab title="C#" %} ```csharp private void bunifuShapes1_ShapeChanged(object sender, Bunifu.UI.WinForms.BunifuShapes.ShapeChangedEventArgs e) { if (e.Shape == Bunifu.UI.WinForms.BunifuShapes.Shapes.Circle) { bunifuShapes1.FillColor = Color.DodgerBlue; bunifuShapes1.BorderColor= Color.DodgerBlue; shapeBunifuLabel.Text = "Circle"; } else if(e.Shape == Bunifu.UI.WinForms.BunifuShapes.Shapes.Rectangle) { bunifuShapes1.FillColor = Color.Transparent; bunifuShapes1.BorderColor = Color.FromArgb(64, 64, 64); shapeBunifuLabel.Text = "Rectangle"; } else if (e.Shape == Bunifu.UI.WinForms.BunifuShapes.Shapes.Line) { bunifuShapes1.FillColor = Color.FromArgb(64, 64, 64); shapeBunifuLabel.Text = "Line"; } else if (e.Shape == Bunifu.UI.WinForms.BunifuShapes.Shapes.Polygon) { bunifuShapes1.FillColor = Color.Transparent; bunifuShapes1.BorderColor = Color.FromArgb(64, 64, 64); shapeBunifuLabel.Text = "Polygon"; } else if (e.Shape == Bunifu.UI.WinForms.BunifuShapes.Shapes.Square) { bunifuShapes1.FillColor = Color.Transparent; bunifuShapes1.BorderColor = Color.DodgerBlue; shapeBunifuLabel.Text = "Square"; } else { bunifuShapes1.FillColor = Color.Transparent; bunifuShapes1.BorderColor = Color.FromArgb(64, 64, 64); shapeBunifuLabel.Text = "Oval"; } } ``` {% endtab %} {% tab title="VB.NET" %} ```cpp Private Sub bunifuShapes1_ShapeChanged(ByVal sender As Object, ByVal e As Bunifu.UI.WinForms.BunifuShapes.ShapeChangedEventArgs) If e.Shape = Bunifu.UI.WinForms.BunifuShapes.Shapes.Circle Then bunifuShapes1.FillColor = Color.DodgerBlue bunifuShapes1.BorderColor= Color.DodgerBlue shapeBunifuLabel.Text = "Circle" ElseIf e.Shape = Bunifu.UI.WinForms.BunifuShapes.Shapes.Rectangle Then bunifuShapes1.FillColor = Color.Transparent bunifuShapes1.BorderColor = Color.FromArgb(64, 64, 64) shapeBunifuLabel.Text = "Rectangle" ElseIf e.Shape = Bunifu.UI.WinForms.BunifuShapes.Shapes.Line Then bunifuShapes1.FillColor = Color.FromArgb(64, 64, 64) shapeBunifuLabel.Text = "Line" ElseIf e.Shape = Bunifu.UI.WinForms.BunifuShapes.Shapes.Polygon Then bunifuShapes1.FillColor = Color.Transparent bunifuShapes1.BorderColor = Color.FromArgb(64, 64, 64) shapeBunifuLabel.Text = "Polygon" ElseIf e.Shape = Bunifu.UI.WinForms.BunifuShapes.Shapes.Square Then bunifuShapes1.FillColor = Color.Transparent bunifuShapes1.BorderColor = Color.DodgerBlue shapeBunifuLabel.Text = "Square" Else bunifuShapes1.FillColor = Color.Transparent bunifuShapes1.BorderColor = Color.FromArgb(64, 64, 64) shapeBunifuLabel.Text = "Oval" End If End Sub ``` {% endtab %} {% endtabs %} ## Take-Away Bunifu Shapes lends us a basis and a framework for creativity in relation to physical objects and being physical beings, we automatically relate to shapes; we subconsciously connect them to physical objects. This can in turn influence how we feel about an idea hence integrating ith in our Win-Forms application