How To Make Simple Button, Set Time And Set Date In Xamarin

First of all, we open a new project from the file and then the Window will open, as shown in the figure. Select the Blank Xaml App (Xamarin Forms Portable). Why do we choose this option? I explained it in my previous post. Now, we will write the name of the project and click OK.



After some time, a blank Window will open, where we implement our code and there is some option in the right, which I discussed in the previous post. We will work at the top of the portable project, which is highlighted in the given figure, above.



Delete the tag of the label and write the new code for the button. Here, in Xamarin forms,  the buttons are easy to make like HTML. Just start with the tag <Button Text =”Login”/>. This button, which I just made, describes its tag and the name of the button, which we give by the text property. After making one button, I copy the code and paste it five times for your practice and example. You notice, that I am doing this code in the stacklayout tag, which is the  wrapper of this code.



As shown in the figure, there are five buttons, which I just made. This is the output of my code, that how these buttons will appear in the app. Now, if any one tries to make these buttons Horizontal, then we should write the following code.



As shown in the figure above, we just add the orientation property horizontal and then the button will change its position, which is shown in the figure below:



Now, we write the next code for the time and date, which is as easy as this code. First, delete the button code and write the datepiker code in the stacklayout tag,  as shown in the figure below:


If we want to see the output of this code, there is date 7/24/2016 shown in the background of the figure. If we tap the date, one popup will display,  which is showing three options and are date, month and year. If we change the date here, the change will occur in the date, as show in the figure, given below:




Now, we write the time code next to the datepiker code. Here, you can see that this code is easy as its looks like the previous code I explained previously. Now, we can see the output of this code in the emulator of my mobile.



In the above figure, you can see that there is a time, which is showing 12:00AM and if we tap the time, the popup will appear and we can change the time. Subsequently, we can tap the done button, as shown in the figure above.