This is not strictly a Wisej question. But inspired from this https://wisej.com/support/question/png-icons , how do we use SVG images in Visual Studio? Can we embed them as resources? If I go to add a SVG image as resource, it does not see it as an image resource but as a Text file. How do we get hold of it later and convert it to image so that it can be set as background on a panel or as image in a picturebox or on a button?
a list of issues has been fixed in the latest build (1.2.31) related to this discussion:
WJ-7452 Images with a space in their name are not shown.
WJ-7454 Images in a mixin don’t show in the designer ImageSource editor.
WJ-7455 ThemeBuilder raises an NullReferenceExcpetion when double clicking on a theme mixin file.
WJ-7456 ThemeBuilder’s built in code editor cannot modify a mixin file, it always tried to update the main theme.
WJ-7457 Color, Font and Image editors cannot edit multiple selected properties.
SVG images cannot be assigned to the Image property because they cannot be converted to a .NET image. You can use them in 5 ways now:
The image editor now lets you pick and preview a local file, a theme image, and an image URL.
There is a pending enhancement to add embedded image resources to the files list as root folders. It will allow you to pick embedded file resources in the editor instead of assign it by hand (see above option 5). This enhancement works with additional extensions that have not been published yet, they are bundled icon sets in a single assembly, like FontAwesome.
There is a bug if your image name has a space in it it won’t work.
Will add this to the docs.
Wow, this is a lot of information! The basic idea is that we can use ImageSource and not Image. But:
point 2. Didn’t know about theme images! And we can add more images in a theme? Or custom theme? And what happens to our customizations when a new Wisej release comes out? I remember trying to remember all the changes I had made to a VWG theme whenever a new version came out… brrrr
point 3. What is an embedded data, base 64 image? Any example?
point 5. How can I make an svg embedded? When I insert it in Properties/resources, the Persistence is greyed out to “Linked at runtime”, cannot change it to embedded.
And last but not least… What is the image editor? Do you mean when we set the imagesource for a control, i.e. the “ImagePicker” ? Cause I don’t see any image “editor” for svg as we have for, say, jpg….
You can add theme images in a mixin, it will not be erased by a theme change. A theme mixin is added to any theme loaded by the app. Add a file “MyTheme.mixin.theme to /Themes. It can override any theme and add/replace any setting. You can edit it with the theme builder as well.
Look inside the theme files. All image strings there are embedded data base64 images.
In Visual Studio right click on the image file (better if in /Images bu can be anywhere) and select “Embedded Resource” in the Build Action property. It will build the file into the assembly as an embedded resource.
Yes, the image editor is the dialog that pops up when you select an ImageSource.
SVG good editor controls that can be embedded in VS are hard to find. There are many open source editors and even online editors: http://svg.recitmst.qc.ca/
I wanted to add some new svg images in a mixin.theme file. So I describe my … adventures:
I created a Classic-2.mixin.theme (an empty text file) in the /Themes folder. This cannot be opened by the theme editor.
Then I created a new theme in the editor, but it asks to inherit from a theme and when it does, it fills the new theme with a copy of the one it inherits and I had to remove all the contents apart from the name and images.
Then I imported the images I wanted, which have to be imported one by one. I first had to give a name, press OK and in the following dialog select the file, which is automatically base64-encoded and saved. If I pressed cancel in this second dialog, the image is still created with the name I gave in the first dialog and is empty. If I may make a suggestion, it would be better if one could select the image files from an open folder dialog, they get created with a name=filename and then one can change the theme image name.
Ah, if I press the + button in the left pane to add an image, this is created and its name in the right pane with the images shows like “my-new-image (256 x 256)”. If I press the + in the right pane (the one that shows the images), the displayed name is “my-new-image” without the (256 x 256).
Saved as Classic-2.mixin.theme in the /Theme folder. If I go now to select the ImageSource for a control, the newly added images do not show up in the theme images. However, if I set by hand ImageSource=”my-new-image” it is displayed correctly.
A bug here: is that if I set a button’s ImageSource to a theme image (either the ones I created or the already available ones), the button’s size cannot be smaller than some value, I suspect the minimum size of the image.
Having said all this, the theme editor is a great feature, and the fact that it produces a clean text file is awesome! After all, one can retreat to good old Notepad! 🙂
Thank you for adventuring in the theme builder. 🙂
There are several “ergonomic” issues and improvements that are certainly needed. To explain better:
There are other bugs with the built in editor when editing mixins that are also fixed in dev coming up in the update.
Forgot to add that you can update a bunch of images all at once if you have the files in a folder. In the Images tab click the last button “Import icons from a folder”. It will add all the png, svg, gif, and jpg that it finds in the folder.
The size of the icon in the button is determined by the theme, except when the image is set to overlay. It can be changed using an ImageList. Earlier we were displaying the images in their original size and most of the times they were too big, especially SVGs where they are designed in a larger canvas and need to be resized.
If you see a larger image you may be using an old Classic-2.
I probably wasn’t very clear. I am talking about the size of the button, NOT the size of the image. If you have a 10×10 pixel button and set its ImageSource property to a theme image (svg), the button is displayed larger at run time, to accommodate, I guess, the larger image !
Another adventure with the theme builder: I wanted to add some svg images to Classic-2.mixin.theme.
The result was that my Classic-2.mixin.theme remained unchanged, the Classic-2.theme however, got overwritten !
Of course, I will download again the Classic-2 from your website, but if it was a theme I had customized, then this overwriting would be a problem! 🙂
It’s a known bug fixed in the current update probably being announced today. “WJ-7456 ThemeBuilder’s built in code editor cannot modify a mixin file, it always tried to update the main theme.”
The update is already available but not announced yet. Waiting to verify and link issues with the forum.
thanks for the info.
Actually, a suggestion on that: wouldn’t it be useful to have a page with a list of open/closed bugs with their WJ-xxx numbers and in which release they are expected to be fixed? You guys, do a tremendous work and you fix them before they are reported, so if I had seen it is a known bug, I wouldn’t try to edit a mixin, but I would wait for a couple of days.
I know. The problem is that our tracking system is gemini http://lab.iceteagroup.com and our current version has a bug (or missing feature…) that doesn’t allow for a project to be made public in read-only mode. We have to upgrade to their latest build and it’s a big PITA.
We had a web service that could pull the issues into a neat html page in the past, but that broke when they changed their web service interface… That’s a pending task that keeps getting postponed.