To Jost .NWDP Site

WPF Notes

Windows Presentation Foundation

Review Questions

1. If A is the base class for the class B, which of these constructor calls is legal:
   

   A x = new A( );
   A x = new B( );
   B x = new A( );
   B x = new B( );
   

2. Suppose you have this inheritance chain:
   

   object → A → B → ... → W 
   

   For the method call x.F( ), how does .Net know which F to call if F is defined in more than one class?

3. Explain what an interface is and why it is used.

4. Which method or methods are required for these interfaces:
   IComparable  ICloneable  IDisposable  IEnumerator  IEnumerable

5. What is the difference between a shallow and a deep clone of an object?

6. Run this code and explain the output:

   int n = 3;
   for(int i = 1; i <= 6; i++)
   {
      Console.WriteLine(n);
      n *= n; 
   }
   

Examples

Example files: wpf.zip and wpf.txt.

Part A:   More about File I/O

1. Using .Net System.IO Classes   C#-2.FileIO1 and Intro.Unicode Examples.
   • Objects:   StreamReader, StreamWriter, BinaryReader.

   • Use the following line to find the full path name of the executable file.
     fullPathName = System.Reflection.Assembly.
         GetExecutingAssembly( ).Location;

   • The ReadLine method of StreamReader returns null when it tries to read past the end of file.

   • The WriteLine method does not print anything when "" or null is printed.

   • The Peek method of StreamReader returns the Unicode code of the next unread character. It returns -1 if there are no more unread characters.

   • Some overloaded constructors for creating a StreamReader object:
     Simplest version to read straight ASCII text files:
     StreamReader sr = new StreamReader(fileName);

     To open an UTF-8 encoded file for reading:
     StreamReader sr = File.OpenText(fileName);

     true means "detect encoding from byte order marks:"
     StreamReader sr = new StreamReader(fileName, true);

     Use the UTF-8 encoding system for Unicode:
     StreamReader sr = new StreamReader(fileName,
         Encoding.UTF8);

   • Here is a brief overview of .NET Encodings, including UTF-8, UTF-16 and UTF-32.

   • See this article by Joel Spolsky for more details:
     The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)

   • The Chess Example is a console application that writes out two files using UTF Little Endian format. The files encode the Unicode symbols for chess pieces.

Part B: An Xml Example

• Misc.Seeds   This example shows how to construct HTML content from an XML file.

Part C: Examples for BooksNMusic Project

1. EmployeeComboBox1   A desktop application that displays objects from the Person/Employee/Executive inheritance hierarchy.

2. EmployeeWebPage   Same as the EmployeeComboBox1 application, but display information on a web page. Complete the application by adding code to add new items.

3. BinaryFormatter   Show how to serialize a Dictionary collection of Employee objects using the BinaryFormatter class.

Part D: Overview of WPF

1. Guiding Design Principles
   • Integration of Disparate Technologies   WPF combines the best features of GDI/GDI+, UI Winforms controls, Direct3D and OpenGL for 3D graphics, storyboard animations.

   • Vector Graphics   Directly uses the GPU to allow graphics to scale to screen-specific resolution without loss of quality. Supports 32-bit ARGB pixel representation.

   • Declarative Programming   UI designer code is expressed in XAML, not C# or VB. If necessary, a code-behind file is provided for runtime processing.

   • Simplified deployment   WPF applications can be standalone (desktop) or web-based in a partial-trust sandbox.

   • Document Portability   WPF uses Open Packaging Conventions, which supports compression, custom metadata, digital signatures, and rights management. XML Paper Specification (XPS) allows documents to be shared across computers.

2. WPF Architecture
   • Element System   Provides functionality for controls, layout, input, events. Uses these classes: System.Windows.FrameworkElement, System.Windows.UIElement

   • Logical Tree   Represents owner relationships of all the controls on a window. For example, a TextBox might belong to a StackPanel, which might belong to the Window. These owner relationships are important for determing how properties and events behave.

   • Visual Tree   In order to enhance the behavior of controls on a window, various elements can be added to the logical tree. Here are some examples of elements that can be added: AdornerDecorator, ResizeGrid, AdornerLayer, ContentPresenter, ScrollViewer, TextBlock.

   • Font System   Manages fonts for WPF, including TrueType and Adobe Open Type fonts. Interacts with the Page and Table Service (PTS) to display paragraphs, tables, and blocks of text within the UI.

   • Input/Event System   Receive input from user devices (keyboard, mouse, stylus) and translate it into events that are generated by the appropriate controls. Bubbling and tunneling events are supported.

   • Property System   Change notification when the value of a property changes, dependency properties whose values are determined by a variety of sources to implement data binding, styles, triggers, and other features.

   • Composition System   Responsable for rendering the UI on the screen using Direct3D through the GPU when possible. Slower rendering through software is available as a fallback.

   • Message Transport System   The link between the Visual System and the Composition System. Remoting is available to manage applications across machine boundaries.

