Figures

FIGURE 1.1: Windows Forms controls overlapping. Notice that each control obscures the others.

FIGURE 1.2: WPF controls overlapping, with opacity set to semitransparency. Notice that all the controls compositing together are visible, including the background image.

FIGURE 1.3: Comparing vector and raster graphics. Notice that zooming in on a vector graphic does not reduce its crispness.

FIGURE 1.4: WPF controls with a variety of transformations applied. Despite the transformations, these controls remain fully functional.

FIGURE 1.5: WPF controls are built out of composition and containment. The button shown here contains both text and an image.

FIGURE 1.6: The power of composition, as revealed by zooming in on the composite button shown in Figure 1.5

FIGURE 1.7: Displaying a simple HTML document in Internet Explorer

FIGURE 1.8: Displaying a WPF document in Internet Explorer

FIGURE 1.9: Displaying a WPF document in Internet Explorer using controls and layout from WPF

FIGURE 1.10: Running an application authored in XAML. The program can be run in a top-level window or hosted in a browser.

FIGURE 1.11: Empty window created in an application

FIGURE 1.12: A simple button in a window

FIGURE 1.13: Two buttons inside of a stack panel

FIGURE 1.14: Several more controls added to a window

FIGURE 1.15: Several controls inside of a wrap panel

FIGURE 1.16: Clicking a button to cause changes in another element

FIGURE 1.17: Binding to a resource

FIGURE 1.18: Data binding between two controls

FIGURE 1.19: Rectangle filled with a gradient

FIGURE 1.20: Using a visual brush to fill a rectangle

FIGURE 1.21: Controls used as the material for a 3D shape

FIGURE 1.22: Adding rotation animation to our 3D scene

FIGURE 1.23: Buttons with a custom template, provided by a style

FIGURE 2.1: A very simple application in a browser

FIGURE 2.2: XAML Browser Application running in a browser

FIGURE 2.3: Desktop application

FIGURE 2.4: Desktop navigation-based application

FIGURE 2.5: Referencing a resource from the Internet

FIGURE 2.6: Running an application using configuration settings

FIGURE 2.7: Images loaded using a fully qualified path or URI

FIGURE 2.8: Structure of an application with various types of resources

FIGURE 2.9: Simple display: a window with a button

FIGURE 2.10: A boring window

FIGURE 2.11: Showing a window using multiple methods

FIGURE 2.12: Showing a window with the Owner property

FIGURE 2.13: Displaying the list of open windows

FIGURE 2.14: A window with two instances of a newly defined user control

FIGURE 2.15: Logical model of how referencing a user control works

FIGURE 2.16: Logical model for navigation

FIGURE 2.17: Initial navigation display

FIGURE 2.18: After navigating to page 2

FIGURE 2.19: Entering data in name.xaml

FIGURE 2.20: Consuming the data from name.xaml

FIGURE 2.21: The navigation flow that we want after the user has logged into our program

FIGURE 2.22: Logic flow of a console application

FIGURE 2.23: Our first page function: displaying “Welcome!”

FIGURE 2.24: Flow of navigation with page functions

FIGURE 2.25: Compiling an XBAP application: inputs and outputs

FIGURE 2.26: Internet Explorer displaying an HTML page

FIGURE 2.27: Internet Explorer displaying the download dialog for a XAML Browser Application

FIGURE 2.28: Internet Explorer displaying a XAML Browser Application

FIGURE 2.29: Browser hosting: PresentationHost view

FIGURE 2.30: Loose XAML hosted in the browser

FIGURE 3.1: The three principles of controls: element composition, rich content, and simple programming model

FIGURE 3.2: “Hello World” in a button

FIGURE 3.3: A button, with the elements generated to display it

FIGURE 3.4: Using several ContentPresenter objects to display different bits of data, and the corresponding display tree

FIGURE 3.5: ListBox containing several strings, and its display tree

FIGURE 3.6: Button’s display tree (notice ButtonChrome)

