How to find information about images in wpf application

Assuming you are loading bitmaps (including BMP, JPEG, PNG, etc.), anything that is not a vector image, you can use the BitmapSource class in System.Windows.Media.Imaging to read the original PixelHeight and PixelWidth ... While you can load the image directly into the BitmapSource, if you load into the Image control, you can access the BitmapSource directly through the Image Source property. Then, it's just a definition of what low resolution means - less than 50 pixels, 100 pixels, 200 pixels, etc. And showing a warning when PixelHeight or PixelWidth is less than that.

Putting it all together, let's say we wanted to display an orange rectangle over the image if it was less than 100 pixels wide or less than 100 pixels. 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 only runs equality checks, we need a converter to compare the two values ​​- in this case, our actual pixel height / width and the pixel height / width that we defined make the image "low resolution" - and return true / false, which we can include. In the above code, it is called LessThanConverter. The code for the converter is simple:

/// <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 the image is loaded, the Rectangle Style checks its triggers to see if the image is less than 100 pixels high or wide; if so, it changes the visibility of the rectangle from default (collapsed) to visible, thus showing an orange rectangle over the top of the image. Of course, you can easily use a different display element when the image is at a low resolution.

To do this in the list, you just need to update the item templates to include both the original image and the warning icon; then style the alert icon based on the image it is associated with. You cannot use ElementName binding here, but one of the other binding types should suffice.

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