[Windows Phone – Silverlight] Uniform to fill, centered

Posted on Edited on In , Disqus:

To display images in Silverlight apps, you usually use the Image Control.

The Image Control has a few display-related properties such as Stretch, Fill, Uniform and UniformToFill. Uniform To Fill scales the image up to match the size of the control, and in practice it cuts off the top-left corner of the image, which gives us the feeling that the image is centered.

perfect

So how do we get that “Perfect” image?

Stretch Property

The Image Control has 4 states for the Stretch Property (see the illustration)

  • None: the image is not resized
  • Fill: the image is scaled to fit the size of the control
  • Uniform: the image is also scaled, but the aspect ratio is preserved
  • Uniform To Fill: the image is scaled, keeps its aspect ratio and fills the control completely. If the control has a different aspect ratio than the Image, part of the left and right sides gets cut off

The solution

Add a Border wrapping the Image Control

<border Width="200" Height="200"> 
  <Image Source="/your_source" Stretch="UniformToFill"> 
</border>

Right after adding the border, you will see it render the same result as when there was no border. So, no different =.=

However, the Image control is now constrained by the Border around it, which has a fixed size.

Now you can adjust the position of the ImageControl with the HorizontalAlignment and VerticalAlignment properties. Apply “Center” to both and you get the “Perfect” image.