FIGURE 3.7: A button templated with a rectangle, and its display tree

FIGURE 3.8: The button after the new template is applied, and its display tree

FIGURE 3.9: A button with a more artistic template, and its display tree

FIGURE 3.10: A button with a template that uses template binding

FIGURE 3.11: Making a window template can create a common style for an application’s entire user interface.

FIGURE 3.12: The Button class hierarchy

FIGURE 3.13: Several button controls

FIGURE 3.14: The two basic list types: ListBox and ComboBox

FIGURE 3.15: Windows XP control panel in category mode: an example of a list box with custom layout

FIGURE 3.16: ListBox with a grid item layout

FIGURE 3.17: Using ControlTemplate to customize more than just the layout of a list box

FIGURE 3.18: ListView displaying items with the built-in GridView

FIGURE 3.19: TreeView displaying a hierarchy of lists

FIGURE 3.20: Making a list box into a radio button list

FIGURE 3.21: An alternative presentation for a menu

FIGURE 3.22: A window with a simple menu

FIGURE 3.23: Two toolbars—one with buttons, the other with a text box and a button

FIGURE 3.24: Toolbar with items in the overflow menu

FIGURE 3.25: Various containers nested

FIGURE 3.26: A slider control

FIGURE 3.27: An abstract text model

FIGURE 3.28: RichTextBox with some text selected

FIGURE 3.29: TextOffset example, showing how the start and end tokens of an element occupy space in the text object model

FIGURE 3.30: Simplified markup for text, with the corresponding offsets of each item

FIGURE 3.31: Incorrectly implemented find functionality

FIGURE 3.32: Working with the ink object model

FIGURE 3.33: Adjusting the display using additional properties from the ink object model

FIGURE 3.34: InkCanvas recognizing gestures

FIGURE 3.35: All the views of a document. Notice that FlowDocumentReader has a view control to let us see the document in either page mode or scrolling mode, and it provides search functionality.

FIGURE 3.36: ToolTip in action

FIGURE 3.37: Templated ToolTip, with transparency

FIGURE 3.38: Various borders created by adjusting the radius and thickness of the edges

FIGURE 3.39: A window with a pop-up over it

FIGURE 3.40: A dialog with the scrollbar appearing in the list box

FIGURE 3.41: A dialog with a scroll viewer at the root. Notice that the list box no longer has a scrollbar.

FIGURE 3.42: Viewbox scales the content inside of it to fit a space

FIGURE 4.1: Visible, collapsed, and hidden buttons. Notice that the collapsed button is completely missing.

FIGURE 4.2: Aligning buttons in a panel

FIGURE 4.3: Setting margins around buttons in a panel

FIGURE 4.4: Three buttons with no transforms applied

FIGURE 4.5: Applying RenderTransform to each button

FIGURE 4.6: Applying LayoutTransform to each button

FIGURE 4.7: Effects of the z-index on the layout of controls

FIGURE 4.8: Canvas using different origins for buttons

FIGURE 4.9: The magical missing canvas

FIGURE 4.10: Using Canvas to “float” controls out of the layout

FIGURE 4.11: Three stack panels nested together

FIGURE 4.12: Horizontal StackPanel clipping text instead of wrapping

FIGURE 4.13: Windows Explorer, a classic example of dock layout

FIGURE 4.14: Windows Explorer, with the four major parts highlighted

FIGURE 4.15: Using DockPanel to build the classic dock layout

FIGURE 4.16: Adjusting the order of children affects the layout

FIGURE 4.17: WrapPanel in action

FIGURE 4.18: UniformGrid with a 2×3 layout

FIGURE 4.19: UniformGrid with too many children

FIGURE 4.20: A simple use of the Grid layout

FIGURE 4.21: Star sizing allows for percentages.

FIGURE 4.22: Percentages in star sizing are weighted.

FIGURE 4.23: Grid sharing size information within a single column

