Adding a Custom Icon

In this topic we will look at adding an icon to a custom control.

Requirements:

• An image file added to the project. Note the image size should be 16x16 otherwise it will not render correctly and the image Build Action property should be set to [Embedded Resource].
• The control's definition file should be setup. Take a look at Getting Started With a Custom Control Project on how the XML definition file should be setup.

Adding a Custom Image

1. Add the custom 16x16 pixel image to the Custom Control Visual Studio project and set it to be Embedded Resource.
2. On the controls class add an assembly WebResource reference linking to your image.
   
   Copy

   Add an assembly WebResource reference link

   1
   [assembly: WebResource("CustomControl.icon.png", "image/png")]

3. Then add a css file to the project (if you already have it, there is no need for adding a new one just edit the existing one), this is where all the styling for the control will be. The css file's Build Action property should be set to [Embedded Resource].
4. Add the following to the css file, make sure to use your control's name in lowercase where you see "iconcontrol" in the file. Note as well that you would change the "background-image:url(<%= WebResource("CustomControl.icon.png")%>);" line to point to your image.
   
   Copy

   Add to your CSS file

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   .tree li.iconcontrol-control > a,
   .tree li.iconcontrol-control > span,
   .tree li.iconcontrol-control.children > a,
   .tree li.iconcontrol-control.children.open > a,
   .tree li.iconcontrol-control.children.closed > a,
   .tree li.iconcontrol-control.children > span,
   /* Rules Designer: Action configuration target mappings screens where the control has been dropped (2) */
   .token-input .entity.icon.iconcontrol-control .entity-text,
   /* Rules Designer: Navigate to Form action in the URL preview (3) */
   #FormNavigatePreviewPanel .token.iconcontrol-control,
   /* View/Form Designer: Droppable control's list on the right and the change control popup list(4) */
   .toolboxitem.iconcontrol-control,
   /* Runtime: List View filter mappings popup target dropped control (5) */
   .theme-entry .drop-item.iconcontrol-control,
   /* Runtime: List View filter mappings popup context tree (6) */
   .theme-entry .tree li.iconcontrol-control > a,
   .theme-entry .tree li.iconcontrol-control.children.open > a,
   .theme-entry .tree li.iconcontrol-control.children.closed > a,
   .theme-entry .tree li.iconcontrol-control > span,
   /* Rule Designer: Action hot spot context menu (7) */
   .menu a.menu-item.control-iconcontrol span.menu-item-icon,
   /* Rule Designer: Action configuration target mappings tree (8) */
   .input-control.icon-control.iconcontrol-control .input-control-icon,
   /* Rule Designer: Transfer data action configuration target mappings screen dropped item (9) */
   .drop-item.iconcontrol-control,
   /* View Designer: While dragging and dropping control on to the canvas (10) */
   a.ui-draggable-dragging.iconcontrol-control
   {
    background-image:url(<%= WebResource("CustomControl.icon.png")%>);
   }
   

5. On the controls class add an assembly WebResource reference linking to the css file and make sure the PerformSubstitution property is set to true.
   
   Copy

   Add an assembly WebResource reference link

   1
   [assembly: WebResource("CustomControl.style.css", "text/css", PerformSubstitution = true)]

6. Then edit the constructor for your control to include:
   
   Copy

   Add to the constructor

   1
   ((SourceCode.Forms.Controls.Web.Shared.IControl) this).DesignFormattingPaths.Add("stylecss", "CustomControl.style.css");

7. When complete the control class file should resemble the following:
   
   Copy

   Example of completed file

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Text;
   using System.Web;
   
   // SourceCode namespaces used in the control
   using System.Web.UI;
   using System.Web.UI.WebControls;
   using SourceCode.Forms.Controls.Web.SDK;
   using SourceCode.Forms.Controls.Web.SDK.Attributes;
   
   
   // Link to the resource files that are used by the control (the style.css and the image file)
   [assembly: WebResource("CustomControl.icon.png", "image/png")] // Step 2
   [assembly: WebResource("CustomControl.style.css", "text/css", PerformSubstitution = true)] // Step 5
   
   namespace CustomControl
   {
       // Link the definition file for the control
       [ControlTypeDefinition("CustomControl.Definition.xml")]
   
       public class IconControl : BaseControl
       {
           public IconControl()
           {
               ((SourceCode.Forms.Controls.Web.Shared.IControl)this).DesignFormattingPaths.Add("stylecss", "CustomControl.style.css"); // Step 6
           }
   
           protected override void RenderContents(System.Web.UI.HtmlTextWriter writer)
           {
               writer.Write("Control With Icon");
           }
       }
   }
   

8. Build the custom control assembly and register it. 
9. In the K2 Designer refresh your View.