You are previewing Silverlight 4 User Interface Cookbook.
O'Reilly logo
Silverlight 4 User Interface Cookbook

Book Description

Build and implement rich, standard-friendly user interfaces with Silverlight and Expression Blend

  • The first and only book to focus exclusively on Silverlight UI development.

  • Have your applications stand out from the crowd with leading, innovative, and friendly user interfaces.

  • Detailed instructions on how to implement specific user interface patterns together with XAML and C# (where needed) code, and explainations that are easy-to-understand and follow..

  • Real world projects which you can explore in detail and make modifications as you go.

  • Written by Vibor Cipan - Microsoft MVP for Expression Blend and WPF, and Silverlight UX specialist

In Detail

Silverlight makes it much easier to build web applications with highly usable, interactive, and exciting user interfaces. However, with so many new options open to designers and developers, making the best use of the tools available is not always so easy. It's ease of use and rapid development process has left one area completely uncovered - how to design, build, and implement professional and usable interfaces, and create an enjoyable user experience and interaction.

Written by a Microsoft MVP and Silverlight Prototyping Specialist, this book is the first and only book on developing Silverlight User Interfaces. Clear, step-by-step instructions show how to build all the user interface elements that users look forward to in a cutting edge app. This book offers essential recipes, with each recipe depicting the commonly used user interface patterns built with Silverlight, and in some cases, with WPF to showcase the possibilities.

The author's experience in designing and developing user interfaces enables him to share insights on creating professional interfaces in a clear and friendly way. The book starts off with recipes dealing with fixed and fluid layouts, building custom command link controls, working with navigation, and collapsible panels, and then moves on to the more advanced topics such as calendars, alternating row colors, and task panes. The author covers a number of different UI patterns, controls, and approaches accompanied by XAML and C# code where needed (and explained), along with usage context and practical, proven, and professional techniques for specific controls and patterns.

From maps to task panes, and web cam support to pixel shaders, this Cookbook provides you with a rich selection of Silverlight UI recipes. It covers all that you need to know in order to design and implement a user interface, together with professional user experience and interface guidelines to make your solutions and applications pleasurable for your users.The author has found himself in the role of both, a designer and a developer, at different points in his professional career, and his motive was to create a book that will serve as a useful resource for designers and developers trying to find their way with Silverlight and Expression Blend.By the end of the book, you will be able to create a rich, professional, and standards-compliant user interface.

Design and implement professional user interfaces with Silverlight.

