Hi,
I've followed the instructions for creating a custom visual Item, but I need some direction on how to make that example more useful and attractive.
What I need is the item image shown (a thumbnail image, it's an image gallery listview), and under that I need two buttons with transparent png images, side by side. 32x32 icons (and the listview item itself is big, like 180x180.) Under the icons I need the Text of the bound item with 18pt font.
I've tried adding panels with the buttons, adding a lable element with custom font size... it's not really coming along very nicely and I feel like I'm just stumbling along and one day might get it all looking good haha
I added event handlers for the buttons inside my custom item class, is that the righ way to do it?
delBtnElem.Click += delBtnElem_Click;
But now the top-level click event on the item is not firing. Is my panel overlaying it all? I set an huge top margin to try to align the buttons under the Icon View image.
So maybe you can help me figure out the best way to lay it out?
Thank You!
-David
Here is the code in my Custom Item class (GalleryItemView):
public class GalleryItemView : IconListViewVisualItem
{ ...
protected override void CreateChildElements()
{
base.CreateChildElements();
stack.Orientation = Orientation.Vertical;
btnPanel.Margin = new Padding(0, 80, 0, 0);
printBtnElem.Image = Image.FromFile(@"..\..\Resources\print-icon.png");
printBtnElem.TextImageRelation = System.Windows.Forms.TextImageRelation.ImageAboveText;
printBtnElem.Click += printBtnElem_Click;
delBtnElem.Image = Image.FromFile(@"..\..\Resources\delete-icon.png");
delBtnElem.TextImageRelation = System.Windows.Forms.TextImageRelation.ImageAboveText;
delBtnElem.Click += delBtnElem_Click;
titleElem.Margin = new Padding(8);
titleElem.CustomFontSize = 18F;
btnPanel.Children.Add(printBtnElem);
btnPanel.Children.Add(delBtnElem);
stack.Children.Add(btnPanel);
stack.Children.Add(titleElem);
this.Children.Add(stack);
}
Here is some code form my Form:
private void radListViewGallery_VisualItemCreating(object sender, ListViewVisualItemCreatingEventArgs e)
{
if (this.radListViewGallery.ViewType == ListViewType.IconsView)
{
e.VisualItem = new GalleryItemView();
}
}
void radListViewGallery_VisualItemFormatting(object sender, Telerik.WinControls.UI.ListViewVisualItemEventArgs e)
{
e.VisualItem.DrawText = false;
e.VisualItem.ImageLayout = ImageLayout.Zoom;
e.VisualItem.ImageAlignment = ContentAlignment.MiddleCenter;
}
void radListViewGallery_ItemDataBound(object sender, Telerik.WinControls.UI.ListViewItemEventArgs e)
{
var databoundItem = e.Item.DataBoundItem as MyImageObject;
e.Item.Image = databoundItem.Image;
e.Item.Text = databoundItem.FilePath;
}
more details about the ListView
class MyImageObject
{
public Image Image { get; set; }
public string FilePath { get; set; }
public MyImageObject(Image img, string filePath)
{
this.Image = img;
this.FilePath = filePath;
}
}
private void RefreshFileList(string _filePath, FileFilterType _filterType)
{
List<String> fileList = new List<String>();
if (_filterType == FileFilterType.All)
{
var extensionFilter = new String[] { "*.png", "*.bmp", "*.jpg", "*.mp4" };
foreach (String extension in extensionFilter)
{
String[] files = Directory.GetFiles(_filePath, extension, SearchOption.TopDirectoryOnly);
foreach (String file in files)
fileList.Add(file);
}
}
if (_filterType == FileFilterType.Video) fileList = Directory.GetFiles(_filePath, "*.mp4", SearchOption.TopDirectoryOnly).ToList();
if (_filterType == FileFilterType.Images)
{
var extensionFilter = new String[] { "*.png", "*.bmp", "*.jpg" };
foreach (String extension in extensionFilter)
{
String[] files = Directory.GetFiles(_filePath, extension, SearchOption.TopDirectoryOnly);
foreach (String file in files)
fileList.Add(file);
}
}
imageList.Clear();
foreach (var mediaFileName in fileList.OrderByDescending(f => f))
{
var fileNameLowCase = mediaFileName.ToLower();
if (fileNameLowCase.Contains(".png") || fileNameLowCase.Contains(".bmp") || fileNameLowCase.Contains(".jpg"))
{
var tempImage = Image.FromFile(fileNameLowCase);
Bitmap pic = new Bitmap(96, 64);
using (Graphics g = Graphics.FromImage(pic))
{
g.DrawImage(tempImage, new Rectangle(0, 0, pic.Width, pic.Height));
}
imageList.Add(new MyImageObject(pic, fileNameLowCase));
tempImage.Dispose();
}
if (fileNameLowCase.Contains(".mp4"))
{
var thumb = getThumbnail(fileNameLowCase);
if (thumb == null)
{
Bitmap pic = new Bitmap(96, 64);
using (Graphics g = Graphics.FromImage(pic))
{
g.DrawImage(ICUSBCamera.Properties.Resources.play_button, new Rectangle(0, 0, pic.Width, pic.Height));
}
imageList.Add(new MyImageObject(pic, fileNameLowCase));
} else imageList.Add(new MyImageObject(thumb, fileNameLowCase));
}
}
radListViewGallery.DataSource = imageList;
}