Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI...

26

Transcript of Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI...

Page 1: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.
Page 2: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

Leveraging WPF in Windows Embedded Standard Code Name “Quebec”

Nathan BlackSDEMicrosoftSession Code: WEM203

Page 3: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

Overview of WPFWindows Presentation Foundation

UI Framework Introduced in .NET 3.0Rich UI Development Using Extensible Application Markup Language (XAML)Clear Separation of Design and Business LogicWPF/e Used in Silverlight

Page 4: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

What is XAML?

The XML language used to create WPF ApplicationsDeclarative rather than proceduralXAML gets compiled into an object definition

Page 5: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

Anatomy of a XAML File<Window

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

x:Class="AirportKiosk.Window1"x:Name="Window" Title="Window1"

• Width="640" Height="480">

<Grid x:Name="LayoutRoot"> <Grid Width="100" Height="100"> <Button Content="Hello">

<Button.Background> <Brush>Orange</Brush></Button.Background>

</Button> </Grid></Grid>

</Window>

Main Window

Layout Grid

Individual Controls (Button)

Page 6: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

Code Behind

<Button Content="Hello" x:Name="Button1" Click="Button1_Click"> <Button.Background> <Brush>Orange</Brush> </Button.Background></Button>

Event declared in XAMLLogic implemented in a code-behind file (C#, VB.NET, or any other .NET language)

Page 7: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

Code Behind (continued)

public partial class Window1{

public Window1(){ // Load our component from XAML InitializeComponent();}

public void Button1_Click(object sender, RoutedEventArgs e)

{ MessageBox.Show("Hello!");}

}

Page 8: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

Data Binding

XAML UI can be bound to CLR objects or XMLProperties can also be bound to ADO.NET and objects associated with Web Services and Web PropertiesSort, filter and group views can be generated on top of the data

Binding Target Binding Source

Dependency Object Object

Dependency Property

Property

One WayTwo Way

One Way To Source

Page 9: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

Data Templates

<ListBox ItemsSource="{Binding Source={StaticResource photos}}" …> <ListBox.ItemTemplate> <DataTemplate> <Image Source="{Binding Path=FullPath}"

Height="30"/> </DataTemplate> </ListBox.ItemTemplate></ListBox>

Page 10: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

Leveraging WPF for Embedded Devices

Perfect for applications where UI is keyATMKioskPoint of SaleJukebox

The Silverlight OptionVery small footprint for small devicesDeployment and servicing is simplifiedTradeoffs when in the browser

Page 11: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

Expression BlendNathan BlackSDEMicrosoft

demo

Page 12: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

Quebec toolkit

Page 13: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

Embedded OS

Image-Based Setup on the device

Quebec Image Building Concepts

Embedded Core(Bootable)

EnhancedWrite Filter

InternetExplorer

Lang Packs/Driver Packs

3rd PartySoftware Installer OS Updates

Update PackageFeature PackagesEEF Package

Page 14: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

About the Toolkit

The toolkit provides a rich set of utilities to help support the development lifecycle of an Embedded Windows OS

Analysis of target machineConfiguration of embedded run-time imageBuilding of embedded run-time image based on configurationOnline tweaking and testing of embedded run-timeCapture of final embedded run-time image to be deployedDeploy captured image to many devices

Based on the Windows AIK/OPK

Page 15: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

WES 2009 vs. Quebec

ProcessWindows

Embedded Standard (WES)

Quebec

Analysis TAP.exe generates a .PMQ File

TAP.exe generates a PMQ File (same file as

WES)

ConfigurationUse Target Designer to create a configuration

file (SLX)

Use Image Configuration Editor (ICE) to create an

answer file

Run-time Image BuildImage build happens on the developer machine using Target Designer

Image build happens on the reference/target device using Image

Builder Engine

Page 16: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

WES 2009 vs. QuebecProcess

Windows Embedded

Standard (WES)Quebec

Resource Management SQL DBM File-based repository

Custom Resources Component DesignerUse ICE to generate

answer file with Data Image, $OEM$ Folders,

and scripting

Image Capture FbresealSDI

SysprepImageX

Page 17: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

Image Configuration Editor (ICE)IDE-type applicationEnables scripted build and installation through image builder engineProvides advanced functionality

Ability to configure settingsAbility to script installation of 3rd party applicationsSearch and dependency resolution

Answer File

ICE

Distribution Share Interface

Image Builder Engine (On the

device)

1.Install 2.Configure 3.Save 4.Build & Install

Page 18: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

Shell Launcher

Embedded devices are task-centricThe one application should be all they want

Replacing the shell previously required registry editingShell Launcher provided as a simple way to do this common task

Simple setting apart of Embedded Enabling Features (EEFs)

Page 19: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

Configuring the Kiosk Image Using ICENathan BlackSDEMicrosoft

demo

Page 20: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

Airport KioskNathan BlackSDEMicrosoft

demo

Page 21: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

question & answer

Page 22: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

Windows Embedded Resources

Website: www.windowsembedded.com

Social Channels: blogs.msdn.com/mikehallblogs.msdn.com/obloch

Technical Resources: http://msdn.microsoft.com/embedded

Tools evaluations: www.windowsembedded.com/downloads

Page 23: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

Related ContentARC310 Building Modular Applications Using Microsoft Silverlight and WPFWUX204 Building Rich Business Clients in WPF: Building Data Visualization Applications with the Windows Presentation FoundationWUX304 Building Rich Business Clients in WPF: New Tools and Controls for Windows Presentation FoundationWUX305 Building Rich Business Clients in WPF: Getting the Most Out of Windows Presentation Foundation

WEM04-HOL Develop and Deploy a WPF Shell for Windows Embedded Standard 2009WEM07-HOL Using WPF and Microsoft POS for .NET to Create an Application for Windows Embedded POSReady 2009DTL03-HOL Data-centric WPF Applications

Page 24: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

www.microsoft.com/teched

Sessions On-Demand & Community

http://microsoft.com/technet

Resources for IT Professionals

http://microsoft.com/msdn

Resources for Developers

www.microsoft.com/learningMicrosoft Certification and Training Resources

www.microsoft.com/learning

Microsoft Certification & Training Resources

Resources

Page 25: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

Complete an evaluation on CommNet and enter to win!

Page 26: Nathan Black SDE Microsoft Session Code: WEM203 Overview of WPF Windows Presentation Foundation UI Framework Introduced in.NET 3.0 Rich UI Development.

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