Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (22)Angular  (38)ASP.NET  (47)ASP.NET Core  (52)ASP.NET MVC  (83)Azure  (26)Blazor  (43)DocIO  (18)Essential JS 2  (64)Essential Studio  (159)Flutter  (45)JavaScript  (133)Microsoft  (96)PDF  (47)React  (29)Succinctly series  (118)Syncfusion  (382)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (13)Windows Forms  (52)WPF  (85)Xamarin  (104)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (97)Chart  (38)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (26)Development  (232)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (4)Essential Tools  (14)Excel  (11)Extensions  (6)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (24)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (132)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (13)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (3)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (8)Tips and Tricks  (12)UI  (55)Uncategorized  (68)Unix  (2)User interface  (41)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (6)Web  (82)What's new  (51)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Working with Images with different DPI in WinForms

An Easy Way to Handle Images in Different DPIs in WinForms

Are you a person who cares about providing crystal clear images to different screens with different DPIs?

If so, this blog will definitely help you to achieve that!

In this blog, we’ll see how to set images of different DPIs to WinForms UI controls that will be automatically chosen with respect to the DPI (dots per inch) of the machine. This will ensure images retain clarity when a single application is deployed to different machines.

In this blog, we’ll use the Syncfusion Ribbon control as an example. The ImageListAdv component will act as the backbone for what we are accomplishing.

The ImageListAdv component is used to store a collection of images. The images are stored based on index, that is, in an array. Other controls that have the Image property can use the image list in order to get the appropriate images. We have classified this approach in two sections:

  • Populating an image list with images for different DPIs.
  • Mapping Ribbon control images with the image list component.

Populating an image list with images for different DPIs

Follow these steps to populate an image list with images for different DPIs:

Step 1: Drag the ImageListAdv component to the designer and navigate to the properties window.

Step 2: In the Images collection, add the desired images. They will act as the default images. Also, these images will be displayed when no DPI images are set by the user.

Please refer to the following screenshot for better understanding.

Properties window showing images collection
Properties window showing images collection

Note: For illustration, consider that we are setting Cut, Copy, and Paste in the 0, first and second index positions, respectively, in the Images collection.

Image Collection Editor dialog
Image Collection Editor dialog

In the meantime, another option named DPIImages collection is present in the properties window and helps to set the images for different DPIs.

Step 1: Click the option and you can see the DPIAwareImage Collection Editor window.

Step 2: Click Add and the DPIAwareImage instance will be created, where you can see the following properties:

  • DPI120Image: Sets the image of the item for 125 scaling and above.
  • DPI144Image: Sets the image of the item for 150 scaling and above.
  • DPI192Image: Sets the image of the item for 200 scaling and above.
  • Index: Maps the index of the default image present in the Images collection bound to the ImageListAdv component here.
DPIImages collection in the Properties dialog
DPIImages collection in the Properties dialog
DPIAwareImage Collection Editor dialog
DPIAwareImage Collection Editor dialog

Note: Continuing with our illustration, for actual images Cut, Copy, and Paste, we need to add images for different DPIs.

So, in DPIAwareImage[0]:

  • Set different Cut images for different DPIs in DPI120Image, DPI144Image, and DPI192Image properties.
  • Map its Index to 0 since Cut image is present in the 0 index of the Images Likewise, do the same for the Copy and Paste images.

Important Note: If you prefer to add Paste images for different DPIs in DPIAwareImage[0], then you must set its Index to 2 since the Paste image is present in the second index of the Images collection.

So, this is how the actual image is mapped with its equivalent images set for different DPIs via the Index property as the key.

Mapping Ribbon control images with the image list component

Follow these steps to map Ribbon control images with image list components:

Step 1: Drag the Ribbon control to the designer.

Step 2: Create a UI with tabs, buttons, and a gallery based on your application requirements.

Step 3: As usual, map the images for the button, drop-down button, split button, and gallery items with the Image collection present in the ImageListAdv component using appropriate index values.

Now, the Ribbon control checks the When attempting to get images from the Images collection, Ribbon control also checks for its relevant DPI images from the DPIImages collection.

If image is available, then appropriate image will be picked for display. If there are no images in the DPIImages collection, then the image in Images collection will be set as default.

Please refer to the following code example.

