How to Know the Information about images in wpf Application

Question

I am developing WPF Application. In that iam loading images in Listbox. Is there any way to know that images having low resolution. I want to show low resolution images with warning. Plz help me regarding this query. Thanks in advance.

Answer 1

Assuming that you are loading bitmap images (which includes BMP, JPEG, PNG, etc. - anything that's not a vector image drawing), you can use the BitmapSource class in System.Windows.Media.Imaging to read the source image's PixelHeight and PixelWidth. While you can load an image directly into a BitmapSource, if you're loading into an Image control you can access the BitmapSource directly through the Image's Source property. Then, it's just about determining what low resolution means to you - less than 50px square, 100px, 200px, etc. and showing a warning when the PixelHeight or PixelWidth is less than that.

Putting it all together, say we wanted to display an orange rectangle on top of an image if it was less than 100px wide or less than 100px tall. Using a non-listbox implementation, we could do:

<Image x:Name="DemoImage" Source="demo.png"/>
<Rectangle Fill="Orange" Width="20" Height="20">
    <Rectangle.Resources>
        <local:LessThanConverter x:Key="LessThanConverter"/>
    </Rectangle.Resources>
    <Rectangle.Style>
        <Style TargetType="Rectangle">
            <Setter Property="Visibility" Value="Collapsed"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=DemoImage, Path=Source.PixelHeight, 
                    Converter={StaticResource LessThanConverter}, ConverterParameter=100}" Value="True">
                    <Setter Property="Visibility" Value="Visible"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding ElementName=DemoImage, Path=Source.PixelWidth, 
                    Converter={StaticResource LessThanConverter}, ConverterParameter=100}" Value="True">
                    <Setter Property="Visibility" Value="Visible"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Rectangle.Style>
</Rectangle>

Since WPF triggers only check equality, we need a converter to compare two values - in this case, our actual pixel height/width and the pixel height/width we've determined makes an image 'low resolution' - and return a true/false value we can trigger on. In the code above, it's named LessThanConverter. The code for the converter is straightforward:

/// <summary>
/// Converter to use in WPF triggers that returns true when
/// 'value' is less than 'parameter'.
/// </summary>
public class LessThanConverter : IValueConverter
{
    public object Convert(object value, Type targetType, 
        object parameter, System.Globalization.CultureInfo culture)
    {
        return ((int)value < System.Convert.ToInt32(parameter));
    }

    public object ConvertBack(object value, Type targetType, 
        object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Then, when an Image is loaded, the Rectangle's Style checks its Triggers to see if the image has a height or width that is less than 100px; if it does, it changes the visibility of the rectangle from the default (Collapsed) to Visible, thereby showing the orange rectangle on top of the image. Of course, you could easily use a different element to display when the image has low resolution.

To do this in a list box, you'll just have to update your item templates to include both your source image and the warning icon; then, apply the style to the warning icon based on the image it is associated with. You can't use ElementName binding here, but one of the other binding types should suffice.

Or, wrap the code below - which uses ElementName binding - into a custom control that contains both image and warning icon, and which you can use like a normal Image control in your item template, except that your custom control displays the warning icon in addition to the image (when a low resolution image is displayed).