Tag Archives: Windows Presentation Foundation Using Visual C# 2010

Visual C#: Navigation in Applications

In most client applications, users can have any number of windows open at the same time. In Outlook, you can have the Inbox, Calendar, Tasks, and Contacts open at the same time. You can have multiple messages, appointments, tasks and contacts open at the same time. You are limited solely by your tolerance for navigating amongst large numbers of windows.

When you create a Windows Forms Application project in Visual Studio, the first thing you see is a form. Often this will be your startup form. You then add any number of forms to the application. Each form is a window and it serves a purpose, whether it is data entry or reporting or a splash screen or navigation. Whether users navigate by selecting a menu item or clicking a button, the application displays a new form in a new window. Web applications take the opposite approach. Typically, you will have one window open, and that is the browser. As you navigate within a site, you load a different page in the browser and you have one page open at a time. This is not always the case, but it is true much more often than not.

In a WPF application, you can choose either of these navigation paradigms. The WindowNavigationDemo sample application consists of three windows. The MainWindow.xaml file defines the application’s startup window. It contains buttons to display the other two windows, defined in Window1.xaml and Window2.xaml. Both of these windows can be open at the same time, as
shown in the figure below.

nav_in_application

Figure above, this application uses window-based navigation.

When you create an application based on the WPF Application project template, Visual Studio assumes that you will use windows-based navigation. It sets the startup window to MainWindow.xaml.

If you want to use page-based navigation, and make your application look and feel more like a Web application, you need to use pages rather than windows. You should also consider using hyperlinks rather than buttons.

The Page class is similar to the Window class. Each is a container and can contain a single element, such as a StackPanel, DockPanel, or Grid. A primary difference between a window and a page is that a page is designed to be navigated to.

A page can be hosted in a Window, a NavigationWindow, a Frame, another page, or the browser. Because it is not a standalone container, it has a smaller set of properties than a window.

The Page class contains several properties, including the following:

  • Background: Determines the background for the page
  • Foreground: Determines the default foreground for the page. All elements in the page will have this foreground by default.
  • FontFamily and FontSize: Determine the default font family and size for the page. All elements in the page will have this font size and family by default.
  • ShowsNavigationUI: Determines whether the page displays back and forward buttons.
  • Title: Sets the name of the page used in the navigation history.
  • WindowHeight and WindowWidth: Determine the height and widthof the window that hosts the page.
  • WindowTitle: Determines the title of the window that hosts the page.

The NavigationWindow class represents a window with built-in navigation support. This class derives from the Window class and includes the ability to display content and navigate. The content can be any .NET Framework object or HTML page, but typically the content will be in a page.

The NavigationWindow object supports not only navigation but the navigation history. Some of the properties of the NavigationWindow class are:
BackStack and ForwardStack: Return an IEnumerable you can use to enumerate the entries in the window’s back and forward navigation history.

  • CanGoBack and CanGoForward: Indicate whether there is at least one entry in the back and forward navigation history.
  • CurrentSource: Gets the uniform resource identifier (URI) of the content that was last navigated to.
  • ShowNavigationUI: Determines whether a NavigationWindow shows its navigation buttons.
  • Source: Gets or sets the uniform resource identifier (URI) of the current content, or the URI of new content that is currently being navigated to.

This post is an excerpt from the online courseware Presentation Foundation Using Visual C# 2010 course written by expert Ken Getz and Robert Green.

Ken Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.

Robert Green is a Visual Studio expert and a featured instructor for several of our Visual Basic and Visual C# courses. He is currently a Technical Evangelist in the Developer Platform and Evangelism (DPE) group at Microsoft. He has also worked for Microsoft on the Developer Tools marketing team and as Community Lead on the Visual Basic team. Robert also has several years of consulting experience focused on developer training, and is a frequent speaker at technology conferences including TechEd, VSLive, VSConnections and Advisor Live.

The WPF Layout System – Visual C#

Layout in WPF is flow-based, but it also includes automatic resizing and repositioning of controls if the user changes screen resolution or resizes the window containing controls or adds or removes controls at runtime. As you will see in this chapter, this provides resolution and size independent user interfaces.

