0

Today I have encourted something weird, which has never happened to me, and I didn't experience it anywhere before. So let me go intol the detail, My friend have made a Photoshop Image with layers, which, I'll use to make him a software, but, when I try to add like layers 1 by one on a wpf app, and after fixing the aspect ratio by using the Stretch thingy, I have found out that it doesn't look exactly like the original picture in Photoshop, like, I have put all the layers, each one seperated of course, because, later I'll interact with them, let me show you some images. but it still looks like there's some pixels missing and the text is not showing correctly.

This is the program interface:

The program interface

This is the Photoshop image:

Photoshop image

And this is my XML code:

<Window x:Class="OlympusSimple.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" ResizeMode="NoResize" WindowStyle="None" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Height="400" Width="800">
<Grid>
    <Image Height="400" HorizontalAlignment="Left" Name="BackgroundUpbarBlur" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/BackgroundUpbarBlur.png" Margin="0,0,0,0" />
    <Image Height="400" HorizontalAlignment="Left" Name="BackgroundUpbar" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/BackgroundUpbar.png" Margin="0,0,0,0" />
    <Image Height="400" HorizontalAlignment="Left" Name="Olympus" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/Olympus.png" Margin="0,0,0,0" />
    <Image Height="400" HorizontalAlignment="Left" Name="Upbar" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/UpBar.png" Margin="0,0,0,0" />
    <Image Height="400" HorizontalAlignment="Left" Name="Minimize" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/Minimize.png" Margin="0,0,0,0" />
    <Image Height="400" HorizontalAlignment="Left" Name="FullScreen" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/FullScreen.png" Margin="0,0,0,0" />
    <Image Height="400" HorizontalAlignment="Left" Name="Close" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/Close.png" Margin="0,0,0,0" />
    <Image Height="400" HorizontalAlignment="Left" Name="SelectFile" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/SelectFile.png" Margin="0,0,0,0" />
    <Image Height="400" HorizontalAlignment="Left" Name="SelectDestination" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/SelectDestination.png" Margin="0,0,0,0" />
    <Image Height="400" HorizontalAlignment="Left" Name="ButtonDiscordUnready" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/ButtonDiscordUnready.png" Margin="0,0,0,0" />
    <Image Height="400" HorizontalAlignment="Left" Name="RestoreAll" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/RestoreAll.png" Margin="0,0,0,0" />
    <Image Height="400" HorizontalAlignment="Left" Name="Tutorial" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/Tutorial.png" Margin="0,0,0,0" />
    <Image Height="400" HorizontalAlignment="Left" Name="Twitter" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/Twitter.png" Margin="0,0,0,0" />
    <Image Height="400" HorizontalAlignment="Left" Name="Patreon" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/Patreon.png" Margin="0,0,0,0" />
    <Image Height="400" HorizontalAlignment="Left" Name="Discord" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/Discord.png" Margin="0,0,0,0" />


</Grid>

I've searched and didn't find anything that could lead me to a solution, so if anyone can help me it'll be greatly appreciated.

  • Make sure that your images are 96 dpi (Photoshop is usually creating 72 dpi). And remove stretch = Uniform from your images! – Vlad Feb 16 '19 at 18:48
  • I've read in other places that Stretch will make sure the Aspect Ratio is the same as photoshop's (which is 16:8) –  Feb 16 '19 at 18:49
  • 1
    You might want to look here to see what properties can possibly have an impact on the rendering quality of the bitmaps: https://stackoverflow.com/questions/592017/my-images-are-blurry-why-isnt-wpfs-snapstodevicepixels-working Also note that the values for `Width` and `Height` properties of the Image element (and any other WPF UI element) are not in pixels, but in 1/96 inch (96 DPI). Thus, setting `Width` to 800 doesn't mean an image width of 800 pixels, but rather an image width of 800/96 = ~8 inch (presuming no UI scaling in effect and the device/display reports its correct DPI resolution) –  Feb 16 '19 at 19:06
  • Wow thanks! that post helped me, and also I've done some calculations, and the Width and Height are 797x394 according to 96 DPI. –  Feb 16 '19 at 19:21
  • 1
    It's a mistake to make a lot of that image controls. Text like selectfile should be textblocks. Icons like twitter should be paths - which are vector. – Andy Feb 16 '19 at 20:55

0 Answers0