Images

Image concepts.

Wisej controls can use several kinds of icons and images:

• Image file

• Image from an ImageList component

• Image object (System.Drawing.Image)

• Image from the theme or a them mixin

• Image in embedded resources in an assembly

Image Files

You can use any, relative or full, URL as the source of the image. The properties that can accept a URL typically end with "Source": ImageSource is the most common property.

ImageList

Multiple controls in Wisej can utilize the ImageList component. The ImageList component allows you to manage a collection of Image objects by index or key, instead of having an image assigned directly.

The biggest advantages of using the "ImageList" component are that: it can be shared among multiple controls, and you can change an image without changing the controls that reference, effectively creating a level of indirection.

Some controls may have several image properties, all used for the same image. For example, the Button control has "Image", "ImageSource", "ImageIndex", and "ImageKey". They all refer to the same image and when setting one of the properties, the others will reset automatically.

Image properties that end with Key or Index refer to an image in an ImageList. The ImageList may be assigned to the control itself or to its container.

Image Object

Image properties that don't and with Index, Key or Source and are of type System.Drawing.Image, can be assigned with any image object. Wisej will return the image as a png back to the browser.

Theme Images

Each theme in Wisej comes with a set of default theme images that are used for controls.

Wisej Theme Images

You can use any image from the theme, including images in theme mixins, simply by name. Assign the name to an ImageSource property and Wisej will load the image from the client cache to the browser element.

Theme images are all preloaded on the client at once.

Icon Packs

Wisej supports Icon Packs at runtime and design time. An Icon Pack is an assembly that embeds a collection of icons. You can deploy single assembly instead of multiple icon files.

The Design-Time Image Selector automatically discovers the Icon Pack Assemblies referenced in the project and adds them to the folder list, right below the Project Root Folder. When you select the Icon Pack, Wisej lists and previews all the embedded icons in the assembly and lets you choose the icon to use, as if it was a single file.

You can build your own Icon Packs and/or download the ones that we provide.

OverviewWisej Extensions

SVG Colors

All Wisej themes use SVG monochrome icons. Their color is set either in the theme or to match the container's text color. It's the same behavior of icon fonts.

In case you need to change the color of a specific SVG icon, without having to change the color of the text of the container, you can add the color to the ImageSource name or URL (for embedded icons and icon packs) by adding: ?color=[color].\

C#

this.IconSource = "icon-print?color=red";
this.IconSource = "icon-print?color=#ff0000";
this.IconSource = "icon-print?color=rgb(255,0,0)";
this.IconSource = "icon-print?color=activeText"; // you can use theme colors.
this.IconSource = "resource.wx/birthday-cake.svg?color=#ff0000";
this.IconSource = "resource.wx/birthday-cake.svg?color=rgb(255,0,0)";
this.IconSource = "resource.wx/birthday-cake.svg?color=activeText";
this.IconSource = "resource.wx/birthday-cake.svg?color=rgba(255,0,0.5)";

If your SVG color is not able to be changed, it could be due to a fill or stroke value inside of the SVG. Try removing it with a Text Editor.

Icon Size

The size of the icons is usually set in the themes. You can change it by using an ImageList component and assigning it to the control that has the image you want to resize. The ImageList component will resize the image even if it's not in its image list.

Labels use the original size of the image. To set the size of the images used in labels, either use a png or a gif image already sized to the desired dimensions, or use the ImageList component.