February 8, 2016


A year ago, almost to the day, I highlighted a post from Carlos Quintero on Building DPI Aware Visual Studio Extensions.

Today Carlos Quintero is back, this time with a great list of additional resources, tools and help in your DPI quest (and as a High DPI guy, please, please be High DPI Friendly 😉

Resources to create high-DPI images with the new Visual Studio 2015 Image Service

In my post Visual Studio extensions and DPI-awareness I introduced the basics that you need to know to become DPI-aware. The final step once all the user interface of your extension handles high-DPI gracefully is to provide high-DPI images for the toolbars, as Visual Studio 2015 does since CTP 3. Apparently, support for high-DPI images through a new image service was in the Visual Studio 2015 RTM release, but it hasn’t been until a couple of days ago that Microsoft has published the MSDN documentation. Here you have the resources to learn and use it:

UPDATE (Jan 26, 2016): The Visual Studio Image Library, which contains .zip files with VS images, has been updated with VS 2015 images. [NOTE: Post copied in full. Please click through to give Carlos some click-love and see all his other great posts]

Image Service and Catalog

This cookbook contains guidance and best practices for adopting the Visual Studio Image Service and Image Catalog introduced in Visual Studio 2015.

The image service introduced in Visual Studio 2015 lets developers get the best images for the device and the user’s chosen theme to display the image, including correct theming for the context in which they are displayed. Adopting the image service will help eliminate major pain points related to asset maintenance, HDPI scaling, and theming.

Problems today

Solutions

Background color blending

Built-in alpha blending

Theming (some) images

Theme metadata

High Contrast mode

Alternate High Contrast resources

Need multiple resources for different DPI modes

Selectable resources with vector-based fallback

Duplicate images

One identifier per image concept

Why adopt the image service?

  • Always get the latest “pixel-perfect” image from Visual Studio

  • You can submit and use your own images

  • No need to test your images out when Windows adds new DPI scaling

  • Address old architectural hurdles in your implementations

The Visual Studio shell toolbar before and after using the image service:

Image Service Before and After

How it works

The image service can supply a bitmapped image suitable for any supported UI framework:

  • WPF: BitmapSource

  • WinForms: System.Drawing.Bitmap

  • Win32: HBITMAP

Image service flow diagram

…

Image Service Tools

The VS SDK includes several tools to help extension builders use the Visual Studio image service.

  • The Manifest from Resources tool takes a list of image resources (.png or .xaml files) and generates an image manifest file.

  • The Manifest to Code tool takes an image manifest file and generates a wrapper file to use in C++, C#, VB, or .vsct files.

  • The Image Library Viewer can load, edit, and search image manifests.

Color Theming Tools

The VS SDK provides several tools to help you create and manage color themes.

  • The VSIX Color Editor tool can create and edit custom colors for Visual Studio.

  • The VSIX Color Compiler tool converts existing Visual Studio theme .xml files into .pkgdef for your extension.

Visual Studio Extensibility Samples

These samples demonstrate how to customize the appearance and behavior of the Visual Studio IDE and editor using the Visual Studio SDK. The following are some of the ways in which you can extend Visual Studio:

  • Add commands, buttons, menus, and other UI elements to the IDE
  • Add tool windows for new functionality
  • Add support in Visual Studio for new programming languages
  • Add refactoring or language analyzers to fix and improve code
  • Add a custom project type or new project or item templates
  • Enable high-DPI/high resolutuion, theme-aware, and high contrast images and icons in your UI
    • For Visual Studio 2013, only high-DPI images/icons are supported; use the below sample High-DPI_Images_Icons
    • For Visual Studio 2015, samples that demonstrate using the Image Service/Catalog (for high-DPI, theme-aware, and high contrast support) are denoted below with * and docs can be found here
  • Reach millions of developers via the Visual Studio Gallery

…

Visual Studio’s KnownMonikers

image

Visual Studio Image Library

The Visual Studio Image Library contains application images that appear in Microsoft Visual Studio, Microsoft Windows, the Office system and other Microsoft software.

image

The Visual Studio Image Library contains application images that appear in Microsoft Visual Studio, Microsoft Windows, the Office system and other Microsoft software. The libraries for Visual Studio 2012, Visual Studio 2013, and Visual Studio 2015 are available and each library contains over thousands of images which can be used to create applications that look visually consistent with Microsoft software.

For details on legacy image libraries (Visual Studio 2010 and earlier), visit this location.







Source link