Part E: Using WPF Technology

1. XAML and C# code-behind can be used in several development environments:
   Desktop   Silverlight   Windows 8 Store   Windows Phone   XBox
   
   
2. Silverlight as a Web technology is being deemphasized.

3. Microsoft has introduced the concept of Universal Apps, apps that render adaptively across Windows PCs, tablets, and phones.

4. A major component of the Universal Apps is the Portable Class Library (PCL).

5. The following table shows what features are available in PCL:

   Feature	.Net Framework	Windows Store	Silverlight	Windows Phone
   Core	X	X	X	X
   LINQ	X	X	X	X
   IQueryable	X	X	X	7.5+
   Dynamic Keyword	4.5+	X	X
   MEF	X	X	X
   NCL	X	X	X	X
   Serialization	X	X	X	X
   WCF	X	X	X	X
   MVVM	4.5+	X	X	X
   Data Annotations	4.0.3, 4.5+	X	X
   XLINQ	4.0.3, 4.5+	X	X	X
   System Numerics	X	X	X

   MEF: Managed Extensibility Framework

   NCL: Network Class Library

   WCF: Windows Communication Founcation

   MVVM: Model-View-View-Model

Part F: WPF Topics

1. Review of XAML
   • XAML objects are defined by XML tags, attributes and values.

   • Recall that in XML, every start tag has a corresponding end tag, tags can be nested, combination start/end tags are allowed and values of attributes must be in quotes.

   • Attributes roughly correspond to CLR properties.

   • Here are sample XAML application, form and project files:
     App.xaml   Form1.xaml   ClickCounter3.csproj

