Frank La Vigne Lead Designer/Architect, Applied Information Sciences www.FranksWorld.com

Frank La Vigne Lead Designer/Architect, Applied Information Sciences

www.FranksWorld.com

Frank La Vigne Microsoft MVP: Tablet PC INETA Membership Mentor for DC, Maryland and Delaware Manager/Founder Silverlight SIG Lead Designer @ AIS Blog: www.franksworld.com Company: www.appliedis.com Twitter: @Tableteer Feedback to [email_address]

Frank La Vigne

Microsoft MVP: Tablet PC

INETA Membership Mentor for DC, Maryland and Delaware

Manager/Founder Silverlight SIG

Lead Designer @ AIS

Blog: www.franksworld.com

Company: www.appliedis.com

Twitter: @Tableteer

Feedback to

[email_address]

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 demos , not slides! Slides will recap so you can find stuff later…

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 demos , not slides!

Slides will recap so you can find stuff later…

Frank La Vigne

Frank La Vigne

Great features out-of-the-box Autogenerate columns in one line of XAML 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

Great features out-of-the-box

Autogenerate columns in one line of XAML

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

Frank La Vigne

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

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

Frank La Vigne

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

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

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

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

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

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

Frank La Vigne

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 get the new controls today at DataGrid, DatePicker: http://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

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 get the new controls today at

DataGrid, DatePicker:

http://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

Robot Pack - Lego NXT Robot Kit + WROX Robotics Developer Studio book Mobility Pack - LifeCam NX-6000 & Wireless Notebook Laser Mouse 6000 Gamer Pack - Gears of War 2, PGR4, Mass Effect, Xbox 360 Wireless Headset & 3-month XBOX Live Card MSDN Subscription - one-year VSTS 2008 Team Suite w/MSDN Premium Subscription SoftLayer : Free WS 2008 Web Edition and SQL Web Edition with any server order over $179 + Giveaways will happen at the end of the last session in each breakout room. You must fill out page 1 completely and you must be present to win.

Robot Pack - Lego NXT Robot Kit + WROX Robotics Developer Studio book

Mobility Pack - LifeCam NX-6000 & Wireless Notebook Laser Mouse 6000

Gamer Pack - Gears of War 2, PGR4, Mass Effect, Xbox 360 Wireless Headset & 3-month XBOX Live Card

MSDN Subscription - one-year VSTS 2008 Team Suite w/MSDN Premium Subscription

SoftLayer : Free WS 2008 Web Edition and SQL Web Edition with any server order over $179

© 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.

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 Target: Native Vista or newer Windows Visual Style Coming Soon… Ships with Windows 7 Target: Managed Needs .NET 3.5 Office 2007 & Windows Styles Coming Soon.. Official Release in 2009 Microsoft’s Ribbon Strategy MFC Scenic WPF

Goal: Enable a range of apps to use Ribbons

Future Plans

Markup for MFC Ribbon

Designer tools

*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 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

WPF DataGrid

Recycling

Row & Column Virtualization

WPF ListView

Recycling

Row Virtualization

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 <dg:DataGrid ItemsSource=&quot;…&quot;>

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

Edit the Columns Collection On design surface, right-click DataGrid and choose DataGrid  Add/Edit Columns In XAML <dg:DataGrid AutoGenerateColumns=&quot;False&quot;> <dg:DataGrid.Columns> <dg:DataGridTextColumn Header=&quot;Title&quot; Binding=&quot;{Binding Title}“ Width=“SizeToCells”/> </dg:DataGrid.Columns> </dg:DataGrid>

Edit the Columns Collection

On design surface, right-click DataGrid and choose DataGrid  Add/Edit Columns

In XAML

Create a Custom Column <dg:DataGridTemplateColumn Header=&quot;Appointment&quot;> <dg:DataGridTemplateColumn.CellTemplate> <DataTemplate> <dg:DatePicker SelectedDate=&quot;{Binding ApptDate}&quot;/> </DataTemplate> </dg:DataGridTemplateColumn.CellTemplate> </dg:DataGridTemplateColumn>

Create a Custom Column

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 <r:RibbonCommand x:Key=&quot;OpenCommand&quot; CanExecute=&quot;RibbonCommand_CanExecute&quot; Executed=&quot;RibbonCommand_Executed&quot; LabelTitle=&quot;Open Profile&quot; ToolTipTitle=&quot;Open Profile&quot; SmallImageSource=&quot;OpenIcon.png&quot;/>

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

