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.

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.

10 comment(s)
Alvis Kums

I would love (but i know, its not all possible), that you create copy of you existing image collection to vectors. There is so many icons, that almost fulfill every needs i have.

What about new grid menu icons (built in context menu) those also are vector images or just new style? I don't have HighDPI monitor, so i cant check it out :)

4 December, 2017
Michael Brandt

Could you please add support for third-party icons sets in Image Selection / SVG Image Selection? We have a large library of PNG and SVG icons and use the File Open dialog, which does not display a preview image on SVG graphics.

I would like to have a third tab in the image picker which displays the icons from a directory (or assembly?) with preview.

4 December, 2017
Milos Glosik

I would like to import my SVG files into the user library.

5 December, 2017
Davide M

Hi,

I'd like to have graphic design icons (rectangles, triangles, polylines, etc...).

5 December, 2017
Thomas Kastner

+1 for loading third-party icons (PNG and SVG) into library

5 December, 2017
Vladimir Abadzhev (DevExpress)

@Alberts

Yes, those are SVG

5 December, 2017
Vladimir Abadzhev (DevExpress)

@Michael @Milos @Thomas

We'll see what we can do about loading custom icons to the gallery. Thanks for the feedback.

5 December, 2017
Uwe Porsch

I want to use svg icons with more colors, gradients like the icons used in the "DpiAwareImageCollection Component" section.

6 December, 2017
Jerzy Rozmyslowicz

Vote for Automatic conversion of ImageCollection to DpiAwareImageCollection

7 December, 2017
Dmitry Babich (DevExpress)

@Jerzy  Already done! This feature will be available in the upcoming 17.2.5 release. 

25 December, 2017

Please login or register to post comments.