News

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.

Published Dec 04 2017, 04:16 PM by
Filed under: , ,
Bookmark and Share

Comments

Alberts 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 :)

December 4, 2017 9:41 PM

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.

December 4, 2017 11:37 PM

Milos Glosik

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

December 5, 2017 12:02 AM

Davide M

Hi,

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

December 5, 2017 1:35 AM

Thomas Kastner

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

December 5, 2017 2:25 AM

Vladimir Abadzhev (DevExpress)

@Alberts

Yes, those are SVG

December 5, 2017 1:23 PM

Vladimir Abadzhev (DevExpress)

@Michael @Milos @Thomas

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

December 5, 2017 1:23 PM

Uwe Porsch

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

December 6, 2017 10:55 AM

Jerzy Rozmyslowicz

Vote for Automatic conversion of ImageCollection to DpiAwareImageCollection

December 7, 2017 6:47 PM
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners