40
Using Windows Presentation Foundation in AutoCAD Fenton Webb Senior Developer Evangelist

UI Design Featuring WPF Part 1 CP114 5

Embed Size (px)

Citation preview

Page 1: UI Design Featuring WPF Part 1 CP114 5

Using Windows Presentation Foundation in AutoCADFenton WebbSenior Developer Evangelist

Page 2: UI Design Featuring WPF Part 1 CP114 5

About the Presenter

Fenton WebbDeveloper Technical ServicesAmericasAutodesk, Inchttp://twitter.com/fentonwebb

Fenton has been a member of the Autodesk DevTech team since 2000. Originally a member of our EMEA team, he has recently relocated to California to work for DevTech Americas.  Fenton is an expert in all the AutoCAD APIs, AutoCAD OEM, RealDWG and Revit. He particularly enjoys travelling to evangelise the APIs he support at our annual Developer Days conferences.   Before joining Autodesk, Fenton worked for an ADN partner developing ObjectARX applications in the Civil and Structural Engineering domain.

Page 3: UI Design Featuring WPF Part 1 CP114 5

Autodesk Developer Network

Access to almost all Autodesk software and SDK’s Including early access to Beta software

Members-only website with 1000s of technical articles Unlimited technical support Product direction through conferences Marketing benefits

Exposure on autodesk.com Promotional opportunities

1 to 3 free API training classes Based on user level

www.autodesk.com/joinadn

Page 4: UI Design Featuring WPF Part 1 CP114 5

DevLab

San Francisco, USA Feb 1-5, 2010 Farnborough, UK Feb 8-12, 2010 Munich, Germany June 7-11, 2010 Other countries TBD

www.autodesk.com/apitraining > Schedule

[email protected]

Page 5: UI Design Featuring WPF Part 1 CP114 5

Course Objective

I’m going to…

Give an Overview talk about Windows Presentation Foundation Show you how you can use it in your own applications inside

AutoCAD Let you see how easy and powerful it is and what it can do for you

I’m not going to…

Teach WPF directly, sorry

Page 6: UI Design Featuring WPF Part 1 CP114 5

Agenda

What is WPF?Why Use WPF?WPF in AutoCADWPF DemosDatabindingMigration and InteroperabilityQuestions

Part 1

Page 7: UI Design Featuring WPF Part 1 CP114 5

What is WPF?

Windows Presentation Foundation Next Generation Graphical developer Platform from Microsoft

Also known as WinFx Packaged with .NET Version 3.0 Driven by Direct3D

Uses XAML eXtensible Application Markup Language XML based Declarative Language

Requires very little programming

Technical Information

Page 8: UI Design Featuring WPF Part 1 CP114 5

Why WPF?

  Windows Forms

PDF Windows Forms/GDI+

Windows Media Player

Direct 3D WPF

GUI, (forms, controls,etc) X

 X

   X

On-screen documents X

 

   X

Fixed-format documents

 X

      X

Images     X     XAudio/Video       X   X2D graphics     X     X3D graphics         X X

Windows Presentation Foundation API Comparison

Page 9: UI Design Featuring WPF Part 1 CP114 5

What is WPF?

Windows Presentation Foundationby Microsoft

Let’s see it for real...

Page 10: UI Design Featuring WPF Part 1 CP114 5

What is WPF?

Controls Similar to existing controls All Support rich content, regardless of control type

You Can add images or videos to a Listbox for instanceLayouts

Uses different Panel types to handle layout design StackPanel – stack either horizontally or vertically WrapPanels – stack like standard html DockPanel – for sophisticated layouts GridPanel – for sophisticated layouts

Native resizable Based on vector graphics

Features Recap

Page 11: UI Design Featuring WPF Part 1 CP114 5

What is WPF?

Vector graphics Can be scaled and rotated

Without loss of image fidelity Vectors are totally accessible

Can also be programmatically manipulatedText enhancements

Smooth fonts Sub pixel Clear type Provides Scale clarity

Can create your own fonts Embed them into your own application Open type font support

Allowing different capital letters for specific words

Features Recap

Page 12: UI Design Featuring WPF Part 1 CP114 5

What is WPF?

WPF Documents Fixed Documents

enable a precise presentation, independent of the display or printer hardware. Flow Documents

dynamically adjust their content based on variables such as window size.Effects

Shadows, Blur, Reflection, Glow, and more Can be applied Text, Images, Vector graphics

Basically any item with an outline

3D Built in 3D Graphics engine Uses Direct3D

Features Recap

Page 13: UI Design Featuring WPF Part 1 CP114 5

Why use WPF?

User Experience is Key “It’s not about the product, it’s about the user experience integrated with the

product”

Existing Software platforms don’t allow for proper mixing of UI Elements

How about combining a Listbox filled with a list of Videos!? Or tooltip with a bitmap in it?! Or a button with different format text on it?

