Scaling button background images and resizing window in wpf
<p>Working on the design of a new WPF control which needs to display well on a 7 inch tablet and a large 20-30 inch monitor and anywhere in between. </p>

<p>I will have panel of buttons in the control which will have Icons to represent their actions and this panel can be changed depending on configuration and system state. </p>

<p>In all i think there are around 40 potential icons. </p>

<p>I initially assumed vector graphic files would be supported (.SVG Extension) but this isnt the case. </p>

<p>Having a large image file which looks good on a large monitor looks bad when the control is on the 7 inch tablet and the same holds true for a small image which looks good when scaled up to the large monitor. </p>

<p>An average size image only looks average on everything. </p>

<p>How do i best deal with scaling the images so that it looks best at both the small tablet and the large monitor?</p>

<p>This is the basics of how im displaying the images. </p>

<pre><code>&lt;Window.Resources&gt;
    &lt;Image x:Key="PngImage" Source="C:\Images\acid.png"/&gt;
&lt;/Window.Resources&gt;

&lt;Grid&gt;
    &lt;Grid.RowDefinitions&gt;
        &lt;RowDefinition Height="*" /&gt;
        &lt;RowDefinition Height="*" /&gt;
    &lt;/Grid.RowDefinitions&gt;
    &lt;Grid.ColumnDefinitions&gt;
        &lt;ColumnDefinition Width="*" /&gt;            
    &lt;/Grid.ColumnDefinitions&gt;

    &lt;Button Grid.Row="0" Grid.Column="0" Content="{StaticResource PngImage}"/&gt;
&lt;/Grid&gt;
</code></pre>