Implement toolbar with icons in WPF / XAML

Question

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

For this, I have a large PNG image with all possible icons (normal, active, disabled, etc.)

So my question is how to show not the whole image, but only the area. For example, from a pixel of 50 to 100 pixels in the case where my icon is square and has a side of 50 pixels.

In other words, how would you suggest implementing in WPF the choice of a subsection of the image to display inside the toolbar button if all the icons are placed in one large PNG image?

Thank.

PS I came from web development, and there he regularly uses one large PNG image with all the icons, and when you want to place a specific icon, you have to determine which area you want to display.

Answer 1

This is really not the way image resources should be managed in WPF, and you will struggle with the platform’s natural mechanisms if you do it this way. You should consider splitting the images up and then assigning each resource in the view. Then you can snap to each in the user interface and display it as an image or as a brush source.

, TileBrush, , .

Answer 2

, SourceRect BitmapImage ( ).

, , , .

Answer 3

ImageBrush . TileMode None ViewboxUnits Absolute. Viewbox . , , .

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

, , .