FIGURE 4.24: Grid with and without shared sizing

FIGURE 4.25: Two Grid controls sharing sizing information

FIGURE 4.26: The grid layout of MSN Messenger

FIGURE 4.27: A mockup of the columns and rows that we want

FIGURE 4.28: Grid resizing the final layout

FIGURE 4.29: Resizing MSN Messenger using the splitter above the text area

FIGURE 4.30: GridSplitter in action

FIGURE 4.31: An example of algorithmic layout: a circle

FIGURE 4.32: A model for calculating the desired size of the circle layout

FIGURE 4.33: A model for arranging children in the circle layout

FIGURE 5.1: The four basic geometries

FIGURE 5.2: Close-up of rectangles with pixel snapping on and off. Notice how crisp the snapped version is, even though the actual rectangle doesn’t exactly fit on pixel boundaries.

FIGURE 5.3: A complex path built from all the segments of multiple figures

FIGURE 5.4: A variety of ways to combine geometries

FIGURE 5.5: Various color profiles showing shades of gray

FIGURE 5.6: Basic attributes of the two types of gradient brushes

FIGURE 5.7: Effects of adjusting the attributes of RadialGradient

FIGURE 5.8: Effects of SpreadMethod on radial and linear gradient brushes

FIGURE 5.9: RelativeToBoundingBox and Absolute mapping modes compared

FIGURE 5.10: Close-up of the Windows XP–style border

FIGURE 5.11: Using the Absolute mapping mode to create a fixed-size gradient

FIGURE 5.12: Using Viewbox, Viewport, and TileMode to create a fill from a portion of an image

FIGURE 5.13: Using VisualBrush to fill several rectangles

FIGURE 5.14: Shapes drawn with a pen. Each shape is drawn with three different thicknesses of pens.

FIGURE 5.15: Shapes with different line joins applied

FIGURE 5.16: Shapes with different line caps applied

FIGURE 5.17: Shapes with different dash caps applied. All the various thicknesses are using the same dash style.

FIGURE 5.18: Using DrawingBrush in combination with GeometryDrawing

FIGURE 5.19: The drawing graph created to draw the display in Figure 5.18

FIGURE 5.20: Using DrawingBrush to fill a shape with a border

FIGURE 5.21: Using Rectangle’s built-in stroke support

FIGURE 5.22: The Image control stretching a raster image. The control is the same size for each example.

FIGURE 5.23: Output of an image that has passed through the pipeline

FIGURE 5.24: Windows Vista properties dialog showing metadata about a picture

FIGURE 5.25: Rendering a visual into an image, and displaying it (on the right)

FIGURE 5.26: Rectangle filled with translucent white, on a checkered background

FIGURE 5.27: Rectangle filled with a gradient, with each stop having an alpha value

FIGURE 5.28: Several shapes with an opacity mask applied to their container

FIGURE 5.29: Several shapes with an image-based opacity mask

FIGURE 5.30: The image used for the opacity mask in Figure 5.29

FIGURE 5.31: Selection of BitmapEffect elements applied to images and controls

FIGURE 5.32: A simple 3D shape (triangle) being viewed

FIGURE 5.33: Partial construction of a 3D cube

FIGURE 5.34: First attempt at using a texture, without texture coordinates

FIGURE 5.35: The same rectangle, with a texture gradient applied to it

FIGURE 5.36: A three-faced cube, with a linear gradient texture applied

FIGURE 5.37: Spheres with different types of materials applied

FIGURE 5.38: Spheres with different types of brushes

FIGURE 5.39: Types of lights

FIGURE 5.40: AxisAngleRotation3D’s two components: a 3D axis and an angle around that axis

FIGURE 5.41: Effects of rotating a cone in 3D around different axes

FIGURE 5.42: Hello World in text

FIGURE 5.43: Hello World, multilingual and multiformat

FIGURE 5.44: Hello World, now with multiple paragraphs

FIGURE 5.45: Hello World, hosted in the FlowDocumentReader control