Always been difficult to get Product Designers to communicate their ideas properly to Engineering!

Realisations

Page 14: UI Design Featuring WPF Part 1 CP114 5

Why use WPF?

“User Experience is Key”

.NET 3.0 Technology with WPF Offers interoperability between Window Forms, and even Win32 and MFC Allows for easy migration path to use WPF Current .NET Release 3.5 AutoCAD 2009 installs .NET 3.0 Based on .NET 2.0

“Existing Software platforms don’t allow for proper mixing of UI Elements”

Integrates UI, Media and Documents into the platform. Allows you to mix, match and “Blend” UI’s, Controls, Data binding Thus allowing easy integration of media elements such as 2D, 3D, Audio, Video,

Animation etc

“Always been difficult to get Product Designers to communicate their ideas properly to Engineering!”

Introduces XAML (more next Slide)

Solutions

Page 15: UI Design Featuring WPF Part 1 CP114 5

Why use WPF?

XAML Declarative mark-up language Separates application design from the implementation

External Resource Files Designers and developers can now share the same technology base

Designers create the user interface saved to XAML XAML can then be loaded directly into Visual Studio.

Localisation much easier Built into XAML Allows for Post Release modification

More in the demo section about XAML

What is XAML?

Page 16: UI Design Featuring WPF Part 1 CP114 5

WPF Already in AutoCAD! (since 2009)

Toolbars are Ribbons Old toolbars still available

Autodesk.Windows namespace RibbonTab RibbonPanel …

New Ribbon Bar!

Page 17: UI Design Featuring WPF Part 1 CP114 5

WPF Already in AutoCAD! (since 2009)

Confirmation dialogs are now Task DialogsAutodesk.Windows namespace

TaskDialog TaskDialogButton TaskDialogCommandButtons Etc …

New Style Task Dialogs!

Page 18: UI Design Featuring WPF Part 1 CP114 5

WPF Already in AutoCAD 2009!

Expanding ToolTips Content defined using XAML resources

Can be dynamically createdAutodesk.Customization namespace

ToolTip ToolTipContent …

New Tooltip Styles!

Page 19: UI Design Featuring WPF Part 1 CP114 5

WPF Demonstrations

Demo “AutoCAD.NET

WPF Application”

DemonstratingVisual Studio 2005 sp1/2008

Creating an WPF Dialog with a buttonModifying the button to use WPF features

Show how...

Page 20: UI Design Featuring WPF Part 1 CP114 5

WPF Demonstrations

Error CS0103: The name ‘InitializeComponent’ does not exist in the current context

Happens when adding WPF functionality to old Projects Edit your project file so that the single line It seems Visual Studio 2008 doesn’t have the problem

<Import Project=“$(MSBuildBinPath)\Microsoft.CSharp.targets” />

becomes...

<Import Project=“$(MSBuildBinPath)\Microsoft.CSharp.targets” /><Import Project=“$(MSBuildBinPath)\Microsoft.WinFX.targets” />

Creating AutoCAD.NET WPF – Got’chas

Page 21: UI Design Featuring WPF Part 1 CP114 5

WPF Demonstrations

Demo “Expression Blend AutoCAD.NET

WPF Application”

DemonstratingUsing Expression Blend 2

Visual Studio 20008Creating an WPF Dialog with a button

Show how...

Page 22: UI Design Featuring WPF Part 1 CP114 5

WPF Demonstrations

Demo “AutoCAD Migrated

WPF Samples”

DemonstratingExisting WPF Samples

Ported to AutoCAD

Sample Demos...

Page 23: UI Design Featuring WPF Part 1 CP114 5

WPF Demonstrations

Demo “More WPF Samples”

DemonstratingExisting WPF Samples

Sample Demos...

More Demos

Page 24: UI Design Featuring WPF Part 1 CP114 5

WPF Databinding

Synchronizes data between 2 properties Generally used for binding a UI Element to backend data (2 way) Works for an entire collection too!

Source Target

Source Target

Source Target

Source Target

One of the best features of WPF…

Page 25: UI Design Featuring WPF Part 1 CP114 5

WPF Databinding

Can be implemented in 2 ways DependencyProperty

Easy implementation Not much control

Implement INotifyPropertyChanged / INotifyCollectionChanged More work to implement Total control Good for hooking in other tasks AutoCAD’s Ribbon uses INotifyPropertyChanged exclusively

Harnessing

Page 26: UI Design Featuring WPF Part 1 CP114 5

WPF Databinding Using a DependencyProperty

// pseudo codeclass myClass{ // create member variable DependencyProperty mVisible;

