Em WPF, Qual é a melhor maneira de criar barra de ferramentas botões para que as imagens sejam corretamente dimensionados?

Question

Especificamente, eu estou olhando para usar os 16 * 16 imagens PNG de 32 bits incluídos com o VS2008ImageLibrary. Eu tentei configurar manualmente atributos de altura e largura da imagem, ajustando as margens e preenchimento, ajustando estiramento e RenderOptions. Minhas tentativas de criar barra de ferramentas botões foram todos levados a qualquer Scaling inadequada (ícones borradas), a linha inferior de pixels no ícone a ser truncado, ou o botão da barra de ferramentas sendo indevidamente size - para não mencionar os ícones desaparecem já mencionadas Here . Alguém já encontrou a melhor maneira de fazer standard, VisualStudio / WinForms de estilo da barra de ferramentas botões que são exibidos corretamente no WPF?

Answer 1

Em primeiro lugar, mudar a resolução da imagem para 96 ??dpi, isso pode fazer com a livre Paint.net ( http: // www. getpaint.net ) abrindo o arquivo, selecionar Tamanho Imagem-> tela do menu e ajustar a "resolução" para 96 ??e poupança.

Se isso não ajudar você pode usar a solução que eu escrevi no meu blog aqui http://www.nbdtech.com/blog/archive/2008/11/20/blurred-images-in-wpf.aspx

Answer 2

A melhor maneira seria usar gráficos vetoriais em vez de png. Eu sei o seguinte não é exatamente o que você pediu, mas IMHO não há nenhuma maneira para melhor ícones olhando. Também ajudaria a se livrar off margens e guarnição. (Ok, se você quiser usar fotos que você está ferrado)

má notícia é que você provavelmente precisará redesenhar todos os seus ícones. Você pode fazer isso usando o MS Expression Blend (ele é capaz de salvar imagens pintadas como XAML) ou você fazê-los em nosso próprio com um editor de texto. Eu prefiro o Border.Background vez do Image.Source para colocar o ícone, isso me permite colocar um texto sobre a imagem. Isto olharia samething assim:

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

Answer 3

A melhor solução que eu posso vir acima com é o seguinte:

<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"/>

Ou, alternativamente:

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

Para o Tag Button, é necessário o atributo Padding para assegurar que a imagem não é truncada a uma altura de 15 pixels, e que o botão não é redimensionada para ajustar a imagem. Alternativamente, poderíamos especificar Padding = "1", mas então nós deve definir manualmente height = "21" e width = "22" para garantir o botão não é redimensionada para caber a imagem
Na imagem Tab, a altura e largura são necessárias para assegurar que a imagem não é esticada. SnapsToDevicePixels e RenderOptions.BitMapScalingMode são ambos necessários para garantir que não há indefinição. Não posso prometer que isso vai funcionar muito bem para todas as resoluções.

Nota: Para o ícone NewDocumentHS.png, o que faz com que a maioria dos problemas, já que tem-se o total de 16 pixels de altura, você pode querer ajustar o preenchimento de "1,1,3,2", de modo que as alinha de fundo mais corretamente com outros ícones.

Answer 4

Você pode querer considerar tentar uma nova propriedade disponível agora em WPF4 . Deixe o RenderOptions.BitmapScalingMode a HighQuality ou simplesmente não declará-lo.

Em seu elemento raiz (ou seja, a sua janela principal) adicionar essa propriedade:. UseLayoutRounding="True"

A propriedade anteriormente só disponível em Silverlight já fixa todos os problemas de dimensionamento de bitmap. :)

Por favor, note - alguns dos efeitos de layout arredondamento pode ter sobre layout exato:

• e largura ou altura dos elementos pode aumentar ou diminuir por no máximo 1 pixel

• colocação de um objeto pode mover-se por, no máximo, 1 pixel

• elementos pode ser centrado verticalmente ou horizontalmente para fora do centro, no máximo 1 pixel

Mais informações encontradas aqui: http: // blogs.msdn.com/text/archive/2009/08/27/layout-rounding.aspx