Table of Contents

  1. Silverlight 4 User Interface Cookbook
    1. Silverlight 4 User Interface Cookbook
    2. Credits
    3. Foreword
    4. About the Author
    5. Acknowledgement
    6. About the Reviewers
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Errata
        2. Piracy
        3. Questions
    8. 1. Layouts and General Content Organization
      1. Introduction
      2. Fluid layout
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. How to do it...
        5. How it works...
        6. There's more...
          1. More info about grid sizing, rows, and columns
          2. When to use fixed and when to use fluid layouts
        7. See also
      3. Creating a navigation pane from scratch
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Hosting content into specific tabs
          2. How to align header text to left
          3. When to use navigation pane?
        5. See also
      4. Window management and positioning
        1. Getting ready
        2. Title bar controls and window borders - How to do it...
        3. Window sizes and states - How to do it...
        4. Window positioning - How to do it...
        5. Title bar controls and window borders- How it works...
          1. ResizeMode
          2. WindowStyle
        6. Window sizes and states - How it works...
          1. WindowState
        7. Window positioning - How it works...
          1. WindowStartupLocation
        8. There's more...
          1. What is the minimum screen resolution you should be targeting?
          2. General window usage guidelines
        9. See also
      5. Wizards
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Brief overview of different wizard page types
            1. Getting started page
            2. Choice page(s)
            3. Commit page
            4. Progress page
            5. Follow-up page
          2. To design resizable wizards or not
          3. When to use wizards
            1. Guidelines
        5. See also
      6. Progressive disclosure—showing additional controls on demand
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Changing the expander control's header label
          2. When to use progressive disclosure
        5. See also
      7. Control docking with DockPanel
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Change the docking order of child elements
          2. Change the orientation of a dock panel
          3. Personal view
        5. See also
      8. Journal navigation
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Removing the navigation chrome
          2. Difference between Title and WindowTitle
          3. When to use journal navigation
        5. See also
      9. Tabs
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Changing tab orientation
          2. Adding icons in tabs
          3. When to use tabs
            1. Real-world metaphor
          4. Implementation guidelines
        5. See also
      10. Adding a status bar area
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Adding other controls to StatusBar
          2. Adding SizeGrip to StatusBar
          3. When to use status bar
          4. Implementation guidelines
    9. 2. Actions and Commands
      1. Introduction
      2. Command buttons
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. When to use command buttons?
            1. When to use ellipses?
          2. Tone and manner
          3. Default and cancel buttons
            1. Make sense of defaults
          4. General guidelines
          5. More about command buttons
        5. See also
      3. Classical menus
        1. Getting ready
        2. How to do it....
        3. How it works...
        4. There's more...
          1. Executing commands
          2. Adding accelerator / shortcut keys
          3. Creating cascading menus
          4. Adding icons
          5. Creating checkable menu items
          6. Menu design and usage guidelines
        5. See also
      4. Context (right-click) menus
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Context menu design and usage guidelines
        5. See also
      5. Progress indicators with known process duration
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. General guidelines
        5. See also
      6. Progress indicators with unknown process duration
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more
          1. General guidelines
        5. See also
      7. Creating menu drop-down
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      8. Command links
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Guidelines
        5. See also
      9. Split button and creating one from scratch
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. How to do it with Silverlight?
          2. Guidelines
      10. Multiple item selections with simple ListBox
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Explaining the SelectionMode property
            1. Multiple
            2. Single
          2. Personal note
        5. See also
      11. Multiple item selections with ListBox and CheckBox combinations
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. General guidelines
          2. See also
    10. 3. Searching, Finding, and Navigating
      1. Introduction
      2. Designing prominent action points
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      3. How to create faceted navigation and classification
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      4. Creating tree views
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Some guidelines for usage
        5. See also
      5. Creating and using expanders and collapsible panels
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Why would you use this pattern?
        5. See also
      6. Creating and using a paging pattern
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      7. Using titled sections
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Why would you use and implement this pattern?
          2. Considerations for implementation
        5. See also
      8. Creating and using task panes(aka Action Panels)
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Why would you use and implement this pattern?
          2. Some implementation hints
          3. What controls can you host in task panes?
        5. See also
      9. Creating and utilizing promoted actions
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Some implementation hints
            1. Ask Luke Wroblewski...
        5. See also
    11. 4. Date and Time Input, Tables, and Ratings
      1. Introduction
      2. Designing date picker interface
        1. Getting ready
        2. How to do it...
          1. How it works...
          2. There's more...
            1. Some guidelines
          3. See also
        3. Using and implementing the calendar interface
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. When to use this pattern and some general guidelines
          5. See also
        4. Designing time input interface
          1. Getting ready
          2. How to do it...
          3. How it works...
            1. Features rundown
          4. There's more...
            1. Some guidelines
          5. See also
        5. Implementing star-based rating
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Some guidelines for design and implementation
        6. Designing list views with alternating row colors
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Roots from the real life situations
            2. A few design guidelines
    12. 5. Maps, Pop-up Windows, and Escaping the Browser
      1. Introduction
      2. Implementing pop-up window (modal dialogs) in Silverlight
        1. Getting ready
        2. How to do it - adding ChildWindow
        3. How to do it -changing the background color of ChildWindow
        4. How to do it -removing a close button from ChildWindow
        5. How to do it -positioning ChildWindow
        6. How it works...
        7. There's more...
          1. Typical usage scenario and case for lightboxes
            1. Downsides
          2. Context and position
        8. See also
      3. Designing responsive enabling user interface
        1. Getting ready
        2. How to do it...
        3. How it works...
          1. What is FromArgb?
        4. There's more...
          1. Single most important fact here—context!
        5. See also
      4. Adding maps to Silverlight applications
        1. Getting ready
        2. How to do it -adding Bing Maps Silverlight control
        3. How to do it -changing map modes with XAML
        4. How to do it -changing map modes with C#
        5. How to do it -navigating to a specific location(Dubrovnik, Croatia)
        6. How to do it -changing labels to, let's say, German
        7. How it (all) works...
        8. There's more...
          1. Use the Interactive SDK for free
        9. See also
      5. Building full-screen Silverlight experiences
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Some limitations with the full-screen Silverlight experiences
        5. See also
      6. Implementing out-of-browser experiences
        1. Getting ready
        2. How to do it...
        3. How to do it -detecting network availability
        4. How it (all) works...
        5. See also
    13. 6. New Controls and Avant-Garde Features
      1. Introduction
      2. Webcam support and printing
        1. Getting ready
        2. How to do it -getting started with webcam
        3. How to do it -taking stills from your webcam
        4. How to do it -printing stills from your webcam
        5. How it works...
        6. See also
      3. Exploring and using pixel shaders and effects
        1. Getting ready
        2. How to do it -getting started with effects
        3. How to do it -modifying effect properties(creating a water ripple effect)
        4. How it works...
          1. What about setting effects using Expression Blend 4 and not through code?
        5. There's more...
        6. See also
      4. Animating ListBox items
        1. Getting ready
        2. How to do it -getting started with effects
        3. How it works...
        4. There's more…
        5. See also
      5. PathListBox abandoning the rectangular ListBox
        1. Getting ready
        2. How to do it -getting started with effects
        3. How it works...
        4. See also