Images
Wisej.NET 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 theme mixin
- Image in embedded resources in an assembly, including icon packs
Image Files
Use a relative or absolute URL as the image source. The properties that can accept a URL typically end with "Source": ImageSource is the most common property.
ImageList
Multiple controls in Wisej.NET 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.
An ImageList can be shared by multiple controls. Updating an image in the list updates the image used by every control that references that entry, without changing each control individually.
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 of type System.Drawing.Image that do not end in Index, Key, or Source accept image objects directly. Wisej.NET sends the image to the browser as a PNG.
Theme Images
Each theme in Wisej.NET comes with a set of default theme images that are used for controls.
-b1df5cdf35bee43800df100580f4e484.png)
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.NET will load the image from the client cache to the browser element.
Theme images are all preloaded on the client at once.
Icon Packs
An icon pack is a NuGet package whose assembly embeds hundreds, or thousands, of SVG icons: you deploy one DLL instead of a folder of image files. Wisej.NET treats a referenced pack like a folder of the project. At design time, the ImageSource editor in Visual Studio lists every pack the project references right below the project's own images and lets you pick an icon as if it were a single file. At run time, each icon is served through the embedded resource URL, resource.wx/<AssemblyName>/<file>.svg, and each pack has a static Icons class with one constant per icon that already holds that URL, so Wisej.Ext.FontAwesome.Icons.Print goes into an ImageSource property without typing a file name.
Wisej.NET provides the fourteen packs below. Every pack's page has a browser of its icons: type to search them, and select one to preview it and copy its file name, its Icons constant, its resource.wx URL or a ready-to-paste ImageSource assignment. All packs except VisualStudioIcons are monochrome, so their icons take the icon color of the theme, or the color you set with the ?color= argument of the URL, exactly like the theme's own icons (see SVG Colors below); the browser has a color swatch to try it.
1,386 icons · outline and fill, 16 px grid
CssGgIcons704 icons · geometric line icons, 24 px grid
ElegantIcons294 icons · monochrome
FeatherIcons287 icons · line icons, 24 px grid
FluentUIFilledIcons1,060 icons · Fluent Design, filled
FluentUIOutlinedIcons1,056 icons · Fluent Design, outlined
FontAwesome519 icons · Font Awesome 4
IonicIcons1,332 icons · filled, outline and sharp
LucideIcons1,669 icons · line icons, 24 px grid
MaterialDesign423 icons · Material style
ModernUI1,276 icons · Windows "Metro" app bar style
TablerIcons1,978 icons · line icons, 24 px grid
VaadinIcons636 icons · monochrome, 16 px grid
VisualStudioIcons4,668 icons · multi-colored, Visual Studio image library
Two things to know before choosing a pack. VisualStudioIcons is the one multi-colored pack: its icons are meant to be used in their own colors and don't follow the theme's icon color or the ?color= argument. FluentUIFilledIcons, FluentUIOutlinedIcons and LucideIcons depend on the Wisej-4-Svg package, a client-side SVG renderer that takes over the rendering of every SVG image in the application once it's referenced; each of those pages says what that changes.
The Icon Packs overview in the Extensions manual has the icon count and NuGet package name of each pack, and explains how to build an icon pack of your own: a class library with the icons as embedded resources, no special base class or attribute needed.
SVG Colors
All Wisej.NET 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.