Ugrás a tartalomhoz

.NET Programming Technologies

Gergely Kovásznai, Csaba Biró

Eszterházy Károly College

18. fejezet - Development Environments (written by Gergely Kovásznai)

18. fejezet - Development Environments (written by Gergely Kovásznai)

For developing WPF and Silverlight applications, there exist several integrated development environments (IDE). In this section, we are looking into two IDEs developed by Microsoft: Visual Studio and Expression Studio. In the previous sections, we have already got familiar with the usage and certain services of Visual Studio, since this environment is for programming. On the contrary, Expression Studio supports designers’ work. Since the core philosophy of WPF (and Silverlight) includes the intense separation of view and code-behind, one can hope that a (XAML) GUI designed in Expression Studio and (C#) source code developed in Visual Studio fit nicely together, and one of them can be easily modified  without jeopardizing fitting with the other.

In Section XVIII.1, we are going to recap a few Visual Studio services, in greater depth, supplemented with suggestions. Visual Studio 2012 is the most recent version, supporting WPF 4.5; to be more precise, we are going to use its Professional edition.[22]

        In Section XVIII.2, we will introduce Expression Blend, the most important tool in Expression Studio. The current situation with Expression Studio’s versions is quite chaotic, since the most current version, Expression Studio 4 Ultimate, support WPF/Silverlight 4.0, and the upcoming version for WPF 4.5 has not been released yet.[23] Although the installer of Visual Studio 2012 offers us the opportunity to install the new Blend for Visual Studio as well, do not fall for this trick – unless you are intending to develop Window Store apps for Windows 8. In order to develop WPF 4.5 (and Silverlight 5.0) applications, currently we need to download and install another environment called Blend + SketchFlow Preview for Visual Studio 2012.

Finally, in Section XVIII.3, we will look into another tool in Expression Studio, namely Expression Design 4.

Visual Studio

Solution Explorer is usually located on the right-hand-side of Visual Studio’s interface (if not, you can find it in the “View” menu). This tool is for browsing the content of your solution. A solution can contain one or more projects; in Figure 1, a solution that contains only one project is shown (this is the rather common case). The individual projects might contain several files. There might be hidden directories and files, e.g., the ones created during compile time; all of these can be displayed by clicking the „Show All Files” button.

XVIII.1. Solution Explorer and the "Show All Files" button

A WPF project always includes an App.xaml and a MainWindow.xaml XAML file, however one can add further XAML (or any) files to a project, as shown in Figure 2. “Behind” each XAML file, there also exists a C# file (with .cs extension), in which the code-behind is stored (e.g., event handlers). A project, of course, can contain lots of other files as well, e.g., image files (Section V.2.3), audio and video files (Section V.2.4), XML files (Section XVI), database files (Section XVII.1), data models (Section XVII.2) together with all the supplementary files (c.f. Figure 1 again).

XVIII.2. Adding a new file to a project

Designer

A XAML file has three different views. The default view can be seen in Figure 3 and is called the Design view, provided by the Designer tool; in this view, one can “draw” the interface of a form. Another view is the XAML view, shown in Figure 4.

XVIII.3. Designer - Design view

XVIII.4. Designer - XAML view

In Figure 6, the third view called the Code view can be seen, which displays the (C#) code-behind; one can open this view in Solution Explorer (or in the View menu).

XVIII.5. Opening the Code view

XVIII.6. Code view

Toolbox and Document Outline

In the Design view, one can place new controllers, one after the other, on a form by using the Toolbox tool, by drag&drop. One usually opens the Toolbox by clicking the vertical button on the left-hand-side of the screen, as it can be seen in Figure 7 (or, alternatively, in the View menu). The Toolbox contains numerous controllers, hence it is a real pain to search among them, and therefore it is expedient to use the search box at the top of the Toolbox.

XVIII.7. Visual Studio: Toolbox

XVIII.8. Visual Studio: Document Outline

The Document Outline tool (which can be accessed in the View/Other Windows menu) visualizes the (tree) structure of the form, and accesses the individual controllers, as can be seen in Figure 8. Furthermore, one can switch on/off their visibility and lock/unlock them.

Properties

In the Properties window, which is usually located to the right (and can be switched on/off in the View menu), one can browse and modify the properties of the controller selected in the Designer. The Properties window contains two tabs: while the afore-mentioned properties can be browsed on the default tab as shown in Figure 9, the events (and event handlers) of a controller can be browsed on the tab shown in Figure 10.

XVIII.9. Properties tool

XVIII.10. Properties tool - Events

In Figure 9, it can also be seen that properties are divided into categories, for the sake of clarity. Still, it is often quite a challenge to find certain properties; the search box helps here again.

Distinct ways are used for editing the individual properties, but they are quite intuitive; we are not giving details on each, except for the following ones. But first, we would like to pan out about the role of the small checkboxes to the right of the properties (Figure XVIII.11), especially about Reset, i.e., setting the property value to default. This feature might be very important if one uses the Designer to generate XAML code, instead of writing it manually. Of course, the Designer floods the XAML code with lots of (often) unnecessary property settings, which can be cleaned up by Reset.

Transformations

One can apply transformations (Section Hiba! A hivatkozási forrás nem található.) to controls by using the convenient interface that can be seen in Figures 12 and 13. This interface offers access to the four basic transformations (in the figures you can see two of them), and, on the remaining two tabs, you can also access the transformation center point and the Flip transformation (realized by TranslateTransform).

XVIII.12. Transformations - Rotate

XVIII.13. Transformations - Scale

Effects

You can add effects (Section IX) to controls by clicking the „New” button in the „Appearance” category. By doing so, new fields appear, according to the selected effect, as can be seen in Figures 14 and 15.

XVIII.14. Effects

XVIII.15. Effects - DropShadowEffect

Brushes

One can color controls by using brushes (Section Hiba! A hivatkozási forrás nem található.); occasionally, different brushes might be used for coloring e.g. the background, the foreground, or the border. All these can be set in the window shown in Figure 16, by selecting the target of the brush at the top. The tabs below that can be used to select a brush type, e.g., a SolidColorBrush or some kind of gradient brush (this particular case is shown in the figure), or even an ImageBrush. In the case of a gradient brush, the slider in Figure 17 can be used to customize its GradientStops, to add new ones, or to delete existing ones. In the bottom left of this slider (Figure 18), you can select the kind of the gradient brush, i.e., either LinearGradientBrush or RadialGradientBrush.

XVIII.16. Setting a brush

XVIII.17. Gradient stop

XVIII.18. Different kinds of gradient brushes



[22] Instead, one can also use Visual Studio Express 2012 for Windows Desktop, free of charge.

[23] Microsoft announced to discontinue Expression Studio 4. Some of its tools are no longer supported, so is Expression Design, therefore, probably, no new version can be expected; the current version 4 is available for download at no charge. Blend, as a component in Visual Studio, is henceforward supported.