System.Windows.Controls.ContentControl

3. WPF class hierarchy

3.9. System.Windows.Controls.ContentControl

The System.Windows.Controls.ContentControl class allows to give rich content to the controllers.

II.2 Example ContentControl

</StackPanel>

</Button>

3. fejezet - XAML (written by Csaba Biró)

XAML (eXtensible Application Markup Language) is an XML-based declarative markup language, which simplifies the creation of the graphical user interface (GUI) in the .NET model.

The grammatical system of rules of the declarative language rules is very easy. Its general design principle is that every element of the XAML document – unless it defines an attribute – is a copy of the .NET class. The implementation of the XAML files can be carried out with interpretation or translation. Here is an example of the interpretation performing.

After starting a simple editor (e.g. Notepad), type the following code:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

</Page>

Save it as HelloWorld.xaml, and open this file in a browser (IE, Firefox). We created our first application in XAML language running in XAML browser.

The implementation with another translation is more common. So, if you want to embed codes written in C# or Visual Basic language, our passcode have to be translated.

Let’s look an example of it, start the Visual Studio. We are going to work in this developing environment further, so the chapter: ’Error: The source of the reference is not found.’ recommend to read.

Now the following steps are performed in the Visual Studio:

1. File / New Project

III.1. New project

1. New WPF Application / Name: HelloWorld

III.2. New WPF application

III.3. Visual Studio IDE

1. Type the following line between Grid controls.

Application code is:

<Window x:Class="HelloWorld.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="525">

<Grid>

</Grid>

</Window>

Run the project. In this case we translate the XAML code (in the example) into the resulting executable file as well.

Note that in the first case the root is the Page (for web pages) element, whereas in the second one the Window element. We will make only desktop applications longer, which has Window root element.

1. The fundamental files of WPF project

Look through the fundamental files of a WPF project with returning to the HelloWorld examples.

III.4. Solution Explorer

In the Solution Explorer (Chapter XVIII.1.1) an App.xaml file can be found with the MainWindow.xaml file has been used above, its content is:

<Application x:Class="HelloWorld.App"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

StartupUri="MainWindow.xaml">

<Application.Resources>

</Application.Resources>

</Application>

The application resources and startup settings can be defined in the App.xaml file, which begins with the Application root element.

The StartupUri property point to the first visualized window.

StartupUri="MainWindow.xaml"

We will deal with the management styles and resources more in Chapter XII.

2. Code-behind class

It can be observed that when we create our project from the basis of the WPF application template, a .cs or a .vb extension file created with the same name for both of the xaml files.

The aim of the foreground code files to separate the application appearance from the application functionality through the development, as you could read in the introduction.

It becomes available with using the x:Class attribute.

x:Class="HelloWorld.MainWindow"

Actually, what happens is that the x:Class attribute tells the XAML parser has to create a new lass with the specified name. In other words the former one creates a Window class called MainWindow from the Window class.

Then the content of the MainWindow.xaml.cs file is the following:

using System;

/// Interaction logic for MainWindow.xaml /// </summary>

