(How)
C^# You Are - 13 January 2008

This week's questions are related to WPF. WPF is a new UI framework for .NET. It was released with .NET v3 but has really been pushed starting with v3.5.

1. What is the difference between a Visual and UIElement?  Answer

   A Visual is the base class for objects that can be rendered. Beyond basic rendering support (which it doesn't actually have) it doesn't do anything.

   UIElement is the topmost WPF core class for displaying objects. It derives from Visual and adds the basics for input support, layout management and eventing. Ultimately UIElement is the base class from which controls and windows you create in WPF will derive.

   Refer to MSDN for more information.

2. What is the difference between tunneling an event and bubbling one?  Answer

   Events can be routed one of two ways when dealing with control hierarchies: top down or bottom up. Top down is known as tunneling while bottom up is known as bubbling. We are generally use to bubbling events as this is how traditional Windows applications work.

   For WPF events can do either one. Bubbling an event is best used when an event is performed such as clicking a button or updating a list. This allows the control closest to the event to handle the event. The event works its way up until somebody handles it (explicitly in WPF) or it runs out of controls.

   Tunneling is useful for previewing an event. Preview events are somewhat common in Windows but definitely not as popular as tunneling. A preview event notifies interested parties of an event about to happen. A form closing event is a preview event. The FormClosing event is raised to notify everyone that the form is about to close while the FormClosed event is raised to notify everyone that the form has closed. In most cases a preview event allows for cancellation (such as when the active document is dirty and the user clicks Cancel on the Save dialog.

   Preview events start at the top of hierarchy and work their way down. Ultimately it doesn't matter who sees the event first because if one control cancels the event then the event is cancelled. Whether it was the first control or the last doesn't really matter.

   Refer to MSDN for more information on routing events.

3. What is the purpose of a Command?  Answer

   A Command is a simple wrapper around an application activity. Commands might include opening a file, copying the currently selected object or displaying help.

   A Command represents the activity and the method(s) to call when it is executed. Command sources (like a button or menu item) execute the command when you interact with them. Command targets are the objects that actually do the work when a command is executed.

   WPF ships with some pre-defined commands exposed through the ApplicationCommands class.

   Refer to MSDN for more information on commands.

4. What does XAML stand for?  Answer

   Extensible Application Markup Language. Is there any -ML acronym that doesn't end with Markup Language and look like HTML?

5. If you wanted to set up an Outlook-style bar where you can click on "buttons" and expand and collapse panes what type of controls might you use?  Answer

   You would probably use an Expander or Button as the clickable button. You would then use a StackPanel to lay out each pane and set the pane to not visible, initially. Finally, you'd wrap the "buttons" in a StackPanel so they would lay on top of each other.

   There are undoubtedly more ways to do this but the above would give you a good starting point. Refer to this article for an example

6. What purpose does the Canvas control serve?  Answer

   The Canvas control is the control you'll use when you want to draw arbitrary objects on the screen. It derives from Panel and basically provides a drawing canvas on which to place other controls. Most of the other Panel-derived classes mandate how or where child controls appear, such as stacked or as a table.W

   Refer to MSDN for information on this class.

7. What is a control template?  Answer

   One of the more powerful features of WPF is the ability to separate the layout of a control from its functionality. There are times when you want an image to be clickable like a button or have a textbox inside a list view. With WPF you can. In WPF a control (when designed properly) differentiates between how it is rendered and what it does. The control's functionality is generally not that extensible without deriving a new class. The layout however can be changed by specifying a new control template.

   Similar to ASP.NET templates, a control template defines how the control will be rendered. Rather than, for example, creating a new class called ImageButton that acts like a button but draws an image you can use a normal button and set the control template to an image. The clicking behavior is still managed by the button but how it is rendered doesn't matter. There will definitely be cases where a control template might not work for a control. For example a radio button associated with a text box might not be a good idea but the possibilities are there.

   Controls that derive from Control are templatable controls as they contain the ControlTemplate property. If a control does not derive from this base class (and some don't) then templating doesn't work. In general you will derive from Control and support templating. If you don't want to support templates then you can derive from FrameworkElement instead.

   Refer to MSDN for more information.

8. What is a pack Uri?  Answer

   WPF is overflowing with references to other file-type objects like resources, styles and content files. To allow for independent referencing of these objects WPF uses URIs just like ASP.NET uses URLs for identifying pages to go to or images to display. The URL syntax is overkill for WPF and does not allow for some .NET-specific referencing so packed Uris were created. A packed Uri is (theoretically) unique in the application and points WPF to some object (like a resource) sitting in either the current assembly, a referenced assembly or on the disk.

   An example of a packed Uri might be "pack://application,,,/MyPage.xaml". If you look in the XAML file for your main application you'll see a packed Uri to the main window. The problem with this syntax is that it can be verbose. Therefore you can leave off some of the "obvious" information and let WPF figure it out. For example, instead of identifying the full path to another XAML file you can generally just give the XAML file name and optional subfolder path. WPF will use a searching algorithm to find the correct file. This is why it is known as a packed Uri.

   Refer to MSDN for more information on this topic.

9. What is a content model in WPF?  Answer

   WPF defines a couple of content models. A content model controls what content can be contained in another control. In WPF the following models are defined (along with the base class and example).

   • ContentControl - Single control such as a button
   • ItemsControl - Multiple items such as a listbox
   • HeaderedContentControl - Single control with a header such as a group box
   • HeaderedItemsControl - Multiple controls with a header such as a list view

   If you look at the inheritance tree of a control you can determine whether it was designed for a single or multiple controls. It is important to point out that the headered variants derive from the non-headered versions.

   Refer to MSDN for more information.H

10. How do you give all your buttons the same look and feel?  Answer

    Styling is another big benefit of WPF. With styling you can force your application to use the same look and feel. By default each control specifies how it looks. You can define a style that applies to all controls of a given type to enforce this. Furthermore you can inherit some settings from one style to another. So you can, for example, make all your buttons look Vista-like yet create a few custom buttons that include some additional properties and yet still look like Vista.

    Styles are generally used in conjunction with resources to control how things look. Most of the time styles and resources are defined at the application level rather than per-window or per-control.

    Refer to MSDN for more information.