WPF: Como exibir uma imagem em seu tamanho original?

98

Tenho um problema com a exibição de imagens no WPF.

Este é o meu código:

<Button HorizontalAlignment="Left" Grid.Column="1" Grid.Row="5" Margin="0,5">
        <Button.Content>
            <StackPanel Orientation="Horizontal" Margin="10,0">
                <Image Source="/images/user_add.png" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center" Width="24" Height="24" />
                <TextBlock Text="添加" />
            </StackPanel>
        </Button.Content>
    </Button>

Eu tenho uma imagem com tamanho original 32 * 32, mas quando eu executei o código acima, a imagem vai se esticar para preencher todo o espaço, além de seu tamanho original. Também defino a propriedade "Stretch" como "None", mas parece que não funciona.

Então, como posso resolver esse problema? Obrigado!

— Jiluo
fonte

127

Aqui está uma pergunta semelhante. Geralmente a configuração Stretch="None"é suficiente.

Também é muito importante qual DPI tem a imagem definida nos metadados. Demorei um pouco para descobrir que, se o DPI da imagem for diferente do DPI do monitor (geralmente 96), o WPF redimensionará automaticamente a imagem, pois tenta ser independente de DPI .

EDITAR

O link do MSDN está quebrado, aqui está o novo link: MSDN Blog - Blurry Bitmaps . Vamos manter o link antigo para ser usado para archive.org, caso o novo link também pare de funcionar.

— Paya
fonte

10

Ótima dica sobre configurações de DPI, Paja. Vários dos ícones da minha barra de ferramentas foram configurados para 72 DPI, o que faz com que pareçam maiores, mesmo que as dimensões em pixels sejam 16x16.

— dthrasher

Não entendo. Você está dizendo que o WPF terá um layout diferente na sua janela, dependendo da resolução da tela? Não há como isso ser uma coisa boa.

— Kyle Delaney de

@KyleDelaney Você leu o artigo que incluí na resposta?

— Paya de

1

@KyleDelaney Sim, é também por isso que você usa "pontos" em vez de "pixels" para especificar tamanhos, distâncias, margens etc. no WPF.

— Paya

1

@ PawełAudionysos Consertei o link quebrado

— Paya

7

<Image Source="Images/Background.png" UseLayoutRounding="True" SnapsToDevicePixels="True" Width="600" Height="800" Stretch="Fill" />

Este funciona para mim, para uma imagem com 600x800 pixelse 96dpi.

@ rishad2m8 Se o tamanho for desconhecido, pode-se detectar o tamanho primeiro com https://msdn.microsoft.com/en-us/library/system.drawing.image.size(v=vs.110).aspx, eu acho.

— Ulrich-Lorenz Schlüter
fonte

1

e se o tamanho da imagem for desconhecido?

— rishad2m8

Você é um salvador. Você não gostaria de saber por quanto tempo eu estava agonizando com esse problema.

— David Atkinson

1

UseLayoutRounding definido como true funcionou para mim! Obrigado!

— Blake Thingstad

6

Tente não especificar a largura ou altura, use-o assim:

<Image Source="/images/user_add.png" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center" />

— Criança Voodoo
fonte

4

Acrescentando à resposta de Paya: para compensar WPFa tentativa de se adaptar à resolução dos monitores, você deve ser capaz de definir o Widthe Heightpara as dimensões originais e uso do arquivo Stretch="Fill". Isso funcionou para mim.

— desculpemissjackson
fonte

0

Se você deseja exibir a imagem com o tamanho original, mas não sabe o tamanho da imagem, acho que a melhor forma é definir a imagem como fundo do UIElement. Como isso:

    <Button>
        <Button.Background>
            <ImageBrush ImageSource="/images/user_add.png" Stretch="None"/>
        </Button.Background>
    </Button>

— Shirley
fonte