In the right side, you can find Solution Explorer. Under Solution Explorer, the project and all the files in the project will be shown. Double click on the main page. The Designer Windows will load in the middle. This will take some time based on the speed of your machine.
Tool Box
Go to View menu and click on the toolbox option. The tool box will load in the left side with a large number of tools like button, text box, labels, media etc.
![]()
![]()
Designing by dragging
Simply click on the textbox and click on the blank designer page or simply drag the text box to the designer page. This will automatically generate the code for the text box and you can make use of it. You can change the properties of the tools which you drag into the designer page. If the properties Window does not display in there, simply press the F4 button or go to view menu and select the Properties Window option. This will display the Properties Window. In the Window, you can make changes to the properties to the tools in the way you want to make use of them. Now, try dragging the button in the tools box and you can do the same with these. You can even drag the media element tool to add music, video & images. There are lot more tools, which you can drag and drop for all your uses. For the media element, you can change the media source, image and videos from the source option in the properties.
![]()
![]()
![]()
![]()
![]()
All the tools
As I told you, there are a lot of tools which we can drag and drop from the tool box, which are basically required to create an application. The different types of tools in the tool box are shown in the screenshot given below.
![]()
Viewing the code of the tools
To view the code which is generated for the application which you have designed, click on XAML option in the bottom in the Designer Window. This will display the XAML code of your design. You can see these in the screenshots given below.
![]()
Writing code to the tools
To make your app dynamic, you need to write the code for your tools. Let us assume that we need to write some code to the button. Simply double click. This will open the coding page of the button, where you can write your code to make it functional. In the same way, you can write code for all the tools which you use in the application.
![]()
Packaging
This is how you develop the application. After the complete development of your application, you have to create packages for your application to publish in the store. You can find it in the following article. I hope you will make
use of it.
Conclusion
Thus, you can make use of this method for designing an application rather than writing the XAML code.