title: Workaround to WPF Menu Item Icon Behaviour in Windows 8
body: <p>I have a menu in my WPF application that uses PNG images for icons. These images are stored as resources in a separate DLL. In older versions of Windows the icons (which are 48x48 pixels) displayed correctly, shrinking to the size of the container.</p>
  
  <p>In Windows 8, the icons behave differently.</p>
  
  <p>Here is a sample of my code:</p>
  
  <pre><code>&lt;MenuItem Header="Promotions" x:Name="mnuPromotions" Style="{StaticResource styMenuItem}"&gt;
      &lt;MenuItem.Icon&gt;
          &lt;Image Source="{StaticResource icnPromotion_48}" Style="{StaticResource styMenuIcon}" /&gt;
      &lt;/MenuItem.Icon&gt;
  &lt;/MenuItem&gt;
  &lt;MenuItem Header="Catalogues" x:Name="mnuCatalogues" Style="{StaticResource styMenuItem}"&gt;
      &lt;MenuItem.Icon&gt;
          &lt;Image Source="{StaticResource icnCatalogue_48}" Style="{StaticResource styMenuIcon}" /&gt;
      &lt;/MenuItem.Icon&gt;
  &lt;/MenuItem&gt;
    &lt;MenuItem Header="Customer Price Lists" x:Name="mnuCustomerPriceLists"&gt;
      &lt;MenuItem.Icon&gt;
          &lt;Image Source="{StaticResource icnCashCustomer_48}" Style="{StaticResource styMenuIcon}" /&gt;
      &lt;/MenuItem.Icon&gt;
  &lt;/MenuItem&gt;
  </code></pre>
  
  <p>Here is the style of the menu item</p>
  
  <pre><code>&lt;Style x:Key="styMenuItem" TargetType="MenuItem"&gt;
    &lt;Setter Property="Foreground" Value="#FF000000" /&gt;
    &lt;Setter Property="FontSize" Value="22" /&gt;
    &lt;Setter Property="Margin" Value="2" /&gt;
    &lt;Setter Property="Background"&gt;
      &lt;Setter.Value&gt;
        &lt;LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&gt;
          &lt;GradientStop Offset="0" Color="#AA9D9D9D" /&gt;
          &lt;GradientStop Offset="1" Color="#AACFCDBE" /&gt;
        &lt;/LinearGradientBrush&gt;
      &lt;/Setter.Value&gt;
    &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>And here is the style of the Icon</p>
  
  <pre><code>&lt;Style x:Key="styMenuIcon" TargetType="Image"&gt;
    &lt;Setter Property="Width" Value="20" /&gt;
    &lt;Setter Property="Height" Value="20" /&gt;
    &lt;Setter Property="VerticalAlignment" Value="Center" /&gt;
    &lt;Setter Property="HorizontalAlignment" Value="Center" /&gt;
    &lt;Setter Property="Margin" Value="2" /&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>This is what the menu looks like in older versions of Windows:
  <img src="https://i.stack.imgur.com/ucWHl.jpg" alt="Menu in Windows XP to Windows 7"></p>
  
  <p>And this is that the menu looks like in Windows 8
  <img src="https://i.stack.imgur.com/TgipW.jpg" alt="Menu in Windows 8"></p>
  
  <p>If you look closely, the icons are centred and cropped in Win8 while they fit inside the container in the older versions of Windows.</p>
  
  <p>Does anybody know why this behaviour changes and if there is a simple workaround for this change in behaviour so that the menu is fully compatible with all versions of Windows from XP to 8?</p>