Hey Noesis Forum,

I'm trying to figure out the best process for using a range of different Icons that are imported via SVG. And use them similarly to image below

Would they be DataTemplates / Content that all exist on Resource Dictionaries and how would they work with Data Structures and sets?

Generally a bit stumped and not sure where to start.

Thanks in Advance!

Hi Ken! Dorian here!

Apologies for the time it took to get back to you on this one, but it's a great, and important question, that has many, many different possible answers depending on what your priorities, needs, and approach preferences are. I also wanted to make something nice to send your way, to show you in an actual tangible example rather than trying to describe concepts that can sometimes be a bit abstract for us Designers.

So, attached you'll find this file, that you can download, and use as reference as I tell you a bit about some of the benefits of each method:
---------------------------------------- We'll go one by one down the list:

Basic Singular Components:
These are going to represent the most simple approach, these are not inherently Data-driven, and just use a Noesis Component as nothing more than a 'container' for a bunch of vector paths (and/or any other Elements you want).

You can create components from the Assets Panel, hitting the '+' (Plus) icon, and selecting 'New Component'. You can then literally just copy-paste your vectors from your favourite external application, straight into it.
Then, to use it anywhere, all you need to do is to find the Component XAML in your Assets, and drag-and-drop it into the Navigator or on the Stage.

Singular Components with Root-Level Customization:
Exact same thing as the Basic Components, except that these use copies of the first set of Components, but that showcase the fact that you can actually make pretty much anything inside of the Component editable from the Page where its used, and easily create customised instances of any Component.

This is a very similar concept to how you would approach Variants in Figma, where for example, you can change a piece of text, or a colour, without necessarily changing the core structure of whats within it. You know how in Figma, you can edit the Text written within any component without necessarily changing it everywhere where that Component is used? Same concept, and you can set it up to surface basically anything to the Component exterior. In this case, I just picked colours.

These completely custom exposed Properties are called "Dynamic Properties" in our framework, and they can be added by clicking on the Component Root Element within the Component, and in the Properties, you'll see a "Dynamic Properties" label with a '+' icon.
Then, to actually drive Elements within the Component with these, you can set a Binding to a Property of that Element, select the 'Name' Tab, select 'Component Root', and you should find your completely custom Dynamic Properties within there to leverage.

Basic Swappable Content Templates:
In this model, you create a DataTemplate that contains your icon (you can copy-paste it in here too), and then simply apply that Template to a ContentControl Element, which is capable of displaying a DataTemplate as a singular item. What I love about this method is that you can use the context-menu on the ContentControl, and in its Template list, simply swap to another icon. This method also allows unlocking of more advanced functionality, like being able to swap icons with Triggers, for example.

Overall, this is the method I would recommend most for its power, ease-of-access, ease of organisation (you can pick where in your Resources you want to store them) and especially....flexibility, as we'll see in further examples, you can also use this exact same container type within a Data-Driven array or in a single instance, as shown here.

Swappable Content Templates with Data-Driven Customization:
Exact same method as the Content Templates, except that these use a second form of the DataTemplates, that are set up internally within the DataTemplates for each icon so that individual Paths are bound to Brushes in Data. So, if you go to the DataPanel, under the "Icon_Collection" set called "DataSets", you can actually completely customise the colours of these icons from there without even touching the asset.

Basic Data Array:
This simply shows how the exact same DataTemplates from the Basic Swappable Templates example can, instead of being laid-out by hand, can actually be automatically-generated as a Data Array controlled by a ListBox Element. (See the Character Selection Tutorial for a primer on understanding how the ListBox works). Overall, using an array like this represents a very efficient, and very Data-driven approach.

In terms of how the array knows which icon to display in which position in the Element, you'll see that in the Data Set, each icon is assigned a number. This number is then used within the ListBoxItem's Triggers, and is leveraged to perform a "PropertyChangedAction". The trigger basically detects which number each item in the array is, and then changes the DataTemplate to match the number. I gave the Triggers themselves names that explain what they do in the file, but essentially "IfDataIconVisual=0ThenSetSkull" gives a good idea of how it works.
I'll also just add a note here that using Numbers in the Data and Triggers was a somewhat arbitrary decision I made, and you could just as easily use Strings, and do it via String-matching for example. We have some examples of this in the Scoreboard sample for the icons in the table.

What's great about this solution is that to add, or remove icons from your array, you can simply add or remove entries from the "Icon_Collection" set called ""DataSets". If you set up your layout through the ListBoxPanel, and the ListBoxItemContainer, you also don't need to manually lay out each individual item that is introduced. This is the most 'automagic' approach.

Basic Data Array with Data-Driven Customization:
Exact same as the Basic Data Array, but uses the DataTemplate that was set up to be able to have its colours informed by Data Values.

I realise this is quite a lot to cover, so I'll leave it at this as a starting point, and let you take a look at everything, and let me know how this all sounds to you -- and especially, which is the one you're gravitating towards most for your application.

Enjoy!

- Dorian

So, attached you'll find this file, that you can download, and use as reference as I tell you a bit about some of the benefits of each method:
----------------------------------------
IconLibrary_Capture_FullScreen.jpg
IconLibrary.zip

We'll go one by one down the list:

Hey, Dorian. As a newbie in WPF/Noesis, I'm very appreciate your tutorials. They are very helpful! Thank you!

Hey, Dorian. As a newbie in WPF/Noesis, I'm very appreciate your tutorials. They are very helpful! Thank you!

You are very welcome! Thanks for this comment, its always appreciated!

Hey Dorian!

Thanks so much for putting this extensive answer with file together!
This will really prove useful in the project I'm on.

Thanks so much for putting this extensive answer with file together!
This will really prove useful in the project I'm on.

Superb! Thrilled to hear this was useful! Drop by anytime if you run into any issues with this or have any other questions!

- Dorian