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

Question

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

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

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

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

Спасибо.

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

Answer 1

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

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

Answer 2

Вы, вероятно, захотите посмотреть на SourceRect Property на 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> 

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