FIGURE 5.46: Hello World, now with UI controls hosted in-line

FIGURE 5.47: Hello World, printed as an XPS document being viewed in Internet Explorer

FIGURE 5.48: The block element’s box model for layout

FIGURE 5.49: KeepWithNext prevents column and page breaks immediately following a heading

FIGURE 5.50: Two lists with different markers

FIGURE 5.51: Two tables with thick borders added around each table and thin borders around cells

FIGURE 5.52: Figures and floaters positioned in a paginated document, with marks for their anchors

FIGURE 5.53: Using document-level formatting, including automatic sizing, to control columns

FIGURE 5.54: A demonstration of several alternative forms of Palatino Linotype

FIGURE 5.55: Hyphenation and justification control the way in which words are broken and positioned in a paragraph.

FIGURE 5.56: A time hierarchy, with a double animation starting at 2 seconds and lasting 5 seconds

FIGURE 5.57: Key frames for two animations: the width and height of an ellipse

FIGURE 5.58: Using animation in a template to create an interactive button

FIGURE 5.59: TextEffects allows targeting of animation to individual characters.

FIGURE 5.60: Music playing (You didn’t think that would require a picture, did you?)

FIGURE 5.61: Playing a video using MediaElement

FIGURE 5.62: Using video as the foreground for a rich text box

FIGURE 6.1: Overriding resources in the element hierarchy

FIGURE 6.2: Binding from TextBox to ContentControl

FIGURE 6.3: Binding TextBox to FontFamily

FIGURE 6.4: The conceptual model of binding using a value converter

FIGURE 6.5: Binding using a value converter

FIGURE 6.6: Binding with a data template

FIGURE 6.7: The object model of a Person object. Person has a single name and zero or more addresses.

FIGURE 6.8: Complex binding paths

FIGURE 6.9: Editing an object using two-way data binding

FIGURE 6.10: Editing a list using two-way binding

FIGURE 6.11: Selecting nodes from an XML document

FIGURE 6.12: Binding using a template selector

FIGURE 6.13: A list box displaying our one directory

FIGURE 6.14: Simple hierarchical binding using nested data templates

FIGURE 6.15: More hierarchy using more nested data templates

FIGURE 6.16: Using HierarchicalDataTemplate to provide data to a TreeView control

FIGURE 6.17: Using ListBox to show currency management

FIGURE 6.18: Filtering items out of a view

FIGURE 6.19: Sorting items in a view

FIGURE 6.20: Grouping items in a view

FIGURE 6.21: Displaying a bitmap image with ContentControl

FIGURE 6.22: Displaying a bitmap image with a more interesting template

FIGURE 6.23: Displaying a bitmap image with more chrome

FIGURE 6.24: More complex chrome, including actions and additional binding

FIGURE 6.25: Reusing a complex template in a list

FIGURE 7.1: Display tree (left) of a button containing another button (right)

FIGURE 7.2: Examples illustrating the spectrum of coupling actions

FIGURE 7.3: Event tunneling and bubbling in an element tree

FIGURE 7.4: Execution flow of a command using an event to route notifications

FIGURE 7.5: Displaying the list of files

FIGURE 7.6: Running the program with data-bound commands

FIGURE 7.7: Using DataTrigger to replace a value converter, and setting multiple properties

FIGURE 8.1: Using property setters to apply styles to UI, documents, and media

FIGURE 8.2: Our skinning application with no skin applied

FIGURE 8.3: Our skinning application with a custom skin applied

FIGURE 8.4: Property value precedence

FIGURE 8.5: Property value precedence with base styles

FIGURE 8.6: Using a BasedOn style to apply common properties to multiple styles

FIGURE 8.7: Consistency in a theme is critical to building a usable application.

FIGURE 8.8: Consistency applies also to using a custom theme for all the controls, or at least matching the existing ones.

FIGURE A.1: Downloading some HTML content asynchronously