Search code examples
c#.netwpfxamltoolbar

Implementation of toolbar with icons in WPF/XAML


In my desktop-based WPF-application I want to implement a toolbar with key actions (add, update, delete etc.), something like you can see in any web-interface mail-service.

In order to make it I have a large PNG-image with all possible icons (regular, active, disabled, etc.)

How to show not the whole image, but only an area. For example, from pixel 50 to pixel 100 in a case where my icon is square and has 50px side? In other words, how would you suggest to implement in WPF selecting a subsection of an image to display inside of toolbar button if all icons are placed to one big PNG-image?

P.S. In web-development it's common to use one big PNG-image with all icons and when you want to put a specific icon you have to define which area in imagу you want to show.


Solution

  • This really isn't the way image resources are meant to be managed in WPF, and you will be fighting the natural mechanisms of the platform if you do it this way. You should consider splitting the images up, and then assigning each one to a resource in the view. You can then bind to each one in the UI and have it appear as either an Image or as the source of a Brush.

    If you want to keep them as one large image, you might be able to use a TileBrush to pick them out and display only the region of the image you want.