ListView Item Icons Size

Can I change the size of the icons independantly for listview items?

I’d like to set the following change only for picture type files. (I’m displaying the actual picture not the file type windows Icon)

lvwFiles.ViewSettingsThumbnails.ImageSize = New Size(128, 128)

 

Thanks,

 

Cameron

No, the ImageSize property applies to all items for that view. If you are trying to emulate the Windows Explorer thumbnails view, you might want to use the IUIElementDrawFilter interface.

The following code sample demonstrates how to use the IUIElementDrawFilter interface to draw "photo" type images at a larger size and at the correct aspect ratio. Note that performance is not optimal with this approach, since drawing large images takes time and resources, so this example is for demonstrative purposes. This example also assumes that the item's Tag property is set to a System.IO.FileInfo instance, as is the case with the 'Infragistics File Explorer' sample that ships with the product.

Assign an instance of the following class to the control's DrawFilter property, and set the View to 'Thumbnails'.

#region UltraListViewThumbnailDrawFilter
/// <summary>
/// IUIElementDrawFilter interface implementor used to draw photographic
/// images larger and at the correct aspect ratio.
/// </summary>
public class UltraListViewThumbnailDrawFilter : IUIElementDrawFilter
{
    UltraListView listView = null;

    public UltraListViewThumbnailDrawFilter( UltraListView listView, Size imageSize )
    {
        this.listView = listView;
        this.listView.ViewSettingsThumbnails.ImageSize = imageSize;
    }

 #region IUIElementDrawFilter interface implementation

 public Infragistics.Win.DrawPhase GetPhasesToFilter( ref UIElementDrawParams drawParams )
 {
  // If the element is the UIElement which represents the item's image area,
  // return DrawPhase.BeforeDrawImage to signify that we want to handle the
        //  drawing for this element.
  UltraListViewIconicImageAreaUIElement imageAreaElement = drawParams.Element as UltraListViewIconicImageAreaUIElement;
  UltraListViewItemUIElement itemElement = imageAreaElement != null ?
             imageAreaElement.GetAncestor( typeof(UltraListViewItemUIElement) ) as UltraListViewItemUIElement :
             null;

  UltraListViewItem item = itemElement != null ? itemElement.Item : null;

  if ( item != null && item.Tag is System.IO.FileInfo )
   return DrawPhase.BeforeDrawImage;

  return DrawPhase.None;
 }

 public bool DrawElement( DrawPhase drawPhase, ref UIElementDrawParams drawParams )
 {
  UltraListViewIconicImageAreaUIElement imageAreaElement = drawParams.Element as UltraListViewIconicImageAreaUIElement;

  if ( imageAreaElement != null )
  {
            //  Get the FileInfo with which this item is associated
   UltraListViewItem item = imageAreaElement.GetContext( typeof(UltraListViewItem) ) as UltraListViewItem;
            System.IO.FileInfo fileInfo = item.Tag as System.IO.FileInfo;
            if ( fileInfo == null )
                return false;
           
            //  For the sake of simplicity, we will consider anything with a jpg or bmp
            //  extension to be a "photo" type image, and we will draw such images at
            //  a larger size and with the correct aspect ratio. Windows Explorer uses
            //  more sophisticated methods to make that determination, which are beyond
            //  the scope of this demonstration.
            bool isPhoto =
                string.Equals(fileInfo.Extension, ".jpg", StringComparison.InvariantCultureIgnoreCase) ||
                string.Equals(fileInfo.Extension, ".bmp", StringComparison.InvariantCultureIgnoreCase);

            //  Get the image
            System.Drawing.Image bmp = isPhoto ?
                Image.FromFile(fileInfo.FullName) as Bitmap :
                null;

            if ( bmp == null )
                return false;

            //  TODO: This should really be done using IUIElementCreationFilter,
            //  so the child elements never get created in the first place
            imageAreaElement.ChildElements.Clear();

            //  Calculate the new image size, so it is scaled but still
            //  maintains the same aspect ratio.
            Size newSize = Size.Empty;
            Rectangle rect = imageAreaElement.Rect;
            rect.Inflate( -4, -4 );

            Size actualSize = bmp.Size;
            double aspectRatio = (double)actualSize.Width / (double)actualSize.Height;
            bool landscape = aspectRatio > 1f;

            if ( landscape )
            {
                newSize.Width = rect.Width;
                newSize.Height = (int)( (double)rect.Height / aspectRatio);
            }
            else
            {
                newSize.Height = rect.Height;
                newSize.Width = (int)( (double)rect.Width * aspectRatio);
            }

            //  Calculate the new location
            Rectangle newRect = imageAreaElement.RectInsideBorders;
            Point newLocation = newRect.Location;
            newLocation.X += (newRect.Width / 2) – (newSize.Width / 2);
            newLocation.Y += (newRect.Height / 2) – (newSize.Height / 2);
            Rectangle drawRect = new Rectangle( newLocation, newSize );

         // Draw the image at the new size/location
            if ( bmp != null )
            {
             drawParams.Graphics.DrawImage( bmp, drawRect );

                if ( isPhoto )
                    bmp.Dispose();
            }

   return true;
  }

        return false;
    }
 #endregion IUIElementDrawFilter interface implementation

}
#endregion UltraListViewThumbnailDrawFilter

Thanks for the quick reply.  I did not realise the C# examples were not the same as the VB ones.  The VB sample app does not load the images beyond the file type icon.

 

Is there a benefit to using a DrawFilter over manipulating the image and assigning it to the ListViewItem Appearance.Image?

 

I have it working essentially doing the following

 image = image.FromFile(fileInfo.FullName)

appearance.Image = SizeImage(image, 96, 96) 'Does all the proportional Scaling

 Also is there a way to reduce the amount of white space around the picture in the list view item?  The picture could almost be twice as big in the same amount of space without all of the padding. Thanks, Cameron 

 

Thumbnails view intentionally leaves considerable padding around the image to make it easier to  emulate Windows Explorer's thumbnails view. The draw filter example I posted here makes use of that.

Hi,

I have read this post but i didn't found the solution to reduce the amount of white space around the picture in the list view item. I have alwas the same Picture size for my items and i only want to reduce the white space with a Filter can anyone post a solution.

Thanks