Add Ribbon with Tabs, Groups, & Controls <r:Ribbon> <r:RibbonTab Label=&quot;Home&quot;> <r:RibbonGroup Name=&quot;Price&quot; Command=&quot;{…}&quot;> <r:RibbonButton Command=&quot;{…}&quot;/> <r:RibbonButton Command=&quot;{…}&quot;/> <r:RibbonButton Command=&quot;{…}&quot;/> </r:RibbonGroup> </r:RibbonTab> </Ribbon>

Add Ribbon with Tabs, Groups, & Controls

Change Window to RibbonWindow In XAML In code behind <Window>  <r:RibbonWindow> public partial class Window1 : Window  public partial class Window1 : RibbonWindow

Change Window to RibbonWindow

In XAML

In code behind

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

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

Row Details Set the RowDetailsTemplate Choose a Visibility Mode <dg:DataGrid.RowDetailsTemplate> <DataTemplate> <TextBlock Text=&quot;{Binding Description}&quot;/> </DataTemplate> </dg:DataGrid.RowDetailsTemplate> <dg:DataGrid RowDetailsVisibilityMode=&quot;VisibleWhenSelected&quot;>

Row Details

Set the RowDetailsTemplate

Choose a Visibility Mode

Row Level Validation Define the Validation rule and apply it to the DataGrid Define the Validation Error Template <dg:DataGrid.RowValidationRules> <d:DateValidationRule/> </dg:DataGrid.RowValidationRules> <dg:DataGrid.RowValidationErrorTemplate> <ControlTemplate> … </ControlTemplate> <dg:DataGrid.RowValidationErrorTemplate>

Row Level Validation

Define the Validation rule and apply it to the DataGrid

Define the Validation Error Template

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

DataGrid Styling Properties

Background & AlternatingRowBackground

GridLinesVisibility

Horizontal/VerticalGridLinesBrush

HeadersVisibility

RowHeaderWidth & ColumnHeaderHeight

ColumnHeaderStyle & ColumnHeaderTemplate

RowHeaderStyle & RowHeaderTemplate

CellStyle, RowStyle

Apply Office 2007 Skin to Ribbon <Window.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source=&quot;/RibbonControlsLibrary;component/Themes/Office2007Blue.xaml&quot; /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Window.Resources>

Apply Office 2007 Skin to Ribbon

Application Menu RibbonApplication[Split]MenuItems appear as [Split]MenuItems only if they have children, otherwise they are buttons <r:Ribbon.ApplicationMenu> <r:RibbonApplicationMenu Command=&quot;…&quot;> <r:RibbonApplicationMenuItem Command=&quot;…&quot;> <r:RibbonApplicationMenuItem Command=&quot;…/> <r:RibbonApplicationMenuItem Command=&quot;…/> </r:RibbonApplicationMenuItem>

Application Menu

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

Quick Access Toolbar Use the Placement attached property to add controls to the QAT’s Customize Menu <r:Ribbon.QuickAccessToolBar> <r:RibbonQuickAccessToolBar> <r:RibbonButton Command=&quot;…&quot; r:RibbonQuickAccessToolBar.Placement=&quot;InCustomizeMenu&quot;/> <r:RibbonToggleButton Command=&quot;…&quot; r:RibbonQuickAccessToolBar.Placement=&quot;InToolBar&quot;/>

Quick Access Toolbar

Use the Placement attached property to add controls to the QAT’s Customize Menu

Advanced Ribbon Resizing If complex resizing templates are needed (e.g., Word 2007 Font group), replace the RibbonWrapPanel with a custom panel <RibbonGroup Name=&quot;Font&quot;> <RibbonGroup.ItemsPanel> <ItemsPanelTemplate> <MyRibbonFontWrapPanel/> </ItemsPanelTemplate> </RibbonGroup.ItemsPanel>

Advanced Ribbon Resizing

If complex resizing templates are needed (e.g., Word 2007 Font group), replace the RibbonWrapPanel with a custom panel

Contextual Tabs <r:Ribbon.ContextualTabGroups> <r:RibbonContextualTabGroup Label=“Draw&quot;> <r:RibbonTab Label=“Format Picture&quot;> … </r:RibbonTab> <r:RibbonTab Label=“Insert Drawing&quot;> … </r:RibbonTab> </r:RibbonContextualTabGroup> </r:Ribbon.ContextualTabGroups>

Contextual Tabs