Introduction to Expression Blend

Expression Blend is a product by Microsoft, which helps designers and developers to collaborate in designing extra ordinary user interface for Windows XP, Vista and Web.

 

Microsoft Expression Blend is Microsoft's user interface design tool for creating graphical interfaces for web and desktop applications that blend the features of these two types of applications. Expression Blend is itself written using the .NET Framework and Windows Presentation Foundation (WPF). Expression Blend is effectively an interactive, WYSIWYG front-end for designing XAML-based interfaces for WPF and Silverlight.

 

Expression Blend supports the WPF text engine with advanced OpenType typography and ClearType, vector-based 2D widgets, and 3D widgets with hardware acceleration via DirectX. It is completely written using WPF, as opposed to Windows' older GDI or GDI+ graphics technologies. It is one of the applications in the Microsoft Expression Studio suite.

 

It is an interface design for both Windows and Web application taking advantage of both hardware (3D graphics) and software (XAML) technology.

 

Expression Blend allows making quick and easy user interface using rich media, custom control without using to write code.

 

Blend is the Windows Presentation Foundation (WFP) of .NET Framework 3.0 integrated in Windows Vista. WPF support video, audio, 3D graphics, vector graphics, animation, bitmaps graphics, advanced typography and data binding.

 

Blend has ready to use functioning controls like menu, buttons, sliders and list boxes without actually writing any code. You can import artwork from Expression Design and integrate with Visual Basic, .NET or C# code as a back end to the user interface that you create in Blend.

 

Common Definition

 

What is Windows Presentation Foundation?

 

Windows Presentation Foundation (WPF) is a unified presentation subsystem for Windows, exposed through WinFX, the managed-code programming model for Windows Vista that extends the Microsoft .NET Framework. WPF consists of a display engine and a managed-code framework. WPF unifies how Windows creates, displays, and manipulates documents, media, and user interface (UI), enabling developers and designers to create visually stunning, differentiated user experiences.

 

WPF is based on managed code but uses a markup language, Extensible Application Markup Language (XAML), to make building applications much easier for designers. XAML-based applications currently support C# and Microsoft Visual Basic .NET. If you write a WPF application entirely in procedural code, you can use any common language runtime (CLR) language.

 

What is XAML?

 

Extensible Application Markup Language, or XAML (pronounced "zammel"), is an XML-based markup language developed by Microsoft.  XAML is the language behind the visual presentation of an application that you develop in Microsoft Expression Blend, just as HTML is the language behind the visual presentation of a Web page. Creating an application in Expression Blend means writing XAML code, either by hand or visually by working in the Design view of Expression Blend.

 

XAML, Windows Presentation Foundation, and Microsoft .NET Framework 3.0

 

XAML is part of the Microsoft Windows Presentation Foundation (WPF). WPF is the category of features in the Microsoft .NET Framework 3.0 that deal with the visual presentation of Windows-based applications and Web browser-based client applications. WPF-based applications can run on Windows Vista, or on earlier versions of Windows if Microsoft .NET Framework 3.0 (and Internet Explorer 7.0 in the case of Web browser-based client applications) is installed. For more information about the requirements of WPF applications, see the topic Deploying and publishing Expression Blend applications in this User Guide.

 

WPF uses XAML for constructing visually stunning user interfaces (UI) in markup instead of in a programming language such as C#. You can create elaborate UI documents entirely in XAML by defining elements such as controls, text, images, shapes, animation, and more. Because XAML is declarative (like HTML), it requires the addition of code if you need to add run-time logic to your application. For example, if your application uses only XAML, you can create and animate UI elements, and configure them to respond in a limited way to user input (by using event triggers), but your application cannot perform and respond to calculations or spontaneously create new UI elements without the addition of code. The code for a XAML application is stored in a separate file from the XAML document. This separation of UI design from the underlying code enables developers and designers to work more closely together on the same project without delaying each other's progress.

 

XAML, code, and Expression Blend

 

The XAML for any given document in Expression Blend is stored in a .xaml file. If there is underlying code for your XAML document, that code is stored in a file of the same name, with the additional extension of .cs or .vb. For example, if your XAML document is named Window1.xaml, the code-behind file will be called Window1.xaml.cs if the programming language of the code is C#. For information about how to create XAML documents with or without code-behind files, see the topic Create a new document or project in this User Guide.

 

When you build your project, the WPF parser reads the .xaml files for that project and reports any resulting errors. Likewise, when you open an existing project in Expression Blend, the parser reads the .xaml files that are included in your project folder and attempts to parse the elements and display the documents on the artboard in Design view. In both cases, if the parser encounters errors, the artboard is disabled, and Expression Blend displays an error message with a link to open XAML view so that you can resolve the errors. The parsing errors are also reported on the Errors tab in the Results panel.

 

XAML as the equalizer between design applications

 

You can export art assets from Microsoft Expression Design as XAML, and then import the XAML into Expression Blend as resources that can be used in your Expression Blend project. Some other design applications have tools that can convert art assets to XAML. You can search on the Internet for conversion tools that are posted on trusted sites.

 

Silverlight projects in Microsoft Expression Blend

 

A Microsoft Silverlight 1.0 project is a collection of web site files that use some of the features of Windows Presentation Foundation (WPF) to create rich interactive applications and media experiences for the web. Silverlight 1.0 projects that are created in Microsoft Expression Blend 2 include a XAML file (Page.xaml), a default HTML file that loads the starting XAML file when opened in a browser, and supporting Javascript files. You can edit all of the files, and visually design the XAML files, in Expression Blend 2.

 

Microsoft Silverlight is a cross-browser, cross-platform plug-in for delivering rich applications over the Web that incorporate video, animation, interactivity, and stunning user interfaces. Silverlight applications look and behave the same on Windows-based computers as they do on Macintosh computers, in most browsers, and without any additional installation requirements.

 

Based on the Microsoft .NET Framework, Silverlight enables developers and designers to create web applications easily using existing skills and tools, such as ASP.NET, Apache, PHP. Code can be written in JavaScript, Ruby, Python, C#, Visual Basic .NET, and more.

 

Silverlight provides a consistent presentation model by using XAML. In Microsoft Expression Blend 2, you can visually design the XAML documents of your Silverlight application and test the results.