Click or drag to resize

Images

Wisej supports all image formats (gif, png, svg, bmp, jpeg, ...) in several locations. The application can use images that are embedded in an assembly, in a theme file, in a local folder, or an external URL.

Image Locations
  • Theme

    Theme images are stored in a theme file and are used simply by name. The properties that can accept a themed image by name typically end with Source: ImageSource is the most common property.

  • URL

    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.

  • Project File

    You can use the name and relative path of an image in the project stored under the /Images folder or sub-folders. The properties that can accept a local file typically end with Source: ImageSource is the most common property.

    Note Note

    If you use image files in /Images make sure that the entire directory is deployed to the web server in production.

  • Embedded Resources

    Wisej also supports images in embedded resources either in the project or in the container. Resource images are stored in Visual Studio's resx files and may also be localizable.

    The properties that can accept an embedded resource are typically named Image or Icon and do not end with Source.

ImageList Component

Several Wisej controls may also use images from an ImageList component 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 it, effectively crating a level of indirection.

Note Note

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.

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 gif image already sized to the desired dimensions, or use an ImageList component.

Design-Time Image Selector

When in design mode in Visual Studio you can select the image embedded resource using Visual Studio's built-in image selector or an image source using Wisej's image selector.

Embedded Image Selector
visualstudio-imageselector

Wisej's Image Selector is capable of showing the preview of SVG images and external URLs as well as local images. It has three tabs for Site Images, Theme Images, and Web Images.

Note Note

When using Site Images the root is always the project's root

Wisej Image Selector - Site Images
wisej-imageselector-1
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.

Downloads-32Download Icon Packs.

SVG Icons Color

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)";

The image picker in the designer will also show a color palette icon when selecting an SVG image to let you pick the color using the color picker.

See Also