AppX workspace window is divided into different sections to facilitate the design of the component interface .

The toolbar along the top contains all the common tools . The Properties Inspector on the right lets you adjust/modify the properties of the selected component. The left panel is divided into upper and lower parts, one is the components List, another is the Libraries. The components List lists all the components you added and the Libraries contains all available components. The middle part includes design view and code view. the Designer View is where you can see your added and designed components, the Code View contains the generated code of your selected component.


Most of the toolbar features are straightforward, but the special attention is the preview toolbar item. When you press the preview button, its font color will turn blue. In order to display the effect of the mouse selection, components will be overridden the mouse-related events in the designer view. If you need to view the normal mouse-related events of the component in your project, you need to press the preview toolbar item.

Components List

All the components you add to the Designer View appear here.


All available components are listed here in groups. You can also search for components by clicking the search button in the top right corner.

Designer View

You can drag and drop a component from the Libraries to the Designer View. When you select the component, its properties will appear in the Properties Inspector right.

Code View

The Code View contains the generated code of your selected component. You can also click the toggle button on the left to expand or collapse it.


Inspector allows you to change or view properties of your selection.