Greetings All! I am trying to convert the igGridPhotoViewer sample from objective-c to C# (Monotouch), but am stuck on what do to after ViewDidLoad ... I don't really have a need to edit/add filter or re-size the selected image. Below is what I have so far, but I'm at a loss as to what to do next! As always, I sure do appreciate your help!!!
[Register("igGridPhotoViewer")] public class IgGridPhotoViewer : UIViewController { private UIView _resizeThumb; private Point _originPoint; private int _numberOfColumns, _maxNumberOfColumns, _portraitColumnCount; private float _columnSize, _resizeThumbSize, _resizeThumbOffset; private IGCellPath _editPath; private Size _landscapeSize, _portraitSize; private NSObject[] _photos;
private IGGridView _photoGridView, _thumbsGridView;
private IGGridViewColumnDefinition _col, _thumbCol; private IGGridViewSingleRowSingleFieldDataSourceHelper _photoDs, _singleRowThumbDs; private IGGridViewSingleFieldMultiColumnDataSourceHelper _thumbsDs;
bool IsPhone { get { return UIDevice.CurrentDevice.UserInterfaceIdiom == UIUserInterfaceIdiom.Phone; } }
bool IsIphone5 { get { return UIDevice.CurrentDevice.UserInterfaceIdiom == UIUserInterfaceIdiom.Phone && UIScreen.MainScreen.Bounds.Size.Height * UIScreen.MainScreen.Scale >= 1136; } }
public IgGridPhotoViewer() { }
public override void ViewDidLoad() { _columnSize = IsPhone ? 75 : 100; _resizeThumbSize = IsPhone ? 30 : 50; _maxNumberOfColumns = IsPhone && !IsIphone5 ? 2 : 3; _portraitColumnCount = IsPhone ? 3 : 6; _resizeThumbOffset = IsPhone ? 10 : 20; _landscapeSize = IsPhone ? (!IsIphone5 ? new Size(480, 256) : new Size(568, 256)) : new Size(1024, 680); _portraitSize = IsPhone ? (!IsIphone5 ? new Size(320, 392) : new Size(320, 480)) : new Size(768, 935);
base.ViewDidLoad();
View.BackgroundColor = UIColor.White; View.Alpha = 1;
_photoGridView = new IGGridView(View.Frame, IGGridViewStyle.IGGridViewStyleSingleCellPaging);
_photoGridView.SelectionType = IGGridViewSelectionType.IGGridViewSelectionTypeNone; _photoGridView.AlwaysBounceVertical = false; _photoGridView.AlwaysBounceHorizontal = true; View.AddSubview(_photoGridView);
_thumbsGridView = new IGGridView(); _thumbsGridView.RowSeparatorHeight = 0; _thumbsGridView.SelectionType = IGGridViewSelectionType.IGGridViewSelectionTypeCell; _thumbsGridView.HeaderHeight = 0; _thumbsGridView.RowHeight = _columnSize; View.AddSubview(_thumbsGridView);
_photos = GetAnimals().ToArray();
_col = new IGGridViewImageColumnDefinition(@"Image", IGGridViewImageColumnDefinitionPropertyType .IGGridViewImageColumnDefinitionPropertyTypeStringUrl);
_photoDs = new IGGridViewSingleRowSingleFieldDataSourceHelper(_col); _photoDs.Data = _photos;
_thumbCol = new IGGridViewImageColumnDefinition(@"thumb", IGGridViewImageColumnDefinitionPropertyType .IGGridViewImageColumnDefinitionPropertyTypeStringUrl);
_thumbsDs = new IGGridViewSingleFieldMultiColumnDataSourceHelper(_thumbCol); _thumbsDs.NumberOfColumns = 1; _thumbsDs.Data = _photos;
_singleRowThumbDs = new IGGridViewSingleRowSingleFieldDataSourceHelper(_thumbCol); _singleRowThumbDs.Data = _photos;
_thumbsGridView.DataSource = _thumbsDs;
_photoGridView.ScrollEnabled = true;
_thumbsGridView.ReloadData();
_thumbsGridView.PagingEnabled = true;
/* var selectPath = [ds deNormalizePath:selectPath]; [_thumbsGridView selectCellAtPath:selectPath animated:NO scrollPosition:IGGridViewScrollPositionNone]; [_thumbsGridView scrollToCellAtCellPath:selectPath atScrollPosition:IGGridViewScrollPositionNone animated:NO];*/
}
public List<PhotoData> GetAnimals() { var animals = new List<PhotoData>(); for (int i = 0; i < 100; i++) { animals.Add(new PhotoData(string.Format("http://placekitten.com/{0}/{0}", Random(20) + 300))); }
return animals; }
private readonly System.Random _random = new System.Random(); protected int Random(int count) { return _random.Next(count); }
[Register("PhotoData")] public class PhotoData : NSObject {
public PhotoData(string image) { Image = image; }
[Export("Image")] public string Image { get; set; } }
Hi Blake!
I'd be happy to create a C# version of the sample for you.
Which part of the sample are you looking for? Do you want the thumbnails portion, the large viewer, or both. The only reason i ask is so that you don't get any extraneous code that you don't need.
Let me know and i'll put something together for you today.
-SteveZ
Howdy Steve,
I sure would appreciate the C# example! I'm trying to create both the thumbnails portion and the large viewer. I really don't have a need for the editing or resizing pieces though. I eventually plan show the picture in the larger viewer full screen when the user taps it. You're awesome!
-Blake
Hi Blake,
I've attached my sample.
I kept it simple. We have 2 grids, one showing a thumbnail view and one showing the photos view. When you scroll the large grid, the thumbnails selection updates and scrolls to show the selection in view. Likewise if you select a cell in the thumbnails it will scroll the photo into view on the large grid.
Let me know if you have any questions.
Steve,
Thanks! I was wrong when I said I didn't need the resize functionality. I got this mixed up with the zoom on the Large Image. Since this really isn't Infragistics functionality, I'll try and implement it myself. I'll let you know if I run into any snags. I sure appreciate your help!
Blake
Hey Blake,
I'm apologize, i thought you meant the opposite.
Just an FYI, if you don't want zooming on the larger image, it's just one property on the IGGridViewImageColumnDefinition. Just set EnableZooming to false.
In terms of resizing. just let me know if you'd like me to update the sample, it shouldn't take long for me to add that functionality. The only tricky part, which may be confusing, is when the grid is in portrait mode, and you resize to one row, it actually switches out the DataSourceHelpers from a MultiColumn DSH to a SingleRow DSH. The sample I sent you, just simply uses the SingleRow DSH.
That all comes down to this code located in ViewDidLoad:
_landscapeSize = new SizeF(UIScreen.MainScreen.Bounds.Height, UIScreen.MainScreen.Bounds.Width); _portraitSize = new SizeF(UIScreen.MainScreen.Bounds.Width, UIScreen.MainScreen.Bounds.Height);
Basically, these are the sizes that we're accounting for when we do our calculations throughout this application.
In the project i sent you, I kept it simple, and just assumed the MainScreen size. However, you can change this code to account for your actual available size. Note, the navigation bar actually changes size when you rotate it, so it's not a fixed size, and that size is different for the iPhone and iPad.
I believe the sizes are:
44 on iPad Landscape and Portrait
44 on iPhone Portrait
32 on iPhone Landscape
So you could do something like:
float landscape = (UIDevice.CurrentDevice.UserInterfaceIdiom == UIUserInterfaceIdiom.Phone) ? 32 : 44; _landscapeSize = new SizeF(UIScreen.MainScreen.Bounds.Height, UIScreen.MainScreen.Bounds.Width - landscape); _portraitSize = new SizeF(UIScreen.MainScreen.Bounds.Width, UIScreen.MainScreen.Bounds.Height - 44);
Hope this helps,
Once again I sincerely appreciate all of your help on this one. One thing I seem to be stuck on is compensating for a navigation bar at the top. I can't quite seem to figure out what all I need to change. The large photo grid at the top seems to 'jump' one the animation starts, and then the small thumb grid either overlaps the large top grid or has a large space between the two. As always I sincerely appreciate your help!!
No problem.
The project i gave you was built for the iPad only. Just open the Info.plist file and set the Devices drop down to Universal instead of iPad. That should do the trick.
Once again, thanks for all of your help! I can't seem to get the sample working on iPhone. I created a new iPhone project, it crashes on window.MakeKeyAndVisible(). Any ideas what might be going on?
Here is the full sample.
Enjoy!