Building Next Generation GUIs using Microsoft Expression Interactive Designer

Transcription

1 Building Next Generation GUIs using Microsoft Expression Interactive Designer Adnan Farooq Hashmi MVP Windows SDK User Group Leader, Core.NET Speaker INETA Pakistan

2 Please note Expression Interactive Designer (EID) is the next generation of Visual Studio

3 REMEMBER! The UI is the application

4 The Future Rich Multimedia Speech Recognition (VUI) Responsiveness UX User experience

5 Taking a look at the future of UI s

6 .NET 3.0 Announced less than a month ago June 8, 2006 Combines WinFX (beta) technologies Windows Presentation Foundation (WPF) Windows Communication Foundation (WCF) Windows Workflow Foundation (WF) Windows CardSpace (WCS).NET 2.0

7 WPF in a nutshell Graphics/Presentation subsystem for Windows Vista UI created declaratively using XAML GDI for the next decade

8 Windows Presentation Foundation Unifies all presentation technologies 2D/3D Drawing Document Printing & Rendering Speech Synthesis and Recognition Takes advantage of hardware/gpu Vector-based Resolution Independent Hardware acceleration

9 XAML (extensible Application Markup Language)

10 Typical Development Process Marketing Architect Word Visio/UML Marketing Requirements Document Functional Specifications Software Architecture C# Code App Word Visual Studio Analyst Developer Designer Photoshop UI Design

11 UI / Logic Separation Application Form.cs Program.cs Style Layout Logic

12 UI Separation with XAML Application Window.xaml Window.xaml.cs Style Layout Logic

13 UI Separation with XAML Styles Application Styles.xaml Window.xaml Window.xaml.cs Style Layout Logic

14 Revised Development Process Designer Marketing Architect Word Visio/UML EID Marketing Requirements Document Functional Specifications Software Architecture C# XAML App Word Visual Studio Cider Analyst Developer

15 Expression Tools Family

16 Leveraging EID XAM L XAM L Microsoft Cider

17 EID Pre requisites 1. Visual Studio WinFX Runtime Components 3. Windows Vista SDK (WinFX SDK) 4. VS Extensions codenamed Orcas 5. MS Expression Interactive Designer Visual Designer for WinFX Cider Orcas IntelliSense for XAML

18 Microsoft Cider XAML support in VS 2005

19 Microsoft EID Work Environment

20 What Developers should know XAML Dependency Properties Resource Dictionaries EGD EID Workflow Styles & Control Templates Data Templates Data Binding in WPF [INotifyPropertyChanged]

21 Control Hierarchy <Page /> <Grid /> <Grid /> <ListBox />

22 Dependency Properties Inheriting values from parent element Values ; NOT Properties Track changes in value by receiving Notifications

23 Resource Dictionaries Used to embed resources inside a XAML document or UI Element Relies on ResourceDictionary class Behaves like a Hashtable Resources Images Brushes Styles

24 Resource Dictionaries <Grid> <Grid.Resources> </Grid.Resources> </Grid>

25 EGD EID Workflow

26 Control Templates Change look and feel of UI Controls using XAML <Button> <Button.Template> <ControlTemplate>... </ControlTemplate> </Button.Template> </Button>

27 Styles <Window> <Window.Resources> <Style> <Setter Property= Button.FontSize Value= 20 /> </Style> </Window.Resources> <Grid> <Button>Submit</Button> </Grid> </Window>

28 Data Context and Binding <Page /> Data Source Data Context <Grid /> <Grid /> <ListBox />

29 Data Templates Allow data to be formatted for display in XAML Vista Security (Rafal Lukawiecki) Reliable Messaging (Saqib Ilyas) SQL Query Governor (Stephen Forte) AJAX and Atlas (Adnan Hashmi) Master Pages (Goksin Bakir)

30 Data Templates XAML <ListBox... ItemsSource="{Binding}"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock TextContent="{Binding Path=Session}" /> <TextBlock TextContent=" (" /> <TextBlock TextContent="{Binding Path=Speaker} /> <TextBlock TextContent=")" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox>

31 INotifyPropertyChanged Implemented in a CLR object Allows notifications to be generated when values in bound object change Eliminates need to update each UI element individually in code

32 Microsoft EID Demo Applications

33 Quick Review XAML allows Rich UI and content to be represented declaratively UI and Code separation XAML exported from EGD to EID Designers & Developers can work on same project simultaneously

34 Quick Review Resource Dictionary keeps styles separate from XAML UI elements Using INotifyPropertyChanged, UI updated every time property value changes

35 Blogs

36 Thank You