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

05 December 2017

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.

Vector Glyph Support - 100% DPI

Vector Glyph Support - 150% DPI

(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.

Vector Glyph Gallery

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.

Automatic Theme-Dependent Palette Adjustment

Automatic Theme-Dependent Palette Adjustment

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
Vector Glyph 64px Vector Glyph 128px
Raster Glyphs
Option 1: One hi-res image, automatically scaled down
Rich colors, realistic light effects
Raster Glyph 64px - Colors Raster Glyph 128px - Colors
Raster Glyphs
Option 2: Supply images in a variety of resolutions
Single-pixel lines in hi-res images
Unique rendering at each resolution level
Raster Glyph 64px - Line Width Raster Glyph 128px - Line Width

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.

DPI-Aware Image Collection Component - Design Time

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.

DPI-Aware Raster Images

DPI-Aware Raster Images

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

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.