WinForms Command Glyphs in DPI-Aware Applications (v17.2)

As most of you may already know, v17.2 includes numerous enhancements targeting DPI Aware application design. A few days ago I wrote about our new vector graphics skin - The Bezier. In this post, I'll focus on glyphs - graphic icons displayed in Ribbon commands, menu items, buttons, and other UI elements.

The following v17.2 enhancements should help you avoid the pitfalls of raster graphic scaling (blurry images, when custom DPI settings are set on target machines):

• SVG Icon Builder helps you create custom vector glyphs by combining and manipulating predefined shapes.
• The DpiAwareImageCollection component enables DPI-Aware glyph size selection for raster images. You supply an image in a variety of sizes, and an appropriate version is automatically rendered based upon on the user’s DPI settings. This feature assumes you wish to retain raster images as opposed to vector, and I'll mention a few reasons why this might be a good idea.

If you have already decided on vector or raster graphics for your project, only one of these features will be of use to you. If starting a new project, there are pros and cons to consider for each approach...and the new features shipping in v17.2 might sway you in either direction. To put all this information in context and help you decide, I'm going to briefly review all the functionality our WinForms Controls provide when it comes to DPI-Aware command glyph graphics.

Built-In Vector Glyphs

Our long-term goal is to make all built-in user interface DPI-aware by default - without any effort on your part. The easiest way we can achieve that is by providing vector graphics.

For example, if you create a new WinForms project using our "Word-Processing Application" or "Spreadsheet Application" template, you’ll see that Ribbon commands already have vector images assigned. The screenshots below illustrate what you can expect if you enable DPI Awareness mode for the project and test it at different magnification levels.

(A few of our starter project templates haven't yet been updated with vector graphics. We're working on getting it done in future versions.)

After you've created a new project or a new form with built-in UI and graphics, you'll move on to adding custom commands. To make your life simpler with those, we’re providing a built-in DevExpress Image Gallery that includes vector glyphs. The gallery is available in Visual Studio design time, via the SvgImage property that you'll find on DevExpress UI elements.

We could’ve extended the library by coloring, rotating, flipping the shapes, or combining multiple glyphs into one icon. The number of possible combinations would’ve been tremendous though, so we decided to implement an app where you could apply these simple transformations yourself - the SVG Icon Builder app.

SVG Icon Builder

A new feature in the v17.2 release - SVG Icon Builder - is now available in the DevExpress | All Platforms menu in Visual Studio. Here’s a video that quickly demonstrates the editor’s capabilities.

As you have seen, the palette is limited to 6 colors. A fixed set allows us to implement theme-dependent adjustments, such as turning a black shape into white when displayed against a dark background. The video above shows how you can use the app's Preview tab to examine these color adjustments. And you can also see this feature in action in our DevAV demo, when switching between light and dark themes.

Even if you create vector icons manually, without using our SVG Icon Builder, you can still make use of this adjustable palette. Please refer to this documentation topic for details.

Vector versus Raster

Undeniably, vector formats are an easier choice for scaling – you draw an icon once and it’s stretched to fit any required resolution. On the other hand, vector icons limit you to shapes filled with solid colors, and all elements are proportionally resized when scaling. So if you want detailed colorful icons with realistic light effects (think iOS emojis) or you want to keep one-pixel borders in both 32x32 and 128x128 icons, then consider raster formats.

Glyph Style	64x64	128x128
Vector Glyphs Created once, stretch to any resolution Solid color fills, proportional resizing
Raster Glyphs Option 1: One hi-res image, automatically scaled down Rich colors, realistic light effects
Raster Glyphs Option 2: Supply images in a variety of resolutions Single-pixel lines in hi-res images Unique rendering at each resolution level

All things considered, vector graphics is a more practical choice since you draw once to produce resolution-independent and theme-adjustable images. On the other hand, raster images will deliver a more aesthetically pleasing UI, provided that you can invest in a good set of icons in a variety of sizes and you don't need theme-dependent color adjustments.

If you're leaning towards raster images in your applications, you'll need the new component I describe in the next section.

The DpiAwareImageCollection Component

Shipping with v17.2, the DpiAwareImageCollection component extends the ImageCollection concept by allowing you to load each image in multiple sizes. The size to be rendered is chosen automatically based on the DPI settings on the client machine.

Let’s say you need a "large image" for a Ribbon command. The standard size, at 100% DPI, is 32x32. That’s what you set in component settings before loading images.

Once the base size is set, run the collection editor, load up each image in multiple versions, as shown in the video below. Note that I'm using slightly different images for the Save command, with additional detail in the higher-resolution glyph.

Here's how the application will look at different magnification levels. Note a more detailed image loaded for the Save command at a higher resolution.

What's Next and How You Can Help

Here are a few of the improvements our R&D and designer teams plan to introduce with future updates:

• Built-in SVG graphics in all UI generated by default.
• Automatic conversion of ImageCollection to DpiAwareImageCollection.
• A more extensive library of primitives for the SVG Icon Builder.

The last one calls for your feedback. Leave your comments below to help us decide on the type of icons to add to the editor's built-in collection.

Free DevExpress Products - Get Your Copy Today