A window can contain one element, or control. That element will almost always be a container. A container contains controls and, optionally, other containers. All container controls derive from the System.Windows.Controls.Panel class. Layout in WPF is a recursive process. The .NET Framework runtime makes two passes before drawing elements.

In the Measure pass, the runtime queries each element to determine the element’s size and location. In the Arrange pass, the runtime determines the actual size and position for each element. Elements may or may not be sized and located where they requested, depending on the number of elements, the screen resolution, the size of the window, etc.

Layout is not only a recursive process, but it is also an iterative process. The entire layout process occurs each time the user resizes the window or your code adds or removes elements. You should keep this in mind as you design user interfaces.

How does the layout system determine how to size each element? Each element on a window is surrounded by a bounding box, as shown in Figure 1. This represents the space allocated to the element, and therefore represents the maximum size of the element.

helloworld

Figure 1 Each element on a window is surrounded by a bounding box.

The layout system determines the actual size of an element by taking into account the following:

  •  The available screen space.
  • The size of any constraints, such as maximum or minimum height or width.
  •  Layout-specific properties, such as alignment, margins, padding, etc.
  •  The behavior of the parent container.

As needed, the layout system can shrink, grow, or move elements on a window.

Alignment, Margins, and Padding

All elements have four properties that are important to understand, as these play a key role in determining the position of elements in a window. These properties are HorizontalAlignment, VerticalAlignment, Margin, and Padding. Alignment refers to how child elements should be positioned within a parent element’s allocated layout space. The HorizontalAlignment property determines how an element is positioned horizontally within a container. The possible values for this property are Left, Right, Center, and Stretch, as shown in Figure 2. If this property is set to Stretch, which is the default, the control will expand to its maximum available width.

WPFLayoutSystem2

 Figure 2  The HorizontalAlignment property determines how an element is positioned horizontally within a container.

The VerticalAlignment property determines how an element is positioned vertically within a container. The possible values for this property are Top, Bottom, Center, and Stretch, as shown in Figure 3. If this property is set to Stretch, which is the default, the control will expand to its maximum available height.

WPFLayoutSystem3

Figure 3. The VerticalAlignment property determines how an element is
positioned vertically within a container.

The Margin property determines the distance between an element and its child or peers. This property consists of four parts: the left margin, the top margin, the right margin, and the bottom margin. The following XAML sets the margin for an element following this pattern:

<Button Margin=”0,10,0,10″…

The previous code specifies that there should be no additional space on the left and right, but there should be a ten pixel space on the top and bottom. If you want the same margin on all four sides, you only need to specify one value. The following XAML sets the margin to ten on all sides:

<Button Margin=”10″…

The Padding property is similar to the Margin property, however it is only available for certain controls, including Border, Button, and TextBlock. The property adds space between the edge of a control and its content.

Figure 4 shows the use of the Margin and Padding properties, along with horizontal alignment, to control the layout of elements.

WPFLayoutSystem4

Figure 4. You can use the Margin and Padding properties, along with horizontal
alignment, to control the layout of elements.

Containers

As mentioned earlier, each window can contain a single element. This element will typically be a container control. This chapter covers the following containers:

  • StackPanel: Stacks elements horizontally or vertically.
  • WrapPanel: Places elements in rows and columns that wrap as needed.
  • DockPanel: Aligns elements along an edge.
  • Grid: Places elements in rows and columns.
  • Canvas: Places elements according to coordinates.

This post is an excerpt from the online courseware Windows Presentation Foundation Using Visual C# 2010 course written by expert Ken Getz and Robert Green.

Ken Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.

Robert Green is a Visual Studio expert and a featured instructor for several of our Visual Basic and Visual C# courses. He is currently a Technical Evangelist in the Developer Platform and Evangelism (DPE) group at Microsoft. He has also worked for Microsoft on the Developer Tools marketing team and as Community Lead on the Visual Basic team. Robert also has several years of consulting experience focused on developer training, and is a frequent speaker at technology conferences including TechEd, VSLive, VSConnections and Advisor Live.