Answered by:
Large Images pixelate in a small <Image> element

Question
-
Hello,
when I use a high quality image (lets say 1920x1080) as a source in a relatively small <Image> element (100x50) where Stretch="UniformToFill", the image kind of pixelates.
How can i avoid this issue? Let me add that the Image source is sometimes a local file and sometimes a URL. I've tried scaling the image, but I couldn't find a solution.Johann
Monday, November 11, 2013 10:38 AM
Answers
-
Found a perfect solution for me:
<Image Width="100" Height="100" Stretch="UniformToFill"> <Image.Source> <BitmapImage DecodePixelWidth="100" UriSource="{Binding ImagePath}" /> </Image.Source> </Image>
The golden keyword is DecodePixelHeight
- Edited by Johann Niederkofler Sunday, November 17, 2013 12:31 AM
- Marked as answer by Johann Niederkofler Sunday, November 17, 2013 1:37 PM
Sunday, November 17, 2013 12:25 AM
All replies
-
1920x1080 has a 1.83 ratio
100 x 50 has a 2 ratio.If you match the ratios up I bet it will look a lot better.
Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.
NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.Monday, November 11, 2013 8:18 PMModerator -
100x50 was just a sample. Sorry for this confusion. The ratios are exactly the same.Tuesday, November 12, 2013 10:44 AM
-
What are you doing to scale the photo?
Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.
NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.Tuesday, November 12, 2013 2:46 PMModerator -
I've tried something like this, but this is just making the image smaller. I am currently not using the Image.RenderTransform.
<Image Source="{Binding ImageUri}" Width="100" Stretch="Uniform"> <Image.RenderTransform> <ScaleTransform ScaleX="0.3" ScaleY="0.3"></ScaleTransform> </Image.RenderTransform> </Image>
Wednesday, November 13, 2013 7:18 AM -
I think you're going to need to find code that does an actual resize of the photo for display.
Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.
NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.Wednesday, November 13, 2013 2:54 PMModerator -
Resizing an image can be done rapidly and with quality using WriteableBitmapEx.Wednesday, November 13, 2013 3:48 PM
-
That's what I feared. :/Wednesday, November 13, 2013 4:08 PM
-
Thank you for this link! I am going to try this package.Wednesday, November 13, 2013 4:10 PM
-
Found a perfect solution for me:
<Image Width="100" Height="100" Stretch="UniformToFill"> <Image.Source> <BitmapImage DecodePixelWidth="100" UriSource="{Binding ImagePath}" /> </Image.Source> </Image>
The golden keyword is DecodePixelHeight
- Edited by Johann Niederkofler Sunday, November 17, 2013 12:31 AM
- Marked as answer by Johann Niederkofler Sunday, November 17, 2013 1:37 PM
Sunday, November 17, 2013 12:25 AM -
I'm glad to see you got a good solution. :-)
Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.
NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.Tuesday, November 19, 2013 3:59 PMModerator