ui design featuring wpf part 1 cp114 5
TRANSCRIPT
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
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?