Реализация панели инструментов с иконками в WPF / XAML

Question

В моем настольном WPF-приложении я хочу реализовать панель инструментов с ключевыми действиями (добавить, обновить, удалить и т. Д.), Что-то похожее на любой почтовый сервис с веб-интерфейсом.

Для этого у меня есть большое PNG-изображение со всеми возможными значками (обычные, активные, отключенные и т. Д.)

Итак, мой вопрос, как показать не все изображение, а только область.Например, от пикселя 50 до пикселя 100 в случае, когда моя иконка имеет квадратную форму и имеет сторону 50 пикселей.

Другими словами, как бы вы предложили реализовать в WPF выбор подраздела изображения для отображения внутриКнопка на панели инструментов, если все значки размещены на одном большом PNG-изображении?

Спасибо.

PS Я пришел из веб-разработки и там регулярно используется одно большое PNG-изображение со всеми значками икогда вы хотите поместить конкретный значок, вы должны определить, какую область в изображении вы хотите показать.

Answer 1

Это действительно не тот способ, которым ресурсы изображений предназначены для управления в WPF, и вы будете бороться с естественными механизмами платформы, если будете делать это таким образом.Вы должны рассмотреть возможность разделения изображений вверх, а затем назначить каждый из них в представлении.Затем вы можете привязать к каждому из них в пользовательском интерфейсе, и он будет отображаться как изображение или источник кисти.

Если вы хотите сохранить их как одно большое изображение, вы можете использовать TileBrush , чтобы выделить их и отобразить только ту область изображения, которую вы хотите.

Answer 2

Вы можете установить фон ваших кнопок на 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>

Согласен, это не самое эффективное использование ресурсов, но вот как это можно сделать.

Answer 3

Возможно, вы захотите взглянуть на свойство SourceRect в классе BitmapImage (Ваш источник изображения).

Однако я думаю, что кодекайзен верен, это может быть неправильный подход.