title: Pixelated images / icons in in WPF Ribbon?
body: <p>So far, if I've wanted to just make a button with an image in my XAML, I could do something like this:</p>
  
  <pre><code>&lt;Button&gt;
      &lt;Button.Content&gt;
          &lt;Grid&gt;
              &lt;Image Source="myimage.png" Width="45" RenderOptions.EdgeMode="Aliased" RenderOptions.BitmapScalingMode="High Quality"/&gt;
          &lt;/Grid&gt;
      &lt;/Button.Content&gt;
  &lt;Button&gt;
  </code></pre>
  
  <p>This worked well. Now I'm trying to do RibbonButtons and RibbonApplicationMenuItems, and things don't seem to quickly make sense.</p>
  
  <p>A RibbonButton has a LargeImageSource and a SmallImageSource... If I try modifying the content like as shown above, neither of the images appear. If I use a 48x48 image for both Large and SmallImageSources, the small one ends up pixelated. What? I thought I can specify aliasing and high quality, and that the application is supposed to scale the image cleanly for me. Why doesn't this happen?</p>
  
  <p>Similar issue with the RibbonApplicationMenuItem. This one lets me specify an ImageSource. If I pick a large PNG, it looks okay-ish, but is pixelated (the same PNG resized in an Explorer window looks fine), like it is being improperly stretched smaller. If I use an ICO that has 16x16, 24x24, 32x32, 48x48, etc. embedded, it looks like the smallest icon in the ICO is used and the stretched larger.</p>
  
  <p>If I use the same ICO file that the application icon is using (which looks fine on at the top of the application, so that picked the right embedded icon), even with this ICO the RibbonApplicationMenuItem looks poor.</p>
  
  <p>Obviously I'm missing some key things here. What do I need to do so that my buttons and items on my ribbon navigation look clean and sharp?</p>
  
  <p>More example code:</p>
  
  <pre><code>&lt;RibbonApplicationMenuItem Header="Command Text" ImageSource="myimage.png" Command="{Binding MyCommand}" /&gt;
  &lt;RibbonButton LargeImageSource="myimage.png" Label="Command Text" KeyTip="C" Command="{Binding MyCommand}" /&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>EDIT</strong> 9/24/15: Per Adeeb Arangodan's request, I'm adding more code and including some pictures.</p>
  
  <p>Pictures of some of the original images used (ICOs, and PNGs of various sizes):</p>
  
  <p><a href="https://i.stack.imgur.com/5MQvM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5MQvM.png" alt="enter image description here"></a></p>
  
  <p>Also, here is more example code. Included is the entire window, and multiple button attempts. As you can see, only the image "paste_32.png" which is already sized correctly, appears to look nice. Every other button, whether using an ICO or PNG that is larger than the target size, ends up blurry.</p>
  
  <pre><code>&lt;Window x:Class="RibbonDemo.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Title="MainWindow" Height="350" Width="525"
          xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"&gt;
      &lt;Grid&gt;
          &lt;r:Ribbon&gt;
              &lt;r:Ribbon.HelpPaneContent&gt;
                  &lt;r:RibbonButton SmallImageSource="pack://application:,,,/RibbonDemo;component/Images/help.ico" /&gt;
              &lt;/r:Ribbon.HelpPaneContent&gt;
  
              &lt;r:Ribbon.ApplicationMenu&gt;
                  &lt;r:RibbonApplicationMenu &gt;
                      &lt;r:RibbonApplicationMenuItem Header="Error" ImageSource="pack://application:,,,/RibbonDemo;component/Images/error.ico" /&gt;
                      &lt;r:RibbonApplicationMenuItem Header="Print" ImageSource="pack://application:,,,/RibbonDemo;component/Images/print.ico" /&gt;
                      &lt;r:RibbonApplicationMenuItem Header="Vendor" ImageSource="pack://application:,,,/RibbonDemo;component/Images/batch_logo.png" RenderOptions.EdgeMode="Aliased" RenderOptions.BitmapScalingMode="HighQuality" /&gt;
                      &lt;r:RibbonApplicationMenuItem Header="Paste" ImageSource="pack://application:,,,/RibbonDemo;component/Images/paste_32.png" /&gt;
                  &lt;/r:RibbonApplicationMenu&gt;
              &lt;/r:Ribbon.ApplicationMenu&gt;
  
              &lt;r:RibbonTab Header="Home"&gt;
  
                  &lt;r:RibbonGroup Header="Home"&gt;
                      &lt;r:RibbonMenuButton 
                          LargeImageSource="pack://application:,,,/RibbonDemo;component/Images/error.ico"
                          SmallImageSource="pack://application:,,,/RibbonDemo;component/Images/error.ico" Label="Error"&gt;
                      &lt;/r:RibbonMenuButton&gt;
                      &lt;r:RibbonButton LargeImageSource="pack://application:,,,/RibbonDemo;component/Images/print.ico" Label="Help"/&gt;
                      &lt;r:RibbonButton LargeImageSource="pack://application:,,,/RibbonDemo;component/Images/batch_logo.png" Label="Vendor" RenderOptions.EdgeMode="Aliased" RenderOptions.BitmapScalingMode="HighQuality"/&gt;
                      &lt;r:RibbonButton LargeImageSource="pack://application:,,,/RibbonDemo;component/Images/paste_32.png" Label="Paste"/&gt;
                  &lt;/r:RibbonGroup&gt;
              &lt;/r:RibbonTab&gt;
          &lt;/r:Ribbon&gt;
      &lt;/Grid&gt;
  &lt;/Window&gt;
  </code></pre>