Page 1 of 1

Blend 2015 and custom svg graphic (how to do it correct way for Noesis)

Posted: 30 Jan 2018, 22:04
by Wanderer
How you import custom svg graphic in to Blend for use it in dictionary as gui theme? I can export from Inkscape to xaml and open it in Blend, but I am not understand how to convert it in to dictionary (as theme) correct way for Noesis. There some tutorials outside, but they are very simple and don't go deeper. I found only one tutorial which use Designer, but export is by some drawing geometries or brushes, but I am not sure if Noesis get this kind of graphics. I like how I can simply create template for button, and this template I can add in to dictionary (with few clicks), but I am unable to do it with my exported xaml graphics.

Re: Blend 2015 and custom svg graphic (how to do it correct way for Noesis)

Posted: 31 Jan 2018, 10:35
by sfernandez
Ok, I take note and I'll see if we can prepare a step by step sample.

Anyway this wouldn't be a one/two click process, it requires you to:
  • export svg to xaml with inkscape
  • open it in Blend
  • copy the group of shapes you are interested in
  • add/select a button
  • edit/create its template
  • paste the group of shapes in the visual tree
  • organize template visual tree so button layout behaves as expected
  • add triggers/visual states to customize appearance for button different states
For the shapes we support Paths and Geometries, that should be enough in any case as everything can be converted to a StreamGeometry.
We do NOT support Drawings, DrawingBrushes or DrawingGeometries, so you should avoid that when exporting SVG vector data.

Re: Blend 2015 and custom svg graphic (how to do it correct way for Noesis)

Posted: 01 Feb 2018, 16:03
by Wanderer
Step by step sample will be really helpful.

I follow your steps, and now I am able to create my own dictionary with custom graphics. Thanks.

Only one thing, under Trigers, there is in window theme button IsChecked properties. If I look in to code, there is something like ToggleButton.IsChecked. But this code is missing in Blend triggers options. Also, under States there is everything empty (there is something but there aren't any number for transitions). If I create my own from scratch, they are stored, but from default window template there is lot of stranges.

Re: Blend 2015 and custom svg graphic (how to do it correct way for Noesis)

Posted: 06 Feb 2018, 03:39
by sfernandez
Only one thing, under Trigers, there is in window theme button IsChecked properties. If I look in to code, there is something like ToggleButton.IsChecked. But this code is missing in Blend triggers options
I don't understand, what are you trying to do?
If you want to design the template of a ToggleButton, to modify its triggers in Blend you should go to the Triggers tab. Then you can click on any of the '+' buttons: Add property trigger or Add event trigger. Then you would be able to modify the properties of elements in the template, and these changes would be recorded for that trigger.
Maybe here you can find more info: https://docs.microsoft.com/en-us/dotnet ... sion-blend
Also, under States there is everything empty (there is something but there aren't any number for transitions). If I create my own from scratch, they are stored, but from default window template there is lot of stranges.
If you are not editing the template of a Control then States tab would be empty. But if you are, for example, editing the template of a ToggleButton you should see something like this:
visualstates.png
visualstates.png (8.92 KiB) Viewed 1568 times

Then you can select any of the states (MouseOver, Pressed, ...) and modify the properties of the template elements in order to record the state appearance.

Re: Blend 2015 and custom svg graphic (how to do it correct way for Noesis)

Posted: 13 Feb 2018, 14:28
by Wanderer
I apologize for late answer. Thanks, I know this tutorial, but not followed it. I'll do it now :). I am sorry for misunderstand, I created button (not toggle button), and then Edit Template Copy. This copied template, and under this template I had IsToggle what is strange because it is button. But If I follow this tutorial, I have normal states for button created.

Btw. if someone will be use VS 2015 Blend and want create button from rectangle, then go to the Tools > CustomControl > Button. It is different as in tutorial.