Building A Data-Centric Application In WPF Using The New DataGrid And Ribbon Controls

Samantha DuranteProgram Manager, WPFMicrosoft Corporation

Mark Wilson-ThomasProgram Manager, WPF DesignerMicrosoft Corporation

PC45

Samantha Durante Program Manager on the WPF framework team Responsible for the Ribbon

and DataGrid controls Feedback to

samand@microsoft.com Mark Wilson-Thomas

Program Manager on the “Cider” WPF and Silverlight Designer team on Visual Studio

Responsible for Layout features in the designer Feedback to

mwthomas@microsoft.com

About Us…

Learn how we’re enabling you to build Data-centric Line of Business applications in WPF much more easily

See the new Ribbon and DataGrid controls and understand how to use them right now

See how wiring up data to your application will be easier in Visual Studio 2010

All of this mostly in demo, not slides! Slides will recap so you can find stuff later…

What To Expect From This Session…

"Introducing Southridge Real Estate"Mark Wilson-Thomas

demo

DataGrid Basics

Samantha Durante

demo

Great features out-of-the-box Autogenerate columns in one line Resizing, reordering, sorting,

selection, editing, keyboard navigation Use stock columns or define your own

Where to get DataGrid & DatePicker Download V1 today in the WPF Toolkit www.codeplex.com/wpf

Later, also available in .NET 4.0

Recap – DataGrid Basics

Ribbon Control Basics

Samantha Durante

demo

Getting started with Ribbon RibbonCommands are the heart of the Ribbon Use RibbonWindow for title bar integration Customize resizing without writing layout code

Where to get Ribbon Download CTP today at Office UI Licensing Site http://msdn.microsoft.com/officeui Sign the Office License to access the download Use Office UI Licensing Guidelines in to improve

the quality of your application V1 available in 2009

Recap – Ribbon Control Basics

Advanced DataGrid And Ribbon FeaturesSamantha Durante

demo

Row Details Show additional fields within the grid

Row-Level Validation Cross-field validation for end-user input

DataGrid Customization Extensive styling to create a branded, unique UI

Recap – Advanced DataGrid Concepts

Built-in skins for Win7 & Office 2007

“Smart UI” generates appropriate visuals Application Menu Items Quick Access Toolbar Contextual Tabs

Full control over resizing layout Replace RibbonWrapPanel to

override default behavior

Recap – Advanced RibbonConcepts

Wiring Up A Details Screen To DataMark Wilson-Thomas

demo

Visual Studio 2010 Databinding – RAD Data Support For WPF

Initial setup: Familiar Windows Forms RAD Data Sources Window experience

Editing: Powerful data binding picker lets you customize and create data bindings without understanding data binding syntax

XAML: Will provide data binding intellisense support, for those who prefer to work in XAML

WPF is well on its way to being a great platform for LOB developers

Our new controls will help make LOB developers more productive

You can try out the new controls today at DataGrid, DatePicker: www.codeplex.com/wpf Ribbon: http://msdn.microsoft.com/officeui

Our next generation Visual Studio tooling will include many new features to help you be more productive, especially with data binding

Takeaways…

PC07 WPF: Extensible BitmapEffects, Pixel Shaders, and WPF Graphics Futures - David TeitlebaumThurs 10/30 1:45PM - 3:00PM - 403AB

Catch these on Video after PDC: PC27 Microsoft Silverlight, WPF and the

Microsoft .NET Framework: Sharing Skills and Code - Ian Ellison-Taylor

PC46 WPF Roadmap-Kevin Gjerstad PC03 Windows 7: Developing Multi-touch

Applications - Reed Townsend, Anson Tsao TL36 Microsoft .NET Framework: Declarative

Programming Using XAML - Rob Relyea, Daniel Roth

Related Sessions You Shouldn't Miss…

Evals & Recordings

Please fill

out your

evaluation for

this session at:

This session will be available as a recording at:

www.microsoftpdc.com

Please use the microphones provided

Q&A

© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market

conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Microsoft’s Ribbon Strategy

MFC

The Ribbon LandscapeSoftware vendors have diverse needs

Goal: Enable a range of apps to use Ribbons

Future Plans Markup for

MFC Ribbon Designer tools

Target: MFC Native

Win2k or newer

Office 2007 Visual Style

Available now in Visual Studio 2008 SP1

Scenic

Target: Native

Vista or newer

Windows Visual Style

Coming Soon… Ships with Windows 7

WPF

Target: Managed

Needs .NET 3.5

Office 2007 & Windows Styles

Coming Soon.. Official Release in 2009

DataGrid Performance

Scroll Test WPF DataGrid• Recycling• Row &

Column Virtualization

WPF ListView• Recycling• Row

Virtualization

WinForms DataGrid

Page down 50 pages 5.5 sec 6.5 sec 3.8 sec

Line down 500 lines 12.1 sec 11.9 sec 3.9 sec

Sort Test WPF DataGrid with Custom Sort*

WinForms DataGrid

Sort 6,000 rows 59 msec 35 msec

Sort 300,000 rows 1.8 sec 1.4 sec

*Custom sort implementation instructions can be found on Jossef Goldberg’s blog:http://blogs.msdn.com/jgoldb/archive/2008/08/28/improving-microsoft-datagrid-ctp-sorting-performance-part-2.aspx

Implementing The Features From The Demo

Appendix

Create a DataGrid

Out of the box, you get Auto-generated columns End-user Row and Column Resizing End-user Drag/Drop Column Reordering Sorting Editing Variety of Selection Units/Modes

