Code-Free User-Interface Design with Expression Blend

Code-Free User-Interface Design with Expression Blend

icrosoft Expression Blend is a new full-featured design tool for creating highly-interactive and sophisticated Windows application user interfaces using Windows Presentation Foundation (WPF). With Expression Blend, a designer can design and create the UI of an application without worrying about the logic of the application. Once the UI is completed, it can be passed to the developer who will in turn code the business logic of the application.

Because Expression Blend is a very powerful and sophisticated design tool, getting comfortable with using it requires some effort. Part 1 of this series will take you on a quick tour of Expression Blend, showing you how to perform simple animations on a Windows application and how to control them.

Obtaining Expression Blend
At the time of writing, there are two different versions of Expression Blend available:

  • Expression Blend 1.0 (download a free trial here)
  • Expression Blend 2 September Preview (download a free trial here)

The key difference between these two versions is that Expression Blend 2 September Preview supports the building of Silverlight applications (see my article on Silverlight here). This article will use Expression Blend 1.0.

Creating the User Interface
First, launch Microsoft Expression Blend and create a new project. There are two types of projects you can create using Expression Blend:

  • Standard Windows application
  • Control Library

You can also choose the language you want to use for the project. At the moment, only Visual C# and Visual Basic are supported.

This article will focus on building a standard Windows application. Choose the Standard Application (.exe) project type and name the project SimpleAnimation. Click OK.

The project will now be created and you will see the environment as shown in Figure 1. You can view your project in two different workspaces:

  • Design Workspace
  • Animation Workspace

The Design Workspace is shown in Figure 1 with the various parts of the workspace labeled.


Figure 1. Design Workspace: Expression Blend in the Design Workspace view.
?
Figure 2. Animation Workspace: Expression Blend in the Animation Workspace view.

The Animation Workspace rearranges the various panels and places the Interaction panel at the bottom of the page so that it has a bigger area of focus. You can switch to the Animation Workspace by selecting Window?>Animation Workspace (or press F7). Figure 2 shows Expression Blend in Animation Workspace view.

The Project section shows the various files in your projects. Note that the UI of the window is generated using XAML code (Windows1.xaml) and the business logic is stored in a code-behind file (Window1.xaml.cs). Double-clicking on the code-behind file will launch Visual Studio 2005.

Now, add some controls to the window. First, you’ll add an image to the window and then you’ll perform some simple animation on it.

Select the Canvas panel in the Toolbox and double-click it to add an instance to the window. A Canvas panel acts as a container for other controls/panels.

Once the Canvas panel is added to the window, add an Image control onto the Canvas panel. To do so, click on the Asset Library item in the Toolbox and the Asset Library window will open (see Figure 3). Tick the Show All checkbox and double-click on the Image control.

The Image control now appears in the Toolbox. Double-click on the Image control in the Toolbox to add it to the window.


Figure 3. Add an Image Control: Select the Image control from the Asset Library.
?
Figure 4. The Canvas Panel: Drag and drop the Image control onto the Canvas panel.

If you observe the Objects and Timeline window, you will notice that the Image control is on the same level as the Canvas panel (see left of Figure 4). To ensure that the Image control is contained within the Canvas panel, drag and drop it into the Canvas panel, as seen on the right of Figure 4.

Next, set the Image control to display a picture. To do so, select the Image control in the Objects and Timeline window and click the Properties Inspector window. Click the ??? button next to the Source drop down list and select an image.

After resizing on the Canvas panel and Image control, the window should look like Figure 5.

So far, you’ve been building the UI of the application visually using drag and drop. The XAML code is automatically generated as you build the UI. To view the XAML code, click on the XAML tab located on the Artboard (see Figure 10).


Figure 5. The Results: The finished look of the UI.
?
Figure 6. The XAML Code: Viewing the XAML code in the Artboard.

If you prefer, you can always build the UI by writing XAML code directly into the editor. The following is the XAML code for the UI that you’ve just built:

Figure 7. The Results: Your application with the image.

                           

Press F5 to test view your application now. Figure 7 shows the window with the image displayed.

Animation
So far, This application is nothing special?you could easily achieve the same thing using Windows Forms. But what’s really exciting with WPF is its ability to create exciting user interface designs using animation. Making your image perform animation will demonstrate how easy it is to use WPF.

In the Objects and Timeline section, click on the “+” button to create a new timeline. A timeline is a sequence of animation that you can apply to objects in a project.

The Create Storyboard Resource dialog will appear. Use the default name of Timeline1 and click OK. To make it easier to create the animation, switch to Animation Workspace (press F7).

Figure 8. Beginning Animation: Inserting a keyframe in a timeline.

Select the Canvas panel and click on the Record Keyframe button to insert a keyframe (see Figure 8). A keyframe (represented as an oval-shaped icon) is a marker on the timeline that indicates when a property change occurs. The yellow line indicates the time in the sequence of animation. Currently, it is set at time 0 second.

