Implementation of toolbar with icons in WPF/XAML

Question

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.)

So, my question is 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 in a toolbar button if all icons are placed to one big PNG-image?

Thanks.

P.S. I came from web-development and there it's regullar 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.

Answer 1

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 (http://msdn.microsoft.com/en-us/library/system.windows.media.tilebrush.aspx) to pick them out and display only the region of the image you want.

Answer 2

You probably want to look at the SourceRect Property on the BitmapImage class (Your image source).

However I think codekaizen is right, this may not be the right approach.

Answer 3

You can set the background of your buttons to an ImageBrush with your image. Set the TileMode to None and ViewboxUnits to Absolute. You could set the Viewbox to the appropriate regions. You could then bind to the properties to dynamically change the image or if it is a static image, just set the values directly.

<Button Width="80" Height="80">
    <Button.Background>
        <ImageBrush ImageSource="..." TileMode="None" ViewboxUnits="Absolute">
            <ImageBrush.Viewbox>
                <Rect Size="80,80" X="{Binding ...}" />
            </ImageBrush.Viewbox>
        </ImageBrush>
    </Button.Background>
</Button>

I agree, it's not the most efficient use of resources, but here's how it can be done.