Хобрук: Ваш путь к мастерству в программировании

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

В частности, я хочу использовать 16 * 16 32-битных изображений PNG, включенных в VS2008ImageLibrary. Я пробовал вручную установить атрибуты высоты и ширины изображения, отрегулировать поля и отступы, отрегулировать Stretch и RenderOptions. Все мои попытки создать кнопки панели инструментов привели либо к неправильному масштабированию (размытые значки), либо к усечению нижнего ряда пикселей на значке, либо к неправильному размеру кнопки панели инструментов - не говоря уже об исчезнувших значках, о которых уже упоминалось Здесь. Кто-нибудь нашел лучший способ сделать стандартные кнопки панели инструментов в стиле VisualStudio / WinForms, которые правильно отображаются в WPF?


Ответы:


1

Сначала измените разрешение изображения на 96DPI, это можно сделать с помощью бесплатного Paint.net (http://www.getpaint.net), открыв файл, выбрав в меню «Изображение»> «Размер холста», установив «разрешение» на 96 и сохранив.

Если это не помогает, вы можете использовать решение, о котором я писал в своем блоге здесь http://www.nbdtech.com/blog/archive/2008/11/20/blurred-images-in-wpf.aspx

29.03.2009
  • Спасибо! Настройка разрешения значительно упростила код. Проблема с кнопкой, обрезающей изображение до 15 пикселей, похоже, чудесным образом исчезла сама по себе, однако, даже для изображений, отличных от 96DPI. 29.03.2009

  • 2

    Лучше всего использовать векторную графику вместо png. Я знаю, что это не совсем то, о чем вы просили, но имхо нет способа улучшить вид иконок. Также это поможет вам избавиться от полей и отступов. (Хорошо, если вы хотите использовать фотографии, вы облажались)

    Плохие новости - вам, вероятно, нужно перекрасить все свои значки. Вы можете сделать это с помощью MS Expression Blend (он может сохранять нарисованные изображения как .xaml) или сделать их самостоятельно с помощью текстового редактора. Я предпочитаю Border.Background вместо Image.Source для размещения значка, это позволяет мне помещать текст поверх изображения. Это выглядело бы примерно так:

    <Window.Resources>
       <ResourceDictionary Source="Resources/Icons.xaml"/>
    </Window.Resources>
    <!--
    ...
    -->
    <Button>
       <Border Background="{StaticResource IconName}" Height="16" Width="16" />
    </Button>
    
    28.03.2009

    3

    Лучшее решение, которое я могу придумать, это следующее:

    <Image x:Key="TB_NewIcon" Source="Toolbar Images/NewDocumentHS.png" Height="16" Width="16" SnapsToDevicePixels="True" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
    ...
    <Button Command="ApplicationCommands.New" Content="{StaticResource TB_NewIcon}" Padding="2,2,2,1"/>
    

    Или альтернативно:

    <BitmapImage x:Key="TB_NewIcon" UriSource="Toolbar Images\NewDocumentHS.png"/>
    ...
    <Button Command="ApplicationCommands.New" Padding="2,2,2,1">
        <Image Source="{StaticResource TB_NewIcon}" Height="16" Width="16" SnapsToDevicePixels="True" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
    </Button>
    

    Для тега кнопки атрибут Padding необходим, чтобы гарантировать, что изображение не усечено на высоте 15 пикселей и что размер кнопки не будет изменен в соответствии с изображением. В качестве альтернативы мы могли бы указать Padding = "1", но тогда мы должны вручную установить Height = "21" и Width = "22", чтобы размер кнопки не изменялся в соответствии с размером изображения
    На вкладке "Изображение" высота и Ширина необходимы, чтобы изображение не растягивалось. SnapsToDevicePixels и RenderOptions.BitMapScalingMode необходимы, чтобы гарантировать отсутствие размытия. Я не могу обещать, что это будет хорошо работать для всех разрешений.

    Примечание. Для значка NewDocumentHS.png, вызывающего больше всего проблем, поскольку он занимает все 16 пикселей по высоте, вы можете настроить отступы на «1,1,3,2», чтобы нижняя часть более точно совпадает с другими значками.

    28.03.2009

    4

    Вы можете попробовать новое свойство, доступное сейчас в WPF4. Оставьте RenderOptions.BitmapScalingMode на Высокое качество или просто не заявляйте об этом.

    В корневом элементе (т. Е. В главном окне) добавьте это свойство: UseLayoutRounding="True".

    Свойство, ранее доступное только в Silverlight, теперь устраняет все проблемы с размером растрового изображения. :)

    Обратите внимание - некоторые эффекты округления макета могут иметь точный макет:

    • ширина и / или высота элементов может увеличиваться или уменьшаться не более чем на 1 пиксель

    • размещение объекта может перемещаться не более чем на 1 пиксель

    • центрированные элементы могут быть смещены по вертикали или горизонтали от центра не более чем на 1 пиксель

    Дополнительную информацию можно найти здесь: http://blogs.msdn.com/text/archive/2009/08/27/layout-rounding.aspx

    29.04.2010
    Новые материалы

    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..

    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..

    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..

    Введение в Джанго Фреймворк
    Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..

    Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
    Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..

    Расширенные методы безопасности для VueJS: реализация аутентификации без пароля
    Руководство, которое поможет вам создавать безопасные приложения в долгосрочной перспективе Безопасность приложений часто упускается из виду в процессе разработки, потому что основная..

    стройный-i18следующий
    Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..