How to build a Button in Xamarin?

یکشنبه 100/3/30 , 11:13 ص

Users are more affected by graphical user interfaces because it is both more attractive and saves them from having to go through difficult processes. In other words, graphical user interfaces turn the task of writing complex code into the push of a few buttons. Therefore, buttons play an important and effective role in applications and are used to do things easily. In this part of the tutorial, we will tell you how to create a button in designing and building applications .

What is a Button?

Button Reject GUI design field is any type of widget that is provided to users to perform events in a simple way. Buttons are also called command buttons because they perform user commands for certain events.

For example, pressing the Save button in some of the notifications that appear will save the files in a specified path. Or OK can be used to confirm the contents or close some windows.

Buttons are usually or often in the form of rectangles that are smaller in width than length and are used to perform user commands in a simple way. According to the text that is written on the button, users can identify the operation that each button performs and select and click the appropriate button to do their work based on their needs. Therefore, there may be several buttons in a window and each of them is used to do different things, users can understand the meaning according to the text written on each button and press the appropriate button.

The text that is written on each button is called Caption. When inserting a caption, be careful to write it related to the type of activity that the button performs.

Buttons can have different modes, and the user can do the following methods to perform the desired operation through the buttons:

- They can click on the available buttons.
- On touch screens, touch the buttons.
- If the buttons are in focus mode, press the Enter or Space bar arrow keys.
- Use shortcuts. This is the case when shortcuts are defined for buttons.

In this tutorial you will learn:

- How to create a Button in Xamarin.Forms using the XAML file?
- How to respond to the pressing of buttons?
- How to change the appearance of Button and create a graphical user interface for it?

Learn how to create a Button in Xamarin.Forms using Visual Studio

The requirements for doing this training are as follows:

- Install the latest version of Visual Studio 2019 on the system
- Install the latest version of Mobile development with .NET on the system

1- Open Visual Studio.
2- After opening Visual Studio, you must create a new black Xamarin.Forms app.
3- Choose a name for which you create. The name chosen in this article is Button Tutorial.

Note:

It is best to be careful in choosing names for projects and classes created.

Note:

The name selected for the project must be the same as the name chosen for the solution, so select the solution name ButtonTutorial as well.

- After naming, you must make sure that the system and application support the .NET Standard mechanism for shared code.

This mechanism is used to share code written in Xamarin.Forms with the C # programming language. If your system and app do not support this mechanism, it cannot have multiple outputs on multiple platforms at once. So that you can have multiple outputs on several different platforms at the same time.

- Click on MainPage.xaml in the Solution Explorer section of the ButtonTutorial project and replace the code below with all the code in that section.

<! -? xml version = "1.0" encoding = "utf-8"? -> <contentpage xmlns = "http://xamarin.com/schemas/2014/forms" xmlns: x = "http://schemas.microsoft.com/winfx/2009/xaml" x: class = "ButtonTutorial.MainPage"> <stacklayout margin = "20,35,20,20"> <button text = "Click me"> </button></stacklayout> </contentpage>

By entering this code, you specify a UI for the application, which includes a Button in StackLayout. Button.Text to display the key text that will be displayed on the button.

- Press the Start button or Ctrl + F5 key combination to see the result of the applied changes.

If you look closely, you will see that the Button occupies all the space on the screen.

Learn to respond to Button in Xamarin.Forms using Visual Studio

1- To respond to Button, you must change the Button definition in the MainPage.xaml file.
2- To do this, you must enter the code to create a handler for the Clicked event.

Replace the code below with all the code in the MainPage.xaml file.

<button text = "Click me" clicked = "OnButtonClicked"> </button>

By entering this code, you can set the Clicked event to event handler. The name of the event handler is OnButtonClicked.

3- Click on MainPage.xaml in the Solution Explorer section of the ButtonTutorial project.

4- Then double click on MainPage.xaml.cs to open it.

5- Add the OnButtonClicked event handler to the class by entering the following code.

void OnButtonClicked (object sender, EventArgs e) { (sender as Button). Text = "Click me again!"; }

The OnButtonClicked method is executed when the Button is pressed. The sender argument starts the Clicked event.

In addition to the Clicked event, there are other events such as Pressed and Released.

- Press the Start button or Ctrl + F5 key combination to see the result of the applied changes. In this case, you will notice the text change inside the button.

