Home > Articles

  • Print
  • + Share This
This chapter is from the book

An Introduction to Expression Blend and XAML

If you believe that Expression Blend is an application best suited for a role like an XA, then you also understand and appreciate that its goals are to allow the rapid creation of user interfaces (UI's). Perhaps the area that you may have heard about is XAML.

Expression Blend is itself written with XAML and WPF application development technologies such as Cider extensions for Visual Studio. Although there are marked improvements on the performance of the Blend application compared to the very first preview versions, the overall concept is starting to be accepted by the wider development/designer communities as a whole. They understand that performance will improve as the technology matures, which has been proven now with the release of Visual Studio 2008 and the .NET Framework 3.5, both improving the ability to develop for the platform.

You will find out pretty soon, if you like working with XAML. The Blend design interface may take a little longer to get into, simply because it is a different tool with a similar ideology as other timeframe-based design environments (or so it may appear).

When I began using the Expression Interactive Designer Community Technology Previews, I was excited at first. This was finally justifying everything I had been saying to development managers and others who couldn't grasp the importance of a great user interface—and more importantly, a great user experience—for years.

When I had been using it for a few days, I got angry with certain elements of it. It just wasn't working like Adobe Flash does. I couldn't understand why designers would want to use it, considering the complexities it would bring to their lives and how their confusion with .NET code and the application features would eventually turn into hostility toward the lowly developer who just wanted to provide the data for a list box and not have to worry about how it looked. It all came together for me a few days later (well at about three in the morning actually) during one of those rare moments of absolute clarity.

The combination of (Designer, Blend, and Visual Studio) is not about how a control looks, it's about how collections of visual and logical assets look, function, and ultimately perform as a singular unit to provide the overall user experience. Blend is not just for designers (or dare I say developers), but it is the head of a toolset aimed at bringing both parties together with a technology that can facilitate stunning designs with awesome .NET application performance.

I can't reiterate enough how important the glue—XAML—is! Graphic designers indirectly use it to make visual assets; interactive designers mold it with Blend; and together they create UIElements that integrate and use specific functionality that adds to an overall visual perception. Developers can use it to implement the designed functionality with additional feature sets.

An example of how XAML allows applications to be created better is when a designer produces a storyboard that shows a gorgeous list box that has glass highlights and rounded borders. The next storyboard shows that when a user clicks on an item in the list box, the selected item flies across the screen. There are very few instances where a conventional WINForms developer would take the time to try and produce this result as per the storyboards in a WINForms environment. But, by working together as a team, the XA makes this entirely possible with Blend and Visual Studio, using the XAML visual assets created by graphic designers. It is also extremely quick to build applications compared to the development time on other existing platforms. The following equation says it all:

  • (developer + designer) / time = speed = pub2

The remainder of this chapter is an overview of XAML, complete with explanations of some primary levels of the XAML structures, how they relate to each other, and how it relates to code classes produced in .NET. In Chapter 4, "XAML for Beginners," you will study XAML in a far greater depth.

Before you look at some XAML, there is another issue that struck me when using Blend in the early stages. There is no Source Safe integration. Enterprise developers instantly shy away from products that don't have such integration. But then again, it could make you think a little more about the architecture. In a strict sense, your development environment should always contain some sort of source protection system. That is when the use of multiple client-side application layers came to me. By using this architecture, you can still implement a source protection system that will not affect the UI development.

Layered Understanding

From now on, when you think about the front end of your application, you need to think about layered development, similar to multi-tier or N-Tier development in which you have specific application layers that perform specific tasks for the entire application to function and perform in the manner in which it was designed. Think about your front end having, at the very least, two layers which I describe in detail for clarity.

The Graphical UI Layer

As the name suggests, this layer is where your user interface objects function within their own scope. You, as the XA, now take XAML markup provided by a designer or the design team and make it into a button or other required object in Blend. Previously, if you wanted this button control to have a rollover effect when the mouse moved over it, you would need to provide all the programming that not only created the button in the first place, but also the code to animate it or make it interact with other objects.

The designer creates the visual asset in a design tool like Expression Design that exports XAML. You, as the XA, put all the pieces together; in fact, as you will see, XAML is merely a representation of a .NET code class. As such, it has the power to set properties and apply resources and data binding to-from objects, UIElements, plus much, much more. Putting the design XAML together with the functional XAML is simple.

Let's say, for example, you have made a simple calculator application. When the user clicks the = button on your form, the buttons click handler method goes about taking the inputted values from other controls and or members in the form and then displays the output directly on a textbox control. There is nothing wrong with this; but to get my point across, now we are not going to provide this method of application logic to your simple calculator application.

In your new Blend applications, you or your developer team would go off and write a logic layer that receives inputs and provides outputs back to your graphical layer (see Figure 1.5).

Figure 1.5

Figure 1.5 Data flow between the layers.

The Logic Layer (Class Library)

This layer is where developers author the code to interact and sometimes control the UIElements that will appear in the scenes, by way of events and property change notification. So, to continue with the previous example of a simple calculator, the logic layer (I prefer engine or wrapper) provides public methods with which each click of a button simply adds numbers and symbols for the underlying engine to deal with. The UI layer is free to carry on with any animations or UI-derived actions without the sequential hassles of also trying to deal with the application logic.

Now when the user clicks the = button, the engine is called by the UI graphics layer and goes to work with all the various inputs it has received. It then fires a result out through an event or property change notification where the graphics layer (which has subscribed to this event and or notification) then does what it needs to do in order to display the result.

You may choose to have the graphical assets flash red or go semi-transparent, who knows? The point is that the two layers remain completely separated, which allows developers to easily add unit testing with NUint or a similar tool, as well as gives you a complete set of functionality that will be the same regardless of the front end UI or OS on which you are running the code. The biggest advantage to this method, it has to be said, is from the developer's point of view. When they need to fix bugs or make maintenance changes, they only need to make them to a single code library before testing and redistributing the application. The advantage from the designer's point of view is that they may change the XAML style template applied to the buttons to give them a different look, but the user experience is maintained by you, the XA, controlling the collaboration between the developer and designer in Blend.

XAML Representations

So what exactly is XAML? People may be confused to learn that XAML does not contain objects, shapes, UIElements, animations, or transforms for that matter. XAML is simply an instruction set, and definitely not a programming language.

When these instructions are parsed to the WPF presentation engine, they are then converted to an object tree in memory. So you can think of XAML as being a type of serialization format for WPF, taking all the settings that you specify and then producing your application as the result.

Assuming that you understand the concept of XML formatting and you also grasp the concept that XAML is an XML representation of .NET code objects, take a minute to let the following settle into your mind.

.NET classes are represented in XAML as tags. For example:

<MyClass></MyClass>

Object children and or complex properties are represented by nested elements. For example:

<MyClass>
       <MyClass.Child> Additional Children </MyClass.Child>
</MyClass>

Attributes are properties or event handlers, for example:

<MyClass Property="100" Click="Click_Event">
       <Child> Value </Child>
</MyClass>

To put this into better perspective, let us look at a simple application example.

XAML/CLR Example

We are going to examine the same application (shown in Figure 1.6) twice, once in C# and then in XAML.

Figure 1.6

Figure 1.6 The simple button application.

As you can see, we have a simple window with a single button shown. The button contains text, but you should bear in mind that we could have used an image or another control (UIElement) as the content of the button if a designer required it. Listing 1.1 provides the C# code for this application.

Listing 1.1. C# Example Application

    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            //button1 declared within the partial class initializer
            button1.Width = 100;
            button1.Height = 100;
            button1.Content = "Window Licker";
            button1.Click += new RoutedEventHandler(button1_Click);
        }
        void button1_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Simple as that");
        }
    }

