locked
Image not rendering correctly

    Question

  • I have a Usercontrol with a which has a 

    <UserControl x:Class="TestProject.Test" 
               xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
               xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
               mc:Ignorable="d"
               xmlns:local="clr-namespace:NewProject.Controls"
                 xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
               Width="860" Height="630" Loaded="Current_Loaded" >
        <Grid x:Name="gv1">        
            <Image Source="../Images/Background.jpg" />

    The Background image used is 980 x 850

    The image shows up nice and neatly.

    Now i want to widen the image. I can set the Stretch property on Image which gives me different results but what i am struggling to understand is if the Width is 760 x 630 (original size of the above user control) the image is laid out properly. If i change the Width to 860 then i see white space on both sides when the background image has dimension of 980 x 850?

    How could i set this so the image expands by width without pixelating the end outcome?

    Thanks

    Wednesday, September 17, 2014 3:34 PM

Answers

  • Hi Pure Deal,

    There is four different properties in image. If you select Image fill as stretch your image will stretch according to the  image size. There is other important two variations that is Uniform and Uniform to fill. With these stretch options image will not stretching and  Uniform option keep your image static what ever image size is it appears as default size in this case if image size is larger than actual image dimensions you can have white spaces. With uniform to fill your image is starch uniformly and inside Image tag you can see the part of image that exactly filled with image size. No white spaces

    Hope that helps
    Please don't forget to up vote answers you like or which help you and mark one(s) which answer your question.

    ---------------------------------------

    M Prabath Maduranga Peiris
    Microsoft Partner  and MSP/MSA
    Blogs : prabathsl.blogspot.com

    Wednesday, September 17, 2014 5:32 PM
  • Hi

    Define image property in following way it fill fix your issue

    <Grid x:Name="gv1">   <Image Source="../Images/Background.jpg" Strectch ="Fill" />

    Stretch property of image allow have following options

    Fill

    Uniform to Fill

    Uniform
    Wednesday, September 17, 2014 5:43 PM

All replies

  • Hi Pure Deal,

    There is four different properties in image. If you select Image fill as stretch your image will stretch according to the  image size. There is other important two variations that is Uniform and Uniform to fill. With these stretch options image will not stretching and  Uniform option keep your image static what ever image size is it appears as default size in this case if image size is larger than actual image dimensions you can have white spaces. With uniform to fill your image is starch uniformly and inside Image tag you can see the part of image that exactly filled with image size. No white spaces

    Hope that helps
    Please don't forget to up vote answers you like or which help you and mark one(s) which answer your question.

    ---------------------------------------

    M Prabath Maduranga Peiris
    Microsoft Partner  and MSP/MSA
    Blogs : prabathsl.blogspot.com

    Wednesday, September 17, 2014 5:32 PM
  • Hi

    Define image property in following way it fill fix your issue

    <Grid x:Name="gv1">   <Image Source="../Images/Background.jpg" Strectch ="Fill" />

    Stretch property of image allow have following options

    Fill

    Uniform to Fill

    Uniform
    Wednesday, September 17, 2014 5:43 PM