Learn how to change the appearance of Button in Xamarin.Forms using Visual Studio

1- In order to change the appearance of Button and create an attractive graphical user interface for it, you have to change the definition of Button in the MainPage.xaml file.
2- To do this, open MainPage.xaml and replace the code listed below with the code there.

<button text = "Click me" clicked = "OnButtonClicked" textcolor = "Blue" backgroundcolor = "Aqua" bordercolor = "Red" borderwidth = "5" cornerradius = "5" widthrequest = "150" heightrequest = "75"> </button>

By entering this code, you change the appearance of Button. The TextColor attribute is an attribute used to change or specify the color of a button. With the values ??you put in this attribute, you specify the color of the button.

The shape of the button is rectangular by default, which is less than its width, but the values ??in the CornerRadius attribute can soften the corners and turn it into other shapes, such as circles. Of course, to change the shape of the button, you can specify and change the values ??of WidthRequest and HeightRequest by decreasing or increasing the values.

The BackgroundColor attribute is used to change the background color of the button text. The values ??in the BorderColor attribute can specify the color of the perimeter around the button.

The BorderWidth attribute specifies the width of the button border, the higher the value of this attribute, the thicker the border, and the smaller the value of this attribute, the narrower the border.

- Press the Start button or Ctrl + F5 key combination to see the result of the applied changes. In this case, you will notice that the appearance of the button has changed and has been adjusted according to the changes you have made.

Learn how to create a Button in Xamarin.Forms using Visual Studio for Mac

The requirements for doing this training are as follows:

- Install the latest version of Visual Studio for Mac on the system
- Install the latest version of support platform for Android and iOS on the system
- Install the latest version of Xcode

1- Open Visual Studio.
2- After opening Visual Studio, you need to create a new black Xamarin.Forms app 3- Select the name for which you are creating. The name chosen in this article is ButtonTutorial.

Note:

It is best to be careful in choosing names for projects and classes created.

Note:

The name selected for the project must be the same as the name chosen for the solution, so select the solution name ButtonTutorial as well.

- After naming, you must make sure that the system and application support the .NET Standard mechanism for shared code.

- Click on MainPage.xaml in the Solution Pad section of the ButtonTutorial project and replace the code below with all the code in that section.

By entering this code, you specify a UI for the application, which includes a Button in StackLayout. Button.Text to display the key text that will be displayed on the button.

- Press the Start button or Ctrl + F5 key combination to see the result of the applied changes.

If you look closely, you will see that the Button occupies all the space on the screen.

Learn how to respond to Button in Xamarin.Forms using Visual Studio for Mac

1- To respond to Button, you must change the Button definition in the MainPage.xaml file.
2- To do this, you must enter the code to create a handler for the Clicked event.

Replace the code below with all the code in the MainPage.xaml file.

<button text = "Click me" clicked = "OnButtonClicked"> </button>

By entering this code, you can set the Clicked event to event handler. The name of the event handler is OnButtonClicked.

1- Click on MainPage.xaml in the Solution Pad section of the ButtonTutorial project.
2- Then double click on MainPage.xaml.cs to open it.
3- Add the OnButtonClicked event handler to the class by entering the following code.

void OnButtonClicked (object sender, EventArgs e) { (sender as Button). Text = "Click me again!"; }

The OnButtonClicked method is executed when the Button is pressed. The sender argument starts Clicked event on Clicked event, there are other events like Pressed and Released.

- Press the Start button or Ctrl + F5 key combination to see the result of the applied changes. In this case, you will notice the text change inside the button.

Learn how to change the appearance of Button in Xamarin.Forms using Visual Studio for Mac

1- To change the appearance of the Button and create an attractive graphical user interface for it, you must change the Button definition in the MainPage.xaml file.
2- To do this, open MainPage.xaml and replace the code below with the code below.

The shape of the decanter is rectangular by default, which is less than its length, but the values ??in the CornerRadius attribute can soften the corners and turn it into other shapes, such as a circle. Of course, to change the shape of the button, you can specify and change the values ??of WidthRequest and HeightRequest by decreasing or increasing the values.

The BackgroundColor attribute is used to change the background color of the button text. The values ??in the BorderColor attribute can specify the color of the perimeter around the button.

Source: https://www.dotnek.com/Blog/Apps/how-to-build-a-button-in-xamarin