RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Building Polished UIs with Expression Blend—Part 1 : Page 5

With a few simple tricks, even people with little artistic talent can create good-looking, professional, polished applications that leapfrog their competitors' efforts.


Adding Images and Shiny Logos

The final piece in this template involves adding team logos. The middle tier provides the team logo as a property on each team object. However, this property is a GDI+ bitmap object, which WPF does not natively understand. Also, you'll have to make some adjustments, because you can't be sure about the image's size, and you'll need to ensure it fits into the list item perfectly.

I'll show you how to address the size problem first. Drop a Viewbox element from the Blend Toolbox (you may have to go into the "Asset Library" button of the toolbox, which is the bottom-most button and provides access to an extended set of UI elements) and position it inside the grid with a margin of 12 pixels around the left, bottom, and right edges. Set the top margin to 35 pixels so the Viewbox doesn't interfere with the label at the top. Viewboxes are very handy elements because they automatically resize everything inside them to take up the exact amount of room provided by the Viewbox itself. Using a Viewbox means you can now drop an image object inside the viewbox and it will resize as needed to use up exactly the desired space.

To do that, double-click the Viewbox in the object tree. It will now appear with a yellow outline, indicating that future objects dropped on the design surface will be added as children of the Viewbox. Now drop an Image object inside the Viewbox, set its height and width to Auto (reset if necessary), and then set the margin around the image to 0 on all sides. Then, find the Source property in the Property pane, and click the small rectangle to the left of the property value to bring up the context menu. Select Data Binding… from the menu. In the dialog box, pick the Explicit Data Context page and set the Custom Expression to TeamLogo. This binds the WPF Image element to the GDI+ image provided by the bound object.

You still need to convert that image to something WPF understands: an ImageSource object. For this you'll use a value converter. Listing 1 provides such a converter for bitmap objects.

The converter needs to convert only one way: bitmaps to image sources. To use the value converter, expand the data binding dialog and pick the value converter you just created. Also make sure you set the binding direction to Default.

Because you're defining the data template in an external resource dictionary, the dictionary may not be aware of the value converter object. You may have to open the XAML file manually and add your namespace to the XAML definition and a resource reference to the value converter as well. Theoretically, Blend should do this for you, but I have had mixed results getting this to work.

The following code snippet illustrates what the first few lines in the XAML file should look like:

     <!-- Resource dictionary entries should
          be defined here. -->
Also, I've sometimes had trouble setting all the aforementioned binding properties through the data binding dialog box. If that fails, you can also touch it up manually in the XAML file. This code snippet shows what the binding should look like:

   <Image Source="{Binding Path=TeamLogo, 
     Converter={StaticResource BitmapConverter}, 
This should do the trick. The logos should now show up correctly and at the right size. As a final tweak, I'll show you how to add a glass effect over the logo as well.

Drop another rectangle onto the grid (double-click the grid to make sure you add the child elements to the grid rather than the Viewbox.) The rectangle should have no rounded corners. Set the rectangle's left and right margin to four pixels to use up almost the entire available width. Set the top margin to 30 pixels and the bottom margin to 80 pixels. Set the background to be a vertical gradient from white to white, with a top alpha value of 0% (fully transparent) and a bottom alpha value of 15% (not quite fully transparent, providing a slight white hint).

Figure 10. Logos with Glass Effect: The new data template includes a logo converted from a GDI+ bitmap. Note the curved glass effect across the logo.
Here comes the trick: With the rectangle selected, right-click to open the "Object" menu, and choose Path → Convert to Path. This changes the rectangle to a fully editable polygon that just happens to be a rectangle at this point. To edit individual segments of the path, activate the Direct Selection tool in the toolbox (second arrow icon from the top). That tool lets you not only select a complete object, but also edit elements within an object. Then, hold down the ALT key, move the mouse over about the middle of the bottom line of the rectangle, click on it, and drag it down about 10 or 15 pixels. Doing that turns the bottom line into a curve, and gives you a curved glass effect overlapping the logo (see Figure 10). (You can see a similar effect in the icon at the top-right edge of the Vista Aero start menu, by the way.)

Where's the Middle Tier and the Data?

To build the sample application, I picked an existing middle tier and database to provide a real-world view of what one can expect when building WPF or Silverlight UIs on top of existing code. That's why the middle tier in this example serves up GDI+ bitmaps, rather than anything WPF understands natively, providing an opportunity to teach an interesting technique in the process. However, because the application example is a real-world app, I was not able to ship it as a downloadable example. For this reason, I created a downloadable sample version of the middle tier that I can provide if you email me. (Thanks to Jon Herrell for his help in this.)

That's it for this installment. The next article in this series will show you how to add additional graphical effects and various professional-looking animations. I'll even re-define how list boxes create layout for all their contained items and turn them into lists with an appearance unlike any other you have ever seen in Windows. Furthermore, I'll show you how to re-style some standard elements that do not quite fit in with the design yet. Eventually, I'll demonstrate how you can re-style the application with a completely different look. So stay tuned.

Markus Egger is president of EPS Software Corporation, located in Houston, Texas. He is also the founder of EPS Software Austria, located in Salzburg. He concentrates on consulting in COM-based, object-oriented development and Internet applications. He is an international author and speaker, and is co-publisher of Component Developer Magazine. He is also the author of "Advanced Object-Oriented Programming with Visual FoxPro," from Hentzenwerke Publishing. For the past several years, Markus has received the Microsoft MVP award. Several applications he has worked on (mostly as project manager) have received Microsoft Excellence Award nominations. He is the author of several tools, such as GenRepoX (public domain), the Fox Extension Classes, and Visual WebBuilder.
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date