Recap – DataGrid Basics

<dg:DataGrid ItemsSource="…">

Edit the Columns Collection On design surface, right-click DataGrid and

choose DataGridAdd/Edit Columns

In XAML

Recap – DataGrid Basics

<dg:DataGrid AutoGenerateColumns="False"><dg:DataGrid.Columns>

<dg:DataGridTextColumn Header="Title" Binding="{Binding Title}“Width=“SizeToCells”/>

</dg:DataGrid.Columns></dg:DataGrid>

Create a Custom Column

Recap – DataGrid Basics

<dg:DataGridTemplateColumn Header="Appointment">

<dg:DataGridTemplateColumn.CellTemplate> <DataTemplate> <dg:DatePicker SelectedDate="{Binding

ApptDate}"/> </DataTemplate> </dg:DataGridTemplateColumn.CellTemplate></dg:DataGridTemplateColumn>

Define RibbonCommand Ribbon development is view-model centric RibbonCommands are the heart

of Ribbon’s intent-driven paradigm Define a RibbonCommand for each control and group

Recap – Ribbon Control Basics

<r:RibbonCommand x:Key="OpenCommand"

CanExecute="RibbonCommand_CanExecute"Executed="RibbonCommand_Executed"LabelTitle="Open Profile"ToolTipTitle="Open Profile"SmallImageSource="OpenIcon.png"/>

Add Ribbon with Tabs, Groups, & Controls

Recap – Ribbon Control Basics

<r:Ribbon> <r:RibbonTab Label="Home"> <r:RibbonGroup Name="Price" Command="{…}"> <r:RibbonButton Command="{…}"/> <r:RibbonButton Command="{…}"/> <r:RibbonButton Command="{…}"/> </r:RibbonGroup> </r:RibbonTab></Ribbon>

Change Window to RibbonWindow In XAML

In code behind

Recap – Ribbon Control Basics

<Window> <r:RibbonWindow>

public partial class Window1 : Window

public partial class Window1 : RibbonWindow

Determine Resizing Behavior Default RibbonWrapPanel collapses groups

cyclically from right to left as width decreases

Set GroupSizeDefinitions on the group to specify layout templates

Set GroupSizeReductionOrder on the tab to specify the collapse order of the groups

Recap – Ribbon Control Basics

Row Details Set the RowDetailsTemplate

Choose a Visibility Mode

Recap – Advanced DataGrid concepts

<dg:DataGrid.RowDetailsTemplate> <DataTemplate> <TextBlock Text="{Binding Description}"/> </DataTemplate></dg:DataGrid.RowDetailsTemplate>

<dg:DataGrid RowDetailsVisibilityMode="VisibleWhenSelected">

Row Level Validation Define the Validation rule and

apply it to the DataGrid

Define the Validation Error Template

Recap – Advanced DataGrid concepts

<dg:DataGrid.RowValidationRules><d:DateValidationRule/>

</dg:DataGrid.RowValidationRules>

<dg:DataGrid.RowValidationErrorTemplate><ControlTemplate> …

</ControlTemplate><dg:DataGrid.RowValidationErrorTemplate>

DataGrid Styling Properties Background & AlternatingRowBackground GridLinesVisibility Horizontal/VerticalGridLinesBrush HeadersVisibility RowHeaderWidth & ColumnHeaderHeight ColumnHeaderStyle & ColumnHeaderTemplate RowHeaderStyle & RowHeaderTemplate CellStyle, RowStyle

Recap – Advanced DataGrid Concepts

Apply Office 2007 Skin to Ribbon

Recap – Advanced Ribbon Concepts

<Window.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/RibbonControlsLibrary;component/Themes/Office2007Blue.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary></Window.Resources>

Application Menu RibbonApplication[Split]MenuItems appear

as [Split]MenuItems only if they have children, otherwise they are buttons

Recap – Advanced Ribbon Concepts

<r:Ribbon.ApplicationMenu> <r:RibbonApplicationMenu Command="…"> <r:RibbonApplicationMenuItem Command="…"> <r:RibbonApplicationMenuItem

Command="…/> <r:RibbonApplicationMenuItem

Command="…/> </r:RibbonApplicationMenuItem>

Quick Access Toolbar Use the Placement attached property to

add controls to the QAT’s Customize Menu

Recap – Advanced Ribbon Concepts

<r:Ribbon.QuickAccessToolBar> <r:RibbonQuickAccessToolBar> <r:RibbonButton Command="…" r:RibbonQuickAccessToolBar.Placement="InCustomizeMenu"/> <r:RibbonToggleButton Command="…" r:RibbonQuickAccessToolBar.Placement="InToolBar"/>

Advanced Ribbon Resizing If complex resizing templates are needed

(e.g., Word 2007 Font group), replace the RibbonWrapPanel with a custom panel

Recap – Advanced Ribbon Concepts

<RibbonGroup Name="Font"><RibbonGroup.ItemsPanel>

<ItemsPanelTemplate><MyRibbonFontWrapPanel/>

</ItemsPanelTemplate></RibbonGroup.ItemsPanel>

Contextual Tabs

Recap – Advanced Ribbon Concepts

<r:Ribbon.ContextualTabGroups> <r:RibbonContextualTabGroup Label=“Draw"> <r:RibbonTab Label=“Format Picture"> … </r:RibbonTab> <r:RibbonTab Label=“Insert Drawing"> … </r:RibbonTab> </r:RibbonContextualTabGroup></r:Ribbon.ContextualTabGroups>