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

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

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

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

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

Спасибо.

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


.net c# toolbar wpf xaml
person Mike B.    schedule 30.09.2010    source источник

Ответы (3)


arrow_upward
4
arrow_downward

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

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

person codekaizen    schedule 30.09.2010

arrow_upward
1
arrow_downward

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

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

person Aren    schedule 30.09.2010

arrow_upward
1
arrow_downward

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

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

person Jeff Mercado    schedule 30.09.2010