Drag the top of the yellow line and drop it at 4. Click on the Record Keyframe button once more. This will indicate that the entire animation will take four seconds. If you need to have a smaller interval of time, you can change the zoom level to a higher number, such as 400 or 500 percent.

With the Canvas panel selected and the yellow line in the 4 position, click on the Properties Inspector and click on the Translate tab in the Transform section. Set the value of x to 300 and leave the value of y as 0. This will move the Canvas panel (containing the image) 300 pixels to the right.

Next, click on the Rotate tab of the Transform section and set the Angle to 360. This will cause the Canvas panel to rotate a full circle (360 degrees).

You can now preview the animation by clicking on the Play button in the Objects and Timeline section (see Figure 9).


Figure 9. Staging: Previewing the animation.
?
Figure 10. The Results: Testing the animation on the window.

To see how the animation looks within the window, press F5 to run the application. Figure 10 shows the image rotating a full circle and at the same time moving towards the right.

Events
When you run the application, notice that the image rotates automatically. Why does this happen? The fact is, an event was added for you automatically when you created that timeline. Looking at the Interaction section of Expression Blend, you will see that, under the Triggers group, there is a Windows.Loaded event. When this event is raised, the Timeline1 object begins.

To add a new event to the project, click the “+ Event” button. In the bottom view of the Triggers group, select the canvas panel and the MouseDown event and then click the “+” button to add a new trigger. The Timeline1 object and its Begin event are selected by default. This new event indicates that the image will perform its rotation whenever you click on the canvas panel.

Author’s Note: Before you click on the “+ Event” button, you must click on the canvas object in the Objects and Timeline window first. Otherwise, you won’t be able to select the canvas object in the bottom view of the Triggers window. This seems like a bug in Expression Blend.

If you don’t want the image to automatically rotate when the window is loaded, remove the Window.Loaded event by selecting it and clicking the “- Trigger” button.

Press F5 to test the application again. This time, when the load is loaded, the image will only be rotated if you click on it.

Controlling the Animation
So far, your animation is continuous, from beginning to end. But what if you want to pause and then resume it again?

To do so, add two Button controls to the window. It’s simpler to add them to the XAML code directly, as shown in the following code in bold:

                                                                                             

Figure 11 shows the two Button controls on the window.


Figure 11. Adding Controls:The two Button controls added to the window.
?
Figure 12. Adding Event Handlers: Adding the event handlers for the Pause and Continue buttons.

Next, you’ll add two events to the project: one for the Pause button and one for the Continue button. The event handlers are shown in Figure 12.

The following code in bold shows the events handler represented in XAML:

                                                         
Figure 13. The Results: Pausing and resuming the animation.

Press F5 to test the application. The image will rotate when you click on it. To pause the animation, click the Pause button and click Continue to resume the animation (see Figure 13).

Code-Free Design
Hopefully, you’ve seen enough to be familiar with the many tools offered by Expression Blend and you’ll be well prepared for more exciting things ahead in this series. You’ll note that you didn’t actually write any code, which is the way it should be; designers are not supposed to write code.

devx-admin

devx-admin

Share the Post:
USA Companies

Top Software Development Companies in USA

Navigating the tech landscape to find the right partner is crucial yet challenging. This article offers a comparative glimpse into the top software development companies

Software Development

Top Software Development Companies

Looking for the best in software development? Our list of Top Software Development Companies is your gateway to finding the right tech partner. Dive in

India Web Development

Top Web Development Companies in India

In the digital race, the right web development partner is your winning edge. Dive into our curated list of top web development companies in India,

USA Web Development

Top Web Development Companies in USA

Looking for the best web development companies in the USA? We’ve got you covered! Check out our top 10 picks to find the right partner

Clean Energy Adoption

Inside Michigan’s Clean Energy Revolution

Democratic state legislators in Michigan continue to discuss and debate clean energy legislation in the hopes of establishing a comprehensive clean energy strategy for the

Chips Act Revolution

European Chips Act: What is it?

In response to the intensifying worldwide technology competition, Europe has unveiled the long-awaited European Chips Act. This daring legislative proposal aims to fortify Europe’s semiconductor

USA Companies

Top Software Development Companies in USA

Navigating the tech landscape to find the right partner is crucial yet challenging. This article offers a comparative glimpse into the top software development companies in the USA. Through a

Software Development

Top Software Development Companies

Looking for the best in software development? Our list of Top Software Development Companies is your gateway to finding the right tech partner. Dive in and explore the leaders in

India Web Development

Top Web Development Companies in India

In the digital race, the right web development partner is your winning edge. Dive into our curated list of top web development companies in India, and kickstart your journey to

USA Web Development

Top Web Development Companies in USA

Looking for the best web development companies in the USA? We’ve got you covered! Check out our top 10 picks to find the right partner for your online project. Your