myClass() { // set the type of the DependencyProperty mVisible = DependencyProperty.Register("Visible", typeof(Boolean), typeof(myClass)); }}

Page 27: UI Design Featuring WPF Part 1 CP114 5

WPF Databinding

Source TargetINotifyPropertyChanged

Source TargetINotifyCollectionChanged

Source Target

Source Target

Using the Databinding Interfaces

Page 28: UI Design Featuring WPF Part 1 CP114 5

WPF Demonstrations

Demo “Ribbon Bound to PaletteSet”

DemonstratingCreating a PaletteSet using WPF

Custom Ribbon ControlBinding the Text size to Slider

Show how...

Page 29: UI Design Featuring WPF Part 1 CP114 5

WPF Databinding

For normal CLR properties (normal .NET properties) They know nothing about DependencyProperty

Before WPF was invented No way to fire notification of an update

You can implement it by hand though using… INotifyPropertyChanged / INotifyCollectionChanged

More work… But much better control

You can also implement it like I did, but it’s non standard

CLR Properties have issues…

Page 30: UI Design Featuring WPF Part 1 CP114 5

WPF Demonstrations

Demo “Modal”

“Modeless”

DemonstratingData Binding

Synchronization UI with Database

Show how...

Page 31: UI Design Featuring WPF Part 1 CP114 5

WPF Demonstrations – Data Binding Modal

Databinding made data transfer very easyYet we had to enumerate the layers manually

AutoCAD requires that we Open/Close objects before modifyingWe must have a Transaction open for the duration of the dialog

Normal WPF Binding easy after that This will not work for a modeless dialog/palette

Transaction

Lessons Learned…

Page 32: UI Design Featuring WPF Part 1 CP114 5

WPF Demonstrations – Databinding Modeless

Much more challenging, we must consider…

User actions on the UI lock the document before each database access open/close database objects Perhaps issue commands instead?

Enables the user to discover the command line interface Enables the action recorder to record the commands

User actions inside of AutoCAD Changes to drawing, update our UI make sure the UI updates don’t happen too frequently

Who needs 100s frames per second?

Lessons Learned…

Page 33: UI Design Featuring WPF Part 1 CP114 5

Modeless Solution

Encapsulates UI to drawing data transfer Drawing to UI data transfer

0 Layer1 Layer2 Layer3 Layer4

Data layer

0 Layer1 Layer2 Layer3 Layer4

Drawing database

Idle event

PropertyChangedCollectionChanged

ObjectClosed event

Data layer…

Page 34: UI Design Featuring WPF Part 1 CP114 5

WPF Migration and Interoperability

“Yes but our project…

is millions of lines of unmanaged C++, and… (excuses excuses)”Make it a Mixed Mode application, you can then easily call WPF!

has lots of unmanaged MFC dialogs, and (excuses excuses)”You can host WPF controls inside of unmanaged MFC Dialogs!

needs rewriting from scratch in .NET but some of our MFC controls have many months of work invested in them and we just don’t have time to rewrite them in .NET… (more excuses)You can even host MFC controls inside a WPF Window!

How do I use this stuff in my existing application?

Page 35: UI Design Featuring WPF Part 1 CP114 5

WPF Migration and Interoperability

WPF in Win32 Mixed Mode DLL required (use /clr compiler setting) WPF code should be written in C# or VB.NET

XAML won’t compile under a C++ project.

WPF Controls in Win32/MFC Mixed Mode DLL required (use /clr compiler setting) Use the HwndSource

Wraps WPF content in a Win32 window WPF code should be written in C# or VB.NET

Win32/MFC Controls in WPF UI Mixed Mode DLL required (use /clr compiler setting) Use the HwndHost

Wraps the HWND in a WPF element, which can be added to a WPF element tree. WPF code should be written in C# or VB.NET

Let’s get some details

Page 36: UI Design Featuring WPF Part 1 CP114 5

WPF/E – WPF Everywhere

Microsoft SilverLight

Cut down version of WPF mainly for use inside of browsers Take your XAML and paste it directly into a SilverLight Web

application First steps towards cross platform WPF Who knows where this is going…….

Code name SilverLight

Page 37: UI Design Featuring WPF Part 1 CP114 5

WPF

Getting Started - WPF - Get StartedAccessibility - Accessibility Best Practices Localization - WPF Globalization and Localization Overview Performance - Optimizing WPF Application Performance Security - Windows Presentation Foundation Security Interoperation - WPF and Win32 Interoperation Overview

Further reading...

Page 38: UI Design Featuring WPF Part 1 CP114 5

WPF

SDK and Sampleswww.objectarx.com

Developer Centerwww.autodesk.com/developautocad

Discussion Groupshttp://discussion.autodesk.com

API Training Classeswww.autodesk.com/apitraining

Kean’s Through the Interface Blog http://blogs.autodesk.com/through-the-interface

Autodesk Developer Networkwww.autodesk.com/joinadn

More Further reading...

Page 39: UI Design Featuring WPF Part 1 CP114 5

Using Windows Presentation Foundation in AutoCADFenton WebbSenior Developer Evangelist

Thank you – Any questions?

Page 40: UI Design Featuring WPF Part 1 CP114 5