In WPF: What is the best way to create toolbar buttons so that the images are scaled correctly?

Question

In particular, I am looking to use the 16 * 16 32-bit PNG images included in VS2008ImageLibrary. I tried to manually set the Height and Width attributes of the image, adjust the margins and indents by setting up Stretch and RenderOptions. My attempts to create buttons on the toolbar resulted in either incorrect scaling (blurry icons), the bottom line of pixels on the truncated icon, or a toolbar button that has the wrong size - not to mention the already disappeared characters here . Has anyone found a better way to create standard VisualStudio / WinForms toolbar buttons that display correctly in WPF?

Answer 1

First, change the resolution of the image to 96DPI, this can be done using the free Paint.net ( http://www.getpaint.net ) by opening the file, Selecting an image → Canvas size from the menu and setting the “resolution” to 96 and saving.

If this does not help, you can use the solution I wrote about on my blog here http://www.nbdtech.com/blog/archive/2008/11/20/blurred-images-in-wpf.aspx

Answer 2

- png. , , , imho . . (, , )

- , , . , 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>

Answer 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", .

Answer 4

, WPF4. RenderOptions.BitmapScalingMode HighQuality .

(.. ) : UseLayoutRounding="True".

, Silverlight, .:)

- :

• width and height of elements can increase or decrease by no more than 1 pixel

• Object placement can be moved no more than 1 pixel

• centered elements can be no more than 1 pixel vertically or horizontally from the center

Further information is found here: http://blogs.msdn.com/text/archive/2009/08/27/layout-rounding.aspx