In the code example shown in Listing 1.1, we are setting the properties of the button shown in Figure 1.5, just as a developer would do in a WINForms application. The text is applied by setting the Content property of the button.

Don't worry too much about following the specifics of the code if you are not familiar with C#. Just compare it with the XAML code shown in Listing 1.2, particularly with reference to property names like Width and Height that XAML sets at design time.

Listing 1.2. XAML Example Application

<Window x:Class="Chapter_01_XAMLReps.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Chapter_01_XAMLReps" Height="300" Width="300"
    >

    <Button
       Name="button1"
       Height="100"
       Width="100"
       HorizontalAlignment="Left"
       VerticalAlignment="Top"
       Content="Window Licker"
       Click="button1_Click"/>
</Window>

You will note the property names are exactly the same. You may also note there are some layout directives in the form of VerticalAlignment and HorizontalAlignment that we will look at in future chapters.

This is a very simple example, but one I hope gives you a little insight into the core usage of XAML. You can certainly do a lot more than just declare and set up a button with XAML. As we go through the examples in the book, you will also be looking at both C# and XAML markup to cement your understanding of the XAML/C# relationship.

Code/Markup Integration

When we talk about integration, we are referring to how objects and resources are controlled within an application using either C# or XAML—or both. The key here is to remember that XAML is declarative and can only be applied to those objects and UIElements that are created in the design-time environment.

Although you can apply property setters to objects as well as data binding and dynamic layout instructions, you have to remember that once the application enters runtime mode, you need to apply any new dynamic integration through code alone. This is not to say that you can't add dynamic instructions in XAML; after all, the majority of all animations, trigger events like IsMouseOver for buttons, or even the "Click" event that we used in the Listing 1.2 example, will be declared and set in XAML.

A simple but powerful benefit of the XA role is that because the XA puts all the pieces together, designers and developers are not constrained by timeframes to deliver assets to each other. The XA can add buttons to the scene and apply the style template when the designer is finished. The developers can just get on with writing functionality based on inputs and outputs. Overall the deliverable time of an application is dramatically shortened.

I would like to think that after seeing the brief examples provided in this chapter you are now starting to recognize the purpose of XAML as a declarative script, how simple it will be to use, and how easy it will be for designer/developer collaboration under this workflow. Although some XAML scripts do get quite complicated to follow, once you have a grasp of the core concepts you will be able to follow any of them.

Another point of interest is that Microsoft has tried very hard to ensure that the XAML produced by the Blend designer does not become a mash of utter garbage that you need a deciphering wheel to understand it. You should be able to add a UIElement to your application, change some properties in the property palette within the Blend designer environment, switch to XAML view, and still understand exactly what you have just done. Of course, you can test this by running in Split View mode and seeing the XAML being added as you "draw" controls onto the design surface and vice versa.

  • + Share This
  • 🔖 Save To Your Account

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020