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

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

3 голосов
/ 28 марта 2009

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

Ответы [ 4 ]

3 голосов
/ 29 марта 2009

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

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

2 голосов
/ 28 марта 2009

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

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

<Window.Resources>
   <ResourceDictionary Source="Resources/Icons.xaml"/>
</Window.Resources>
<!--
...
-->
<Button>
   <Border Background="{StaticResource IconName}" Height="16" Width="16" />
</Button>
1 голос
/ 29 апреля 2010

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

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

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

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

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

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

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

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

1 голос
/ 28 марта 2009

Лучший обходной путь, который я могу придумать, это: 

<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», чтобы нижняя часть выровнялась больше правильно с другими значками.

...