[Form  Designer Code – C#]

// Initialize image list component and add images to both "Images" and "DPIImages" collections.
private Syncfusion.Windows.Forms.Tools.ImageListAdv imageListAdv1 =  = new 
Syncfusion.Windows.Forms.Tools.ImageListAdv(this.components);

this.imageListAdv1.Images.AddRange(new System.Drawing.Image[] {
((System.Drawing.Image)(resources.GetObject("imageListAdv1.Images1"))),
((System.Drawing.Image)(resources.GetObject("imageListAdv1.Images2"))),
((System.Drawing.Image)(resources.GetObject("imageListAdv1.Images3")))});

Syncfusion.Windows.Forms.Tools.DPIAwareImage dpiAwareImage1 = new 
Syncfusion.Windows.Forms.Tools.DPIAwareImage();
Syncfusion.Windows.Forms.Tools.DPIAwareImage dpiAwareImage2 = new 
Syncfusion.Windows.Forms.Tools.DPIAwareImage();
Syncfusion.Windows.Forms.Tools.DPIAwareImage dpiAwareImage3 = new 
Syncfusion.Windows.Forms.Tools.DPIAwareImage();

dpiAwareImage1.DPI120Image = 
((System.Drawing.Image)(resources.GetObject("dpiAwareImage1.DPI120Image")));
dpiAwareImage1.DPI144Image = 
((System.Drawing.Image)(resources.GetObject("dpiAwareImage1.DPI144Image")));
dpiAwareImage1.DPI192Image = 
((System.Drawing.Image)(resources.GetObject("dpiAwareImage1.DPI192Image")));
dpiAwareImage1.Index = 0;

dpiAwareImage2.DPI120Image = 
((System.Drawing.Image)(resources.GetObject("dpiAwareImage2.DPI120Image")));
dpiAwareImage2.DPI144Image = 
((System.Drawing.Image)(resources.GetObject("dpiAwareImage2.DPI144Image")));
dpiAwareImage2.DPI192Image = 
((System.Drawing.Image)(resources.GetObject("dpiAwareImage2.DPI192Image")));
dpiAwareImage2.Index = 1;

dpiAwareImage3.DPI120Image = ((System.Drawing.Image)(resources.GetObject("dpiAwareImage3.DPI120Image")));
dpiAwareImage3.DPI144Image = ((System.Drawing.Image)(resources.GetObject("dpiAwareImage3.DPI144Image")));
dpiAwareImage3.DPI192Image = ((System.Drawing.Image)(resources.GetObject("dpiAwareImage3.DPI192Image")));
dpiAwareImage3.Index = 2;

this.imageListAdv1.DPIImages.AddRange(new 
Syncfusion.Windows.Forms.Tools.DPIAwareImage[] {
dpiAwareImage1,
dpiAwareImage2,
dpiAwareImage3});

// Initialize cut, copy, and paste buttons.
private System.Windows.Forms.ToolStripButton cutButton = new 
System.Windows.Forms.ToolStripButton();
private System.Windows.Forms.ToolStripButton copyButton = new 
System.Windows.Forms.ToolStripButton();
private System.Windows.Forms.ToolStripButton pasteSplitButton = new System.Windows.Forms.ToolStripButton();

// Defining cut button.
this.cutButton.ImageTransparentColor = System.Drawing.Color.Magenta;
this.cutButton.Margin = new System.Windows.Forms.Padding(0, 1, 0, 0);
this.cutButton.Name = "cutButton";
this.cutButton.Size = new System.Drawing.Size(30, 24);
this.cutButton.Text = "Cut";
this.cutButton.Click += new System.EventHandler(this.cutButton_Click);

// Defining copy button.
this.copyButton.ImageTransparentColor = System.Drawing.Color.Magenta;
this.copyButton.Margin = new System.Windows.Forms.Padding(0, 1, 0, 0);
this.copyButton.Name = "copyButton";
this.copyButton.Size = new System.Drawing.Size(39, 24);
this.copyButton.Text = "Copy";
this.copyButton.Click += new System.EventHandler(this.copyButton_Click);

// Defining paste button.
this.pasteSplitButton.ImageTransparentColor = System.Drawing.Color.Magenta;
this.pasteSplitButton.Name = "pasteSplitButton";
this.pasteSplitButton.Size = new System.Drawing.Size(38, 76);
this.pasteSplitButton.Text = "Paste";
this.pasteSplitButton.TextAlign = System.Drawing.ContentAlignment.BottomCenter;
this.pasteSplitButton.TextImageRelation = 
System.Windows.Forms.TextImageRelation.ImageAboveText;
this.pasteSplitButton.Click += new 
System.EventHandler(this.pasteSplitButton_ButtonClick);

// Adding images to cut, copy, and paste buttons.
this.cutButton.Image = this.imageListAdv1.Images[0];
this.copyButton.Image = this.imageListAdv1.Images[1];
this.pasteSplitButton.Image = this.imageListAdv1.Images[2];

………
………
………

// Adding cut and copy buttons to a separate toolstrip panel.
this.toolStripPanelItem1.Items.AddRange(new System.Windows.Forms.ToolStripItem[] {
this.cutButton,
this.copyButton});

// Adding paste button along with cut and copy buttons to the main toolstrip panel.
this.clipBoardtoolStrip.Items.AddRange(new System.Windows.Forms.ToolStripItem[] {
this.pasteSplitButton,
this.toolStripPanelItem1});

After, executing the above code, we’ll get the output like in the following screenshot.

Ribbon control Output Example
Ribbon control Output Example

Resources

Sample link: https://github.com/SyncfusionExamples/winforms-high-dpi-aware-image-collection-example

Documentation link: https://help.syncfusion.com/windowsforms/highdpi-support#automatically-change-images-based-on-dpi-through-imagelistadv-component

Conclusion

I hope you now have a clear idea of how to work with images for different DPIs in WinForms UI controls. With this feature, you can make sure that no image is blurry in your application in any DPI it is deployed to. Try out this feature to feel the difference!

If you aren’t a customer yet, you can try our 30-day free trial to check out this feature. Also, try our other samples from this GitHub location.

If you wish to send us feedback or would like to submit any questions, please feel free to do so in the comments section below or contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top