How to build a Button in Xamarin?
Buttons are also called command buttons because they execute user commands for specific events, which is discussed in more detail below in How to Build a Button in Xamarin.
|
10 minute(s) read
|
Published on: Mar 21, 2021
Updated on: Dec 14, 2021
|
Users are more affected by graphical user interfaces because they are both more attractive and save them from going through difficult processes. In other words, graphical user interfaces turn writing complex code into the push of a few buttons. Therefore, buttons play an important and effective role in applications and can easily do things. This part of the tutorial will tell you how to create buttons in designing and building applications.
What is a Button?
Buttons Reject GUI design field is any type of widget provided to users to perform events simply. Buttons are also called command buttons because they perform user commands for certain events.
For example, pressing the Save buttons 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 rectangles smaller in width than length and are used to perform user commands simply. According to the text written on the button, users can identify the operation that each button performs and select and click the appropriate buttons 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 buttons 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 buttons perform.
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 Buttons' appearance and create a graphical user interface for them?
Learn how to create this in Xamarin-Forms using VisualStudio
The requirements for doing this training are as follows:
- Install the latest version of VisualStudio 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 you create. The name chosen in this article is Buttons Tutorial.
Note:
It is best to choose 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 ButtonsTutorial.
- After naming, you must ensure that the system and application support the .NET Standard mechanism for shared code.
This mechanism shares 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.
By entering this code, you specify a UI for the application, including Buttons in StackLayout. Button. Text to display the key text that will be displayed on the button.
- Press the Start buttons or Ctrl-F5 key combination to see the result of the applied changes.
If you look closely, you will see that the Buttons occupy all the space on the screen.
Learn to respond to this in Xamarin.Forms using Visual Studio
1- To respond to Buttons, 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.
You can set the Clicked event to an event handler by entering this code. 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.
The OnButtonClicked method is executed when the button is pressed. The sender argument starts the Clicked event.
In addition to the Clicked event, other events such as Pressed and Released.
- Press the Start buttons or Ctrl-F5 key combination to see the result of the applied changes. In this case, you will notice the text change inside the buttons.
Learn how to change the appearance of the Button in Xamarin.Forms using Visual Studio
1- To change the Button's appearance 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.
By entering this code, you change the appearance of the 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 button's color.
The button's shape 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 button's shape, 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 attribute's value, 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 button's appearance 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 you are creating. The name chosen in this article is ButtonTutorial.
Note:
It is best to choose 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.
- After naming, you must ensure 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 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, including 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 Buttons 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.
You can set the Clicked event to an event handler by entering this code. The name of the event handler is OnButtonClicked.
1- Click on MainPage.xaml in the Solution Pad section of the ButtonTutorial project.
2- Double click on MainPage.xaml.cs to open it.
3- Add the OnButtonClicked event handler to the class by entering the following code.
The OnButtonClicked method is executed when the button is pressed. The sender argument starts Clicked event on a Clicked event, and 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 Buttons in Xamarin-Forms using Visual Studio for Mac
1- To change the Button's appearance 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.
By entering this code, you change the appearance of Buttons. 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 buttons.
The decanter's shape 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 buttons, 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's text. The values in the BorderColor attribute can specify the color of the perimeter around the buttons.
The BorderWidth attribute specifies the width of the border of the button. The higher the value of this attribute, the thicker the border, and the smaller the attribute's value, the narrower the border.
- Press the Start buttons or Ctrl-F5 key combination to see the result of the applied changes. In this case, you will notice that the buttons' appearance has changed and has been adjusted according to the changes you have made.
DotNek Android development services