title: How to load a png file in wpf and have it be the same size as in Paint
body: <p>I am having a problem loading a pgn file in WPF using VS 2008 3.5 framework.  The file loads and displays ok, but the size is off.  I have researched other questions, and have tried various suggestions, but to no avail.</p>
  
  <p>I started with an image in a pgn file that was 36 x 50.  I then used Windows Paint to reduce it in size to 29 x 40.  I load it into a System.Windows.Media.Imaging.Bitmap object and then use that as the source for a System.Windows.Controls.Image object.  When the image is displayed, it appears larger than the same image in Paint.  Here is what I have done to try to fix the problem:</p>
  
  <ol>
  <li><p>Verified that the file read in has the proper width and height.  looked at the bitmap object in the debugger and it says the width = 29 and the height = 40.  Verified that the system dpi is set to 96 from code at this <a href="https://stackoverflow.com/questions/1918877/how-can-i-get-the-dpi-in-wpf">link</a>.</p></li>
  <li><p>Set Stretch = none.  Has had no effect.</p></li>
  <li><p>Tried using the System.Drawing.Image object to view the pgn file horizontal and vertical resolution.  They are both set to 96.</p></li>
  <li><p>Tried using <a href="http://www.hanselman.com/blog/BeAwareOfDPIWithImagePNGsInWPFImagesScaleWeirdOrAreBlurry.aspx" rel="nofollow noreferrer">pgnout</a>, which is a pgn file compression program on some of my file images.  It is also supposed to set the image resolution to 96.  It had no effect on the size of the displayed images.</p></li>
  <li><p>Tried comparing the size displayed against different size images.  It appears that the displayed height is 31 pixels.  The width is about 34 pixels.  Have tried using other editors like Paint.Net and Gimp, but they produce the same results as Paint.</p></li>
  </ol>
  
  <p>I'm running out of ideas.  The only work around I see is to go into Paint and readjust all my images to a smaller size so that they will be the right size when displayed in WPF.</p>
  
  <p>Here is my code for loading a pgn file and creating an image:</p>
  
  <pre><code>private void LoadCardbackBitmapFromFile()
  {
     // This method loads the cardback image from the pgn file.
     //
     string CardBackFileName = AppSettings.CardsbackFolder + @"\" + AppSettings.CardsBackFileName + AppSettings.CardsBackIndex.ToString() + ".png";
     // Check if the file exists.
     if (!File.Exists(CardBackFileName))
     {
        StringBuilder SBLog = new StringBuilder("AttackPoker2::Cards::Cards - unrecoverable error - could not find the card back file " + CardBackFileName.ToString() + ".\n");
        SSLSocketInterface.LogMsgCPP(SBLog, LogLevel.LogInfo);
        string S = "Unrecoverable error - could not find the card back file " + CardBackFileName.ToString() + ".\nInstallation may be corrupt.  Try re-installing or re-locating the cards folder.";
        throw new ApplicationException(S);
     }
     CardbackBitmap = new BitmapImage();
     CardbackBitmap.BeginInit();
     CardbackBitmap.UriSource = new Uri(CardBackFileName, UriKind.Absolute);
     CardbackBitmap.CacheOption = BitmapCacheOption.OnLoad;
     CardbackBitmap.EndInit();
     CardbackImage = new Image();
     CardbackImage.Source = CardbackBitmap;
     CardbackImage.Stretch = Stretch.None;
     CardbackImage.VerticalAlignment = VerticalAlignment.Top;
     CardbackImage.HorizontalAlignment = HorizontalAlignment.Left;
  }
  
  private void CreateCardbackImages()
  {
     // This method creates clones of the cardback image so that they can be displayed simultaneously.  WPF does not provide the capability to reuse ui objects.
     //
     for (int SeatLoop = 0; SeatLoop &lt; NumSeats; SeatLoop++)
     {
        for (int CardLoop = 0; CardLoop &lt; NumPlayerCards; CardLoop++)
        {
           Image CBI = new Image();
           CBI.Source = CardbackImage.Source;
           CBI.Stretch = CardbackImage.Stretch;
           // Set the card so it is not viewable.
           CBI.Visibility = Visibility.Collapsed;
           CardbackImages[SeatLoop, CardLoop] = CBI;
           CardsGrid.Children.Insert(SeatLoop, CBI);
        }
     }
  }
  //
  private Grid LayoutRoot; // The main ui grid.
  private Grid CardsGrid; // Used to place the the card images.
  private BitmapImage CardbackBitmap; // Used to hold the image read in from the pgn file.
  private static Image CardbackImage; // Used to hold the original cardback image.
  private Image[,] CardbackImages; // Holds the list of cardback images used to deal the cards to each player. 1st dim is the seat; 2nd dim is the card number.
  </code></pre>
  
  <p>Here is the XAML:</p>
  
  <pre><code>&lt;Window x:Class="A2.GameWindow" Width="600" Height="497"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Closing="GameWindow_Closing"&gt;
    &lt;Viewbox HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="Fill"&gt;
      &lt;Grid Name="LayoutRoot"&gt;
        &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="0.85*"/&gt;
          &lt;RowDefinition Height="0.15*"/&gt;
        &lt;/Grid.RowDefinitions&gt;
           &lt;Image Source="Table Green.png" Stretch="Fill"/&gt;
           &lt;TabControl Grid.Row="1" FontSize="9" FontFamily="Fonts/#Segoe UI Semibold" FontWeight="Bold"&gt;
            &lt;TabItem Header="Chat"&gt;
              &lt;StackPanel&gt;
                &lt;TextBox Name="TxtTyping" Width="193.75" FontSize="8" MaxLines="1" Margin="-285,0,0,0"&gt;&lt;/TextBox&gt;
                &lt;TextBox Name="TxtMessages" Width="193.75" Height="64.125" FontSize="8" Margin="-285,0,0,0" Background="#FFC8F0EC"&gt;&lt;/TextBox&gt;
              &lt;/StackPanel&gt;
            &lt;/TabItem&gt;
            &lt;TabItem Header="Notes"&gt;
              &lt;StackPanel&gt;
                &lt;ComboBox Name="NotesCombo" Width="193.75" Margin="-285,0,0,0"&gt;&lt;/ComboBox&gt;
                &lt;TextBox Name="TxtNotesMessages" Width="193.75" Height="64.125" Margin="-285,0,0,0"&gt;&lt;/TextBox&gt;
              &lt;/StackPanel&gt;
            &lt;/TabItem&gt;
            &lt;TabItem Header="Stats"&gt;
                &lt;TextBox Name="TxtStats" Width="193.75" Height="64.125" Margin="-285,0,0,0" Background="#FFC8F0EC"&gt;&lt;/TextBox&gt;
            &lt;/TabItem&gt;
             &lt;TabItem Header="Info"&gt;
                &lt;TextBox Name="TxtInfo" Width="193.75" Height="64.125" Margin="-285,0,0,0" Background="#FFC8F0EC"&gt;&lt;/TextBox&gt;
            &lt;/TabItem&gt;
          &lt;/TabControl&gt;
        &lt;/Grid&gt;
      &lt;/Viewbox&gt;
  &lt;/Window&gt;
  </code></pre>
  
  <p>Does anyone have any ideas what the problem might be?  How can I make an image display the same size in WPF as it does in Paint and other image editors?  Am I doing anything wrong?  Any suggestions would be appreciated.</p>