MetroLink with Image – MetroFramework
MetroLink Enhanced with Image
Now I will show you the enhanced version of MetroLink of winforms metroframework. On the initial release of Winforms Modern UI MetroFramework MetroLink can only display text I just added some property to allow adding of image not just one but two images. The enhance MetroLink will accept two images one for normal image and the other one is for NoFocusImage. The initial image that will be displayed by MetroLink is the NoFocusImage, once the user hover to the MetroLink it will be changed to normal image that we will assign in Image property. I saw this kind of button in GitHub desktop application thats why I decided to enhance the MetroLink.
Please see the images below for the projects where I used this enhanced version MetroLink
To make this enhancement with MetroLink possible we need to update two projects, first is the MetroFramework.Design project, we need to update the MetroLinkDesigner.cs file to allow adding of image on the control.
protected override void PreFilterProperties(IDictionary properties)
{
properties.Remove("ImeMode");
properties.Remove("Padding");
properties.Remove("FlatAppearance");
properties.Remove("FlatStyle");
properties.Remove("AutoEllipsis");
properties.Remove("UseCompatibleTextRendering");
//properties.Remove("Image");
//properties.Remove("ImageAlign");
properties.Remove("ImageIndex");
properties.Remove("ImageKey");
properties.Remove("ImageList");
properties.Remove("TextImageRelation");
properties.Remove("UseVisualStyleBackColor");
properties.Remove("Font");
properties.Remove("RightToLeft");
base.PreFilterProperties(properties);
}
The second project that we need to update to enhance the MetroLink is the MetroFramework itself. We need to update the MetroLink.cs under controls folder. First we need to add System.Drawing.Imaging on our using directives. We also need to add new properties like Image, NoFocusImage and ImageSize.
Move to next page to continue
