Tutorials » WPF tutorials »

The WPF Designer

This article explains about different elements of the WPF designer. You will learn what is toolbox, solution explorer and other useful elements of the designer window.

The IDE for WPF development is similar to that of Windows Development with some extra elements. To start WPD design window create a new WPF project in C# or VB.NET. It will show you the WPF designer. We will learn how to develop an WPF application in the next chapter.

WPF Designer

Different Elements of IDE:-

1.The Menu Bar:-

WPF ToolBox
The menu bar is situated under the title bar of the window. The menu bar has menus like File, Edit, View, Properties, Build, Debug, Tools etc. You can work with the different menu items as in case of Windows application development

2.The Tool Bar:-

The tool bar is situated below menu bar. The tool bar has options to save project, copy and paste, build, run,etc.

3.The Toolbox:-

By default the tool box will appear in the left pane. You can make it auto hide, floating or docking as per your choice. It has all the controls to work with. It contains the common controls like Button, Label, TextBox, etc. These controls work in a similar manner as that of Window Application.

WPF Solution

4.The Solution Explorer:-

The solution Explorer is situated at the upper right corner of the IDE. It displays the classes, forms, modules, properties and preferences used by our application in a tree view. It makes the application development easy by displaying all the related items at one place. You can also make it floating, docking, or auto hide as per you choice.

WPF Property

5.The Property Window:-

The property window is situated below the Solution Explorer. The property window shows what properties the selected object has. You can set the different properties of the objects selected. You can also set these properties by coding manually. But it is easier to set the property by using the Property Window.
The property window plays a vital role while developing WPF application. We can set the different 3D effects and other properties of control using this property window without knowing the XAML. The Property Window in WPF has some extra properties for each control than that of Windows application. You can make it floating, docking, or auto hide as per you choice.

6.The WPF Form Designer:-

The WPF form designer has the same setting as that of Window Form Designer, but with some differences. The WPF designer contains a Zoom Tool to zoom the whole window so that you can develop your application more easily. You can place controls on the form by drag and drop method and resize it. It will display the distances from the window wall while resizing a control. It also provides to define grids in the window.

7.The XAML Editor:-

By default the XAML editor is displayed in split view below the WPD designer. You can choose your view to only Design or XAML according to your choice. In XAML editor you can define the XAML code to generate controls or set their properties.
In split view it is easy to work as you can see how the different XAML tags affect the design. You can also take your XAML editor above the designer by clicking on the double arrow button present in the middle of designer and XAML editor headings below the designer.

XAML Editor

In the next chapter you will learn how to develop a simple WPF application.

Next Chapter: Your First WPF Application
Previous Chapter: Installation and Configuration of Visual Studio
More Chapters: WPF Tutorials
More Tutorials: Tutorial Index

Top Contributors
    Last 7 Days

      Awards & Gifts

      Online Members

      Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India