Help Creating High-DPI Friendly VS Extensions
- Posted: Feb 08, 2016 at 5:45AM
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 ;)
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:
- 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.
- Image Service Tools: The VS SDK includes several tools to help extension builders use the Visual Studio image service (Manifest from Resources, Manifest to Code and Image Library Viewer).
- Color Theming Tools: The VS SDK provides several tools to help you create and manage color themes (VSIX Color Editor and VSIX Color Compiler).
- VSSDK Samples: several samples have been updated to use the Image Service and Image Catalog.
- Visual Studio’s KnownMonikers: The images contained in Visual Studio’s IVsImageService.
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]
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.
Background color blending
Built-in alpha blending
Theming (some) images
High Contrast mode
Alternate High Contrast resources
Need multiple resources for different DPI modes
Selectable resources with vector-based fallback
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:
The image service can supply a bitmapped image suitable for any supported UI framework:
Image service flow diagram
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.
The VS SDK provides several tools to help you create and manage color themes.
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
The Visual Studio Image Library contains application images that appear in Microsoft Visual Studio, Microsoft Windows, the Office system and other Microsoft software.
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.