public partial class MainWindow : Window {

3. XAML namespaces

The previous examples shows that the Page and the Window root elements – in any case – define two namespaces:

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml

1. The default WPF namespace including the WPF classes (controls) need for building of the user interface.

2. XAML –namespace. It includes general definitions necessary for the interpretation of the XAML documents.

It is interesting that the namespace with a prefix x has a wider view.

The role of the xmlns – a special attribute – is to give a local name (pseudonym) to the URI (Uniform Resource Locator) form namespace.

4. Properties

As it has already been mentioned above, a class properties (attributes) definied in a XAML file, the same with the features of an object element. Of course, it takes a number of ways because of the characteristic of this particular property.

Look at the following example for the interpretation displaying a button.

<Window x:Class="Tulajdonságok.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="525">

<Grid>

<Button x:Name="Gomb"

Content="Gomb"

Width="150" Height="30"

HorizontalAlignment="Center" VerticalAlignment="Top"

Background="Azure" Foreground="Blue"

FontFamily="Times New Roman" FontSize="20"

FontStyle="Italic" FontWeight="Heavy" Opacity="0.5"/>

</Grid>

</Window>

The Button element in the example is a „member‖ of the System.Windows.Controls. The features of the Button element represent the object’s properties, that is why we can assign values to the following characteristics (Content, Width, Height, HorizontalAlignment, VerticalAlignment, Background, foreground, FontFamily, FontSize, FontStyle, FontWeight, Opacity)

However, it is important to note, that the x:Name is not the feature of the Button object, but a feature which assigns a unique identifier to the object.

If an object is associated with only simple type values, can be defined with an abbreviated form shown in the example below.

The previous button looks like this in C# language:

Button button = new Button();

button.Name = "Gomb";

button.Content = "Gomb";

button.Width = 150;

button.Height = 30;

button.HorizontalAlignment = HorizontalAlignment.Center;

button.VerticalAlignment = VerticalAlignment.Top; abbreviated forms is not enough like in the former example. The complex features can be given with children-items called feature-elements.

HorizontalAlignment="Center" VerticalAlignment="Top"

FontFamily="Times New Roman" FontSize="20"

FontStyle="Italic" FontWeight="Heavy" Opacity="0.5">

<Button.Background>

It is possible to enter the hidden Content property, which we cannot see in the previous examples.

Button

</Button>

The Content property has an object type, that is why (as the example shows) a gradient filled ellipse can be placed on the button instead of a simple text.

<Button.Content> satisfactory. (For example: an object you want to set property value that already exists, or would like to seet a value with a dynamic data binding, etc. ) In these cases, markup extensions will be required. Markup language extensions have to be placed between curly {} braces.

{MarkupLangueExtensionName value}

The name of the Markup Language Extension defines for the WPF which extension is it, for example:

StaticResource, DynamicResource, etc.

<Application.Resources>

</Application.Resources>

A unique key can be assigned to the resources created in the ResourceDictionary. More about the resources in the Chapter 0.

If more than one parameter is required to specify the following notation:

{MarkupLanguageExtentionName Parameter1=value1, parameter2=value2, parameter3=value3}

8. More x:prefixes

The x:Name, x:Class, x:Key members may have already been mentioned above, if the task requires other prefix may also be used.

x:Type: Type reference can be created x:Static: a reference to a static value allowed

9. Special characters and whitespaces

The XAML follows the XML rule system. So small and capital letter- sensitive, which should particularly pay attention to objects, properties and attributes specification.

Depending on the currently used converter is not always true for the values. The Boolean converter completely waived from this convention. The XAML parser ignores the irrelevant whitespace, normalizes the importants.

9.1. Explanation

The following complex symbols (four characters) are necessary to open <!— , and these are need to be closed --> the explanations. There is only one restriction for the explanatory test: it must not contain two consecutive hyphens characters except there are spaces between them.

9.2. Character entities

Of course, as in the case of XML, the <>;’& symbols define structure definitions. If these signs in our documents will not be used as structure descriptive, the following entities correspond to the special characters.

Speciális karakter Karakter entitás Less than (<) <

Greater than (>) >

And (&) &

Quotation marks (") "

If you want to create a button with Margin&Padding subtitles, it can be done in the following way

</Border>

4. fejezet - Layouts (written by Csaba Biró)

The planning and execution of the application user interface has to be attractive and practical, and it also has to adapt to different window sizes, not an easy task.

A great advantage of the WPF to support the solving of these situations. The majority of elements used for the user interface creation are from the System.Windows.FrameworkElement – as has been previously were involved.

1. Alignment, margins

You can find the properties with which the position of the child elements can be set precisely. We will get to know only the four most important among them (Margin, Padding, HorizontalAlignment, VerticalAlignment).

1.1. Inner and outer margins

With the help of inner and outer margins we can set the distance between the child elements. While with the Margin property you can specify the distance that can be measured on the outside of the element, and the Padding determines the distance in an element which must be free. However, it is important to note that the Margin property is inherited by all the classes from the FrameworkElement class, but the Padding property can be set only for the elements from the Control Class.

The inner and the outer margins has to be set with 1, 2 and 4 values.

If you want to set the same margin settings on all the sides:

Margin="10"

In the case of two numbers the left and the right side, and the second indicates the top and bottom margins.

Margin="10 20"

Négy szám esetében a számok a bal, felső, jobb és alsó margókat jelentik.

Margin="10 20 30 40"

For four numbers means the left, top, right and bottom margins. At accurate values a decimal point is used, the elements may be separated from each other by commas.

Margin="10.25, 2.5, 4.09, 3"

IV.1 Example Inner and outer margins

IV.1. Inner and outer margins

</Border>

</Grid>

1.2. Adjustments

The individual child elements can be aligned vertically and horizontally, of course.

Possible values for horizontal alignment: Left, Center, Right, Strech; for vertical alignment: Top, Bottom, Center, Stretch.

2. StackPanel

The StackPanel is one of the simplest among layout controls, in many cases the most useful layout control. It places its inside elements list-like arrangement (one under the other). It is enought to give the height of the elements, because their width is adapted to the StackPanel width.

To demonstrate the operation of the StackPanel, look at the following two examples:

Example IV.2 StackPanel

IV.2. StackPanel

</StackPanel>

If you would like to visualize the elements arranged next to each other (Orientation =‖Horizontal‖), it is enough to give the width of the elements.

Example IV.3 StackPanel

IV.3. StackPanel

</StackPanel>

3. WrapPanel

It is suitable for displaying items alongside or next to each other. If an item does not fit on the line, it is automatically placed on the next one. The width and the height of the elements stored in this panel is optional.

Example IV.4 WrapPanel

IV.4. WrapPanel

</WrapPanel>

</Grid>

If Vertical Orientation attribute is set, the stored items will be under each other.

4. DockPanel

The DockPanel compared to the StackPanel and the WrapPanel can be used to design more complex layouts, and as a root element replaced the DataGrid. With the help of DockPanel.Dock’s features, the location of each child elements can be set inside the DockPanel.

IV.5. DockPanel.Dock

Create the two applications shown below to understand the DockPanel.

Example IV.5 DockPanel

IV.6. DockPanel

</DockPanel>

LastChildFill (True or False) property specifies that the last element fills or not the available space.

Example IV.6 Saturn - DockPanel

IV.7. DockPanel

<Window x:Class="Bolygok.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Saturn" Height="400" Width="600" Background="Yellow">

<Border DockPanel.Dock="Top" Height="80"

CornerRadius="10" Margin="10">

<TextBlock HorizontalAlignment="Center"

VerticalAlignment="Center" FontSize="36"

FontFamily="Book Antiqua" Foreground="White">

Saturn </TextBlock>

<Border.Background>

</Border.Background>

</Border>

</Border>

<Border Height="50" Background="Black" BorderBrush="Black" BorderThickness="1"

DockPanel.Dock="Bottom">

<TextBlock Foreground="White" Width="580" TextWrapping="Wrap" Text="

Saturn is the sixth planet from the Sun and the second largest planet in the Solar System, after Jupiter. Named after the Roman god of agriculture, Saturn, its astronomical symbol (♄) represents the god's sickle. Saturn is a gas giant with an average radius about nine times that of Earth.‖ />

</TextBlock>

</Border>

The following example includes the definition of a grid with two columns and three rows.

The RowDefinitions and the ColumnDefinitions are elements to define the rows or columns.

During designing and testing the value of ShowGridLines should be set True. In this case, symbolic lines are drawn in the grid when it runs.

Paste three elements into this structure.

It is important to note that the rows and colums numbering starts from zero.

<Button Content="0/0" Width="30"/> column. That is why the rows and columns in proportion to share the width and height of the form. Of course, the size of each rows and columns can be adjusted precisely.

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

In our example the first line –height will be 20 pixels, while the first (second) and the second (third) one shares the remaining place at a ratio of 1:2.

In this case with the "auto" value the width of the zero-column takes the biggest width driver value among the driver with the content of the column.

IV.1. Grid

With the help of RowSpan and ColumnSpan instructions it is possible to combine rows and columns. These will be discussed in the following example.

6. GridSplitter

Using GridSlitter control is possible during the program running to resize the rows and columns of the grid. It has to be placed between the rows and columns which we would like to resize. The ResizeDirection property can be used when we want to resize the rows or columns, the function of the ResizeBehaviour is to set the exact operation.

ResizeBehavior property:

1. BasedOnAlignment 2. CurrentAndNext 3. PreviousAndCurrent 4. PreviousAndNext

Example IV.7 Grid és GridSlitter

IV.8. Grid and GridSplitter

<Window x:Class="grid.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Grid" Height="300" Width="500">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<GridSplitter Grid.Row="0"

Grid.RowSpan="2"

Grid.Column="1"

Width="8"

Background="Beige"

ResizeBehavior="PreviousAndNext"

ResizeDirection="Columns" />

<Button Grid.Column="2"

Grid.ColumnSpan="2"

Content="2 oszlop"/>

<Button Grid.Row="1"

Grid.Column="2"

Content="1,2" />

<Button Grid.Row="1"

Grid.Column="3"

Content="1,3" />

</Grid>

</Window>

7. Canvas

The Canvas pixel delivers precise layout for ideal fixed-size applications. The elements’ position on Canvas can be done by setting features Top-Left, and the Bottom-Right. It is important to note that Canvas is designed to accommodate drawings - controls have to be avoided here.

Example IV.8 Canvas

IV.9. Canvas

<Window x:Class="Canvas.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Canvas" Height="400" Width="400">

<Grid>

<Rectangle Canvas.Left="23" Canvas.Top="38" Width="63"

Height="41" Fill="Blue"/>

<Line Canvas.Right="40" Canvas.Top="30" X2="50" Y2="40"

Stroke="Yellow" StrokeThickness="4"/>

<Button Canvas.Bottom="20" Canvas.Left="40" Width="130"

Height="30" Content="This is a button!"></Button>

</Canvas>

</Grid>

</Window>

We have an opportunity a Z coordinate assignment for each item with the Zindex feature. A higher index elements appear above the indices are lower.

IV.10. ZIndex

Canvas.ZIndex="1"/>

<Ellipse Canvas.Left="45" Canvas.Top="60" Width="58" Heig

In document .NET Programming Technologies (Pldal 13-0)