UI Design Featuring WPF Part 1 CP114 5

Post on 22-Oct-2014

134 views 6 download

Tags:

Transcript of UI Design Featuring WPF Part 1 CP114 5

Using Windows Presentation Foundation in AutoCADFenton WebbSenior Developer Evangelist

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.

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

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

stephen.preston@autodesk.com

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

Agenda

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

Part 1

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

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

What is WPF?

Windows Presentation Foundationby Microsoft

Let’s see it for real...

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

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

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

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

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

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?

WPF Already in AutoCAD! (since 2009)

Toolbars are Ribbons Old toolbars still available

Autodesk.Windows namespace RibbonTab RibbonPanel …

New Ribbon Bar!

WPF Already in AutoCAD! (since 2009)

Confirmation dialogs are now Task DialogsAutodesk.Windows namespace

TaskDialog TaskDialogButton TaskDialogCommandButtons Etc …

New Style Task Dialogs!

WPF Already in AutoCAD 2009!

Expanding ToolTips Content defined using XAML resources

Can be dynamically createdAutodesk.Customization namespace

ToolTip ToolTipContent …

New Tooltip Styles!

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

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

WPF Demonstrations

Demo “Expression Blend AutoCAD.NET

WPF Application”

DemonstratingUsing Expression Blend 2

Visual Studio 20008Creating an WPF Dialog with a button

Show how...

WPF Demonstrations

Demo “AutoCAD Migrated

WPF Samples”

DemonstratingExisting WPF Samples

Ported to AutoCAD

Sample Demos...

WPF Demonstrations

Demo “More WPF Samples”

DemonstratingExisting WPF Samples

Sample Demos...

More Demos

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…

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

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)); }}

WPF Databinding

Source TargetINotifyPropertyChanged

Source TargetINotifyCollectionChanged

Source Target

Source Target

Using the Databinding Interfaces

WPF Demonstrations

Demo “Ribbon Bound to PaletteSet”

DemonstratingCreating a PaletteSet using WPF

Custom Ribbon ControlBinding the Text size to Slider

Show how...

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…

WPF Demonstrations

Demo “Modal”

“Modeless”

DemonstratingData Binding

Synchronization UI with Database

Show how...

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…

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…

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…

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?

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

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

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

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

Using Windows Presentation Foundation in AutoCADFenton WebbSenior Developer Evangelist

Thank you – Any questions?