В каждом приложении есть иконки для кнопок, статусов, тулбаров, меню и многого другого. Конечно, в идеале, в команде должен быть выделенный человек, специализирующийся на иконках и знающий все ньюансы создания оных.
Но жизнь далека от идеала, и таких людей в командах обычно нет (честно говоря хороших «иконщиков» в принципе найти очень сложно).
Поэтому хотелось бы поделиться с общественностью опытом работы с иконками в WPF приложениях и, может быть, почерпнуть для себя что-нибуть новое из комментариев.
Тут казалось бы все просто: вооружаемся любимым графическим редактором, рисуем что нам нужно на прозрачном фоне, сохраняем в PNG и спокойно используем картинку в своем приложении.
Но не тут-то было — вдруг выясняется, что наша картинка в разных местах должна показываться с разными размерами.
Каждый, кто когда-либо пытался разглядеть прыщики на лице любимой фотомодели, знает, что при увеличении маленькой картинки все становится «квадратным».
Если мы не хотим чтобы наше приложение выглядело как старая восьмибитная игра, то значит увеличивать маленькое избражение не вариант.
Немножко подумав мы восклицаем: «Эврика! Ведь можно, наоборот, уменьшать большую картинку.». И засучив рукава перерисовываем все наши иконки в наибольший размер (обычно 64х64).
Но и тут физика против нас. Дело в том, что производители мониторов (наверняка сговорившись) умеют делать только мониторы с фиксированным числом пикселей и пиксели эти тоже фиксированного размера.
Допустим, мы хотим уменьшить изображение 64х64 до размера 32х32. Это значит, что если взять квадрат 2 на 2 в исходном изображении, то при уменьшении он должен превратиться в один пиксель (очень грубо, но примерно так оно и работает).
При таком превращении неизбежна потеря информации. В итоге изображения либо «размывается», либо с него пропадают какие-то детали. Единственное изображение, которое уменьшаеться правильно это одноцветный квадрат 64х64.
Что же делать? Рисовать разные иконки под каждый размер. Без вариантов. Очень наглядный пример — запустите Notepad (Win7) и сравните иконку, отображаемую на панели задач и иконку в заголовке окна.
Итак, мы нарисовали иконки всех нужных размеров и казалось бы можем спать спокойно. А вот и нет. Есть еще два момента, о которых стоит помнить:
Увы, хорошего решения ни для одной из вышеперечисленных проблем нет. Остается расслабиться иполучать удовольствие оставить все как есть.
Когда я впервые попробовал WPF был безумно рад возможности создавать иконки для кнопок в в Xaml'е. Казалось бы вот оно решение всех проблемм. Но не тут-то было (ох уж эта чертова физика).
во-первых, хоть картинка и векторная, но рисовать ее надо на растровом экране (растеризация). Поэтому для векторных иконок характерны те же самые проблеммы, что описаны выше.
В общем случае, придеться рисовать по иконке на каждый размер. Хотя часто удается добиться приемлемого качества при масштабировании выставлением SnapsToDevicePixels в true и упрощением самого изображения.
Во-вторых, в полный рост встает проблемма производительности. Если ваша картинка состоит из нескольких десятков элементов, то отрисовывать ее становиться гораздно дороже отрисовки растрового изображения аналогичного размера.
К счастью разработчики WPF'а сей момент предусмотрели и создали настройку RenderOptions.CachingHint. Грубо говоря мы можем сказать WPF'у чтобы он при первом рендере нашей картинки сохранил результат в битмап и далее использовал этот битмап.
Вообще рекомендую почитать документацию по RenderOptions и BitmapCacheBrush.
Напоследок пару слов от капитана сами-знаете-кто. Обычно иконки рисуют с прозрачным фоном, но ни в коем случае нельзя забывать про фон, на котором ваша иконка в итоге будет рендериться. Обязательно проверьте как смотрится иконка на всех возможных фонах — Normal, Hovered, Clicked, Selected.
Но жизнь далека от идеала, и таких людей в командах обычно нет (честно говоря хороших «иконщиков» в принципе найти очень сложно).
Поэтому хотелось бы поделиться с общественностью опытом работы с иконками в WPF приложениях и, может быть, почерпнуть для себя что-нибуть новое из комментариев.
Растр
Тут казалось бы все просто: вооружаемся любимым графическим редактором, рисуем что нам нужно на прозрачном фоне, сохраняем в PNG и спокойно используем картинку в своем приложении.
Но не тут-то было — вдруг выясняется, что наша картинка в разных местах должна показываться с разными размерами.
Каждый, кто когда-либо пытался разглядеть прыщики на лице любимой фотомодели, знает, что при увеличении маленькой картинки все становится «квадратным».
Если мы не хотим чтобы наше приложение выглядело как старая восьмибитная игра, то значит увеличивать маленькое избражение не вариант.
Немножко подумав мы восклицаем: «Эврика! Ведь можно, наоборот, уменьшать большую картинку.». И засучив рукава перерисовываем все наши иконки в наибольший размер (обычно 64х64).
Но и тут физика против нас. Дело в том, что производители мониторов (наверняка сговорившись) умеют делать только мониторы с фиксированным числом пикселей и пиксели эти тоже фиксированного размера.
Допустим, мы хотим уменьшить изображение 64х64 до размера 32х32. Это значит, что если взять квадрат 2 на 2 в исходном изображении, то при уменьшении он должен превратиться в один пиксель (очень грубо, но примерно так оно и работает).
При таком превращении неизбежна потеря информации. В итоге изображения либо «размывается», либо с него пропадают какие-то детали. Единственное изображение, которое уменьшаеться правильно это одноцветный квадрат 64х64.
Что же делать? Рисовать разные иконки под каждый размер. Без вариантов. Очень наглядный пример — запустите Notepad (Win7) и сравните иконку, отображаемую на панели задач и иконку в заголовке окна.
Итак, мы нарисовали иконки всех нужных размеров и казалось бы можем спать спокойно. А вот и нет. Есть еще два момента, о которых стоит помнить:
- Анимации. Например, при наведении мышкой картинка увеличивается в 1.5 раза.
- Мониторы с нестандартным DPI. Потихоньку (ну очень медлееееено, где мой монитор 24" и 300DPI?) начинают оные появляться. В основном на мобильных устройствах и нетбуках.
Увы, хорошего решения ни для одной из вышеперечисленных проблем нет. Остается расслабиться и
Вектор
Когда я впервые попробовал WPF был безумно рад возможности создавать иконки для кнопок в в Xaml'е. Казалось бы вот оно решение всех проблемм. Но не тут-то было (ох уж эта чертова физика).
во-первых, хоть картинка и векторная, но рисовать ее надо на растровом экране (растеризация). Поэтому для векторных иконок характерны те же самые проблеммы, что описаны выше.
В общем случае, придеться рисовать по иконке на каждый размер. Хотя часто удается добиться приемлемого качества при масштабировании выставлением SnapsToDevicePixels в true и упрощением самого изображения.
Во-вторых, в полный рост встает проблемма производительности. Если ваша картинка состоит из нескольких десятков элементов, то отрисовывать ее становиться гораздно дороже отрисовки растрового изображения аналогичного размера.
К счастью разработчики WPF'а сей момент предусмотрели и создали настройку RenderOptions.CachingHint. Грубо говоря мы можем сказать WPF'у чтобы он при первом рендере нашей картинки сохранил результат в битмап и далее использовал этот битмап.
Вообще рекомендую почитать документацию по RenderOptions и BitmapCacheBrush.
Фон
Напоследок пару слов от капитана сами-знаете-кто. Обычно иконки рисуют с прозрачным фоном, но ни в коем случае нельзя забывать про фон, на котором ваша иконка в итоге будет рендериться. Обязательно проверьте как смотрится иконка на всех возможных фонах — Normal, Hovered, Clicked, Selected.