Clean Energy Adoption

Inside Michigan’s Clean Energy Revolution

Democratic state legislators in Michigan continue to discuss and debate clean energy legislation in the hopes of establishing a comprehensive clean energy strategy for the state. A Senate committee meeting

Chips Act Revolution

European Chips Act: What is it?

In response to the intensifying worldwide technology competition, Europe has unveiled the long-awaited European Chips Act. This daring legislative proposal aims to fortify Europe’s semiconductor supply chain and enhance its

Revolutionized Low-Code

You Should Use Low-Code Platforms for Apps

As the demand for rapid software development increases, low-code platforms have emerged as a popular choice among developers for their ability to build applications with minimal coding. These platforms not

Cybersecurity Strategy

Five Powerful Strategies to Bolster Your Cybersecurity

In today’s increasingly digital landscape, businesses of all sizes must prioritize cyber security measures to defend against potential dangers. Cyber security professionals suggest five simple technological strategies to help companies

Global Layoffs

Tech Layoffs Are Getting Worse Globally

Since the start of 2023, the global technology sector has experienced a significant rise in layoffs, with over 236,000 workers being let go by 1,019 tech firms, as per data

Huawei Electric Dazzle

Huawei Dazzles with Electric Vehicles and Wireless Earbuds

During a prominent unveiling event, Huawei, the Chinese telecommunications powerhouse, kept quiet about its enigmatic new 5G phone and alleged cutting-edge chip development. Instead, Huawei astounded the audience by presenting

Cybersecurity Banking Revolution

Digital Banking Needs Cybersecurity

The banking, financial, and insurance (BFSI) sectors are pioneers in digital transformation, using web applications and application programming interfaces (APIs) to provide seamless services to customers around the world. Rising

FinTech Leadership

Terry Clune’s Fintech Empire

Over the past 30 years, Terry Clune has built a remarkable business empire, with CluneTech at the helm. The CEO and Founder has successfully created eight fintech firms, attracting renowned

The Role Of AI Within A Web Design Agency?

In the digital age, the role of Artificial Intelligence (AI) in web design is rapidly evolving, transitioning from a futuristic concept to practical tools used in design, coding, content writing

Generative AI Revolution

Is Generative AI the Next Internet?

The increasing demand for Generative AI models has led to a surge in its adoption across diverse sectors, with healthcare, automotive, and financial services being among the top beneficiaries. These

Microsoft Laptop

The New Surface Laptop Studio 2 Is Nuts

The Surface Laptop Studio 2 is a dynamic and robust all-in-one laptop designed for creators and professionals alike. It features a 14.4″ touchscreen and a cutting-edge design that is over

5G Innovations

GPU-Accelerated 5G in Japan

NTT DOCOMO, a global telecommunications giant, is set to break new ground in the industry as it prepares to launch a GPU-accelerated 5G network in Japan. This innovative approach will

AI Ethics

AI Journalism: Balancing Integrity and Innovation

An op-ed, produced using Microsoft’s Bing Chat AI software, recently appeared in the St. Louis Post-Dispatch, discussing the potential concerns surrounding the employment of artificial intelligence (AI) in journalism. These

Savings Extravaganza

Big Deal Days Extravaganza

The highly awaited Big Deal Days event for October 2023 is nearly here, scheduled for the 10th and 11th. Similar to the previous year, this autumn sale has already created

Cisco Splunk Deal

Cisco Splunk Deal Sparks Tech Acquisition Frenzy

Cisco’s recent massive purchase of Splunk, an AI-powered cybersecurity firm, for $28 billion signals a potential boost in tech deals after a year of subdued mergers and acquisitions in the

Iran Drone Expansion

Iran’s Jet-Propelled Drone Reshapes Power Balance

Iran has recently unveiled a jet-propelled variant of its Shahed series drone, marking a significant advancement in the nation’s drone technology. The new drone is poised to reshape the regional

Solar Geoengineering

Did the Overshoot Commission Shoot Down Geoengineering?

The Overshoot Commission has recently released a comprehensive report that discusses the controversial topic of Solar Geoengineering, also known as Solar Radiation Modification (SRM). The Commission’s primary objective is to

Remote Learning

Revolutionizing Remote Learning for Success

School districts are preparing to reveal a substantial technological upgrade designed to significantly improve remote learning experiences for both educators and students amid the ongoing pandemic. This major investment, which

Revolutionary SABERS Transforming

SABERS Batteries Transforming Industries

Scientists John Connell and Yi Lin from NASA’s Solid-state Architecture Batteries for Enhanced Rechargeability and Safety (SABERS) project are working on experimental solid-state battery packs that could dramatically change the

Build a Website

How Much Does It Cost to Build a Website?

Are you wondering how much it costs to build a website? The approximated cost is based on several factors, including which add-ons and platforms you choose. For example, a self-hosted