2. XAML Namespaces  PizzaGuy2, Local Examples
   • Table Example from W3Schools

   • The standard start tag for an XHTML document:

     <html xmlns="http://www.w3.org/1999/xhtml">
     

   • XAML uses standard XML namespace specifications. For example

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

   • An official XML namespace is specified as a unique URI so that its uniqueness is insured.

   • Some of the elements defined in the namespace x. These are called XAML namespace directives.

   • The prefix x becomes an alias for the XML namespace

         {http://schemas.microsoft.com/winfx/2006/xaml}
     

   • Mapping an XAML namespace to a CLR namespace:

         xmlns:s="clr-namespace:System;assembly=mscorlib"
     

   • Defining a local namespace, a namespace defined in the C# code:

         xmlns:local="clr-namespace:DefaultNamespace"
     

3. Using Visual Studio (VS) for WPF Projects  ToUpper Example
   • Visual Studio windows also available in WinForms projects:
     Solution Explorer, Properties Window, Class View, Class Diagram, Design View, Code Window, Toolbox, Object Browser

   • VS windows new to WPF projects:
     XAML View, Document Outline, Code Definition Window

   • Design View Features
     Zoom Control  Fit In View  Resize Handle  Margin Line  Snaplines

4. WPF Controls   ListBox2, RadioButtons, PizzaGuy1, RoutedEvents Examples
   • Winforms vs. WPF Controls
     Old Controls:
     Label, TextBox, RadioButton, CheckBox, Slider (TrackBar), Image (PictureBox), ListBox, ComboBox, ListView, Menu, ProgressBar, StatusBar, ToolBar, TreeView, RichTextBox

     New Controls:
     Border, Rectangle, ContentControl, Expander, DocumentViewer, Ellipse, Expander, Frame, GridSplitter, MediaElement, PasswordBox, TextBlock, ViewBox, WindowsFormsHost

   • Controls are located in a UI Interface tree. Here is the tree for the elements in the RoutedEvents Example:

                     window1
                        |
                     button1
                        |
                   stackPanel1
                    /      \
               ellipse1  ellipse2
     

   • Elements located higher in the tree are ancestors of the elements below them.

   • Elements located lower in the tree are descendents of the nodes above them.

5. Dependency Properties   DependencyProperty Example
   • A dependency property is a readonly property that depends not on the value of a backing instance variable, but on the values of various other values and/or calculations.

   • Dependency properties provide the infrastructure to validate it, coerce it into a proper range, give out change notifications, and inherit its value from various places; no backing instance variable is needed.

   • Important features of dependency properties (DPs):
     Value resolution   – The actual property value based on runtime information using well defined rules of precedence. Here are some of the sources that can determine the DP value:
     Storyboards   Event Triggers    Templated Parent    Style   ThemeStyle   Parent Control Value   Instance Variable   Default Value

     Self-contained validation   DPs can have custom callback methods execute when the property value has changed. These callbacks can validate the new value or modify it.

     Property meta-data   – The property system knows how a DP should behave based on meta-data supplied at the time the property is registered with the system. This meta-data is not processed using CLR reflection for performance reasons.

     XAML friendly   DPs can be set in XAML like normal properties.

     Value inheritance   Any DP can be given the ability to inherit its value from the property setting on an ancestor element. This functionality is similar to ambient properties in WinForms applications. Here are some situations where walue inheritance is useful: propagating a data source down the element tree, font settings, flow direction (right-to-left) settings.

   • To create a custom dependency property with the name MyName, it must be registered with the WPF dependency property system:

     public static readonly DependencyProperty MyNameProperty = 
         DependencyProperty.Register(
                 "MyName", typeof(string), typeof(MyClass), 
             new UIPropertyMetadata(
                 MyClass.MyNameValueChanged));
     

   • Here is the definition of the dependency property itself:

     public string MyName
     {
        get { return (string)GetValue(MyNameProperty); }
        set { SetValue(MyNameProperty, value); }
     }
     

   • Finally an event is defined to detect changes in the dependency property:

     private static void MyNameValueChanged(
        DependencyObject d, 
        DependencyPropertyChangedEventArgs e)  
     {
        MyClass myClass = (MyClass) d;
        myClass.nameText.Text = (string) e.NewValue;
     }
     

6. Attached Properties   Local Example
   • An attached property is of dependency property which allows a child element to store a value associated with a property defined on an ancestor element

   • An attached property becomes available when a control is embedded in a parent element.

   • The syntax for setting an attached property in XAML:

         ParentElement.AttachedProperty = 
             "AttachedPropertyValue"
     

   • For example, when a TextBox element is embedded in a Canvas element, the Canvas.Top attached property becomes available to the TextBox:

         <TextBox Canvas.Top="23">
     

     and

         <Window.Resources>
             <local:Person x:Key="alice" 
                Name="Alice" Gender="F" Age="11" />
         </Window.Resources>
     

   • WPF attached properties are implemented in a manner to attaching IExtenderProperties components to controls in Winforms projects.

   • An example of an IExtenderProvider component is ErrorProvider:

         errorProvider1.SetError(textBox1, 
             "Value out of range.");
     

7. Layouts   Controls2, Controls3, Numbers1, Controls4, Controls5 Examples
   • VB6, controls are positioned on a form with absolute positioning using the Left and Top properties.

   • .Net WinForms controls are positioned with the Location object that contains Left and Top properties.

   • In .Net WinForms controls, the Anchor property is available.

   • In WPF projects, non-container controls cannot be added directly to the window. The window must first contain a container control, with possible child container controls.

   • The non-container controls are then added to the appropriate container control.

   • WPF projects contain control containers with the same functionality as the layout managers in Java:

     WPF Control	Java Layout Manager	Example
     Canvas	None	Controls2
     WrapPanel	FlowLayout	Controls3
     UniformGrid	GridLayout	Numbers1
     Grid	GridBagLayout	Controls4
     StackPanel	BoxLayout	Controls5
     DockPanel	BorderLayout

   • When the Height and/or Width attributes are omitted, the container control expands to fill all of the available space within its container.

8. WPF Events   RoutedEvents Example
   • WPF events usually fall into one of four groups:
     Lifetime Events   Events that occur when an element is initialized, loaded or closed. The lifetime events for a form are Loaded, Activated, Deactivated, Closing, Closed, Unloaded.

     Mouse Events   Events that occur from mouse action such as Click, MouseDoubleClick, MouseUp, MouseMove or MouseMove.

     Keyboard Events   Events that occur from pressing or releasing keyboard keys such as KeyDown or KeyUp.

     Stylus Events   Events that occur from stylus action. The stylus takes the place of a mouse on a tablet PC.

   • Events in WPF are often routed events. This means that the event is passed from a control to its ancestor or descendent controls in the UI Element tree:

                     window1
                        |
                     button1
                        |
                   stackPanel1
                    /      \
               ellipse1  ellipse2
     

     Bubbling Events   The event first fires in the control where the event occurs. Then it bubbles up to its parent, to its grandparent, to its great-grandparent, an so on until the event reaches the top of the tree.

     Tunneling Events   The event fires first in the control's topmost ancestor, then tunnels down to the ancester's child, to its grandchild, and so on until the event reaches the control itself.

   • Bubbling events and tunneling events come in pairs. In the RoutedEvents example, the bubbling event MouseUp is paired with the tunneling event PreviewMouseUp.

   • The primary use of the Preview events is to halt routing. By setting

         e.Handled = true;
     

     in a preview event, that event is prevented from firing. Furthermore, the corresponding non-preview event is prevented from firing and bubbling up as well.

   • Exceptions in the RoutedEvents example: both window1 and button1 do not respond to MouseDown events that bubble up to them from child elements. They do, however, respond to Click events that bubble up from MouseDown or MouseUp events.

   • In either a Preview event handler, say ellipse1_PreviewMouseDown, not only will the tunneling stop, but the corresponding bubbling event ellipse1_MouseDown will not be raised at all.

9. Triggers   DependencyProperty Example
   • A XAML trigger is a mechanism that checks the value of a property, then, depending on the value of that property, changes the value of another property.

   • Example:

         <Trigger Property="IsFocused" Value="True">
             <Setter Property="Background" Value="Navy" />
         </Trigger>
     

   • This trigger could be implemented in the C# code-behind file using an event handler that fires when the Enter event occurs.

   • Triggers are used to allow designers an alternative to writing C# code.

10. WPF Resources   PizzaGuy1, PizzaGuy2 Examples
    • In the PizzaGuy1 Example, the image is set directly without defining any resources.

    • In the PizzaGuy2 Example, a resource is created that contains the image. Then the source image of the Image control is set from this resource

    • To add an ImageBrush resource to the window:

          <Window.Resources>
              <ImageBrush x:Key="brush" 
                  ImageSource="c:/Pizza.jpg" />
          </Window.Resources>
      

    • To use the ImageBrush resource to paint a Rectangle element:

         <Rectangle Name="rectangle1" Stroke="Black" 
                   Fill="{StaticResource brush}" />
      
      

    • The corresponding C#.Net statements that fill the Rectangle element rect1 with an ImageBrush:

          ResourceDictionary dict = new ResourceDictionary();
          ImageBrush brush = new ImageBrush();
          brush.ImageSource = new BitmapImage(
              new Uri("c:/Pizza.jpg"));
          dict.Add("brush", brush);
          rect1.Fill = (ImageBrush) dict["brush"];
      

11. Data Binding   Slider2, HaveBirthday1, HaveBirthday2 Examples
    • The simplest form of data binding is to bind the property value of one control to a property of another. This statement binds the Text property of a TextBox to the Value propery of the Slider control sldTemperature:

          <TextBox Text="{Binding Path=Value, 
                   ElementName=sldTemperature}">"
      

      This binding causes the textbox to show a double precision number with 14 digits behind the decimal point. To show fewer digits behind the decimal or to show an integer in the textbox, a Converter object is required.

    • The Slider2 Example uses a Converter object to format the slider value in the textbox.

    • The HaveBirthday1 Example uses Winforms machinery for displaying the properties of a class object in textboxes. The Age property is updated when the age changes. This example is similar to the AgeReached Example from the C#-3 lecture.

    • The HaveBirthday2 Example uses XAML data binding machinery for keeping the textbox values synchronized with the Person object. The Person class implements the INotifyPropertyChanged interface and uses the AgeChanged property to signal when the Age textbox should be updated.

12. Styles   TicTacToe1, TicTacToe2, TicTacToe4, TicTacToe5
    • TicTacToe1 Example   A style named CellTextStyle is defined in Window.Resources. This style is then applied to each button in the application. A StatusTextStyle is also defined that is based on the CellTextStyle.

    • TicTacToe2 Example   In addition to CellTextStyle and StatusTextStyle, two new styles named XStyle (Red) and OStyle (Green) based on CellTextStyle are defined.

    • TicTacToe4 Example   Use the PlayerMove class to keep trace of the move number.

    • TicTacToe5 Example   Use triggers to show tooltips telling the players where to move.

    • Some WPF Style Details

13. Transforms   HorseRace Example
    • To rotate a control a specified number of degrees:

      <Button name="button1">
          <Button.RenderTransform>
              <TransformGroup>
                  <RotateTransform Angle="45" />
              </TransformGroup>
          </Button.RenderTransform>
          Test Button
      </Button>
      

    • Here is a table of transform types.

14. Documents   Document1, Document2 Example
    • The Document1 Example uses a FlowDocumentViewer object to display an embedded FlowDocument.

    • See this HTML/FlowDocument Comparison.

    • The Document2 Example loads an external XAML FlowDocument into a FlowDocumentViewer control at runtime. An WinForms OpenFileDialog is used to choose the file to load.