Are there any existing extensions or is it fairly straight forward to add styles to RootElement in monotouch.dialog in a similar way you can style StyledStringElement.
Basically I would like to add an image, or badge to RootElement to indicate what sort of details would be in the child view, eg add Success, Warning, Error, Info type image - so the users may only be interested in clicking through to details that are not fully successful.
So ideally I would be able to code something like this...
UIImage imageSuccess = ImageLoader.DefaultRequestImage (new Uri ("file://" + Path.GetFullPath ("Images/Success.png")), null);
var root = new RootElement("Root") {
Image = imageSuccess,
Accessory = UITableViewCellAccessory.DetailDisclosureButton,
new Section (){
new BooleanElement ("Airplane Mode", false),
new RootElement ("Notifications") {
new Section (null, "Turn off Notifications")
{
new BooleanElement ("Notifications", false)
}
}}
};
Thanks for any help or pointers.
This question is old, but if anyone else comes across it you can subclass the RootElement class to add an icon. My code is as follows:
public class ImageRootElement : RootElement
{
private UIImage _image;
public override MonoTouch.UIKit.UITableViewCell GetCell (MonoTouch.UIKit.UITableView tv)
{
var baseCell = base.GetCell (tv);
var cell = new UITableViewCell (UITableViewCellStyle.Subtitle, "cellId");
cell.TextLabel.Text = Caption;
cell.Accessory = baseCell.Accessory;
cell.ImageView.Image = _image;
return cell;
}
public ImageRootElement (string caption, UIImage image) : base(caption)
{
_image = image;
}
}
Since MT.Dialog is open source, you can modify the RootElement properties and constructors however you like. I don't think there's anything that does what you want right out of the box, so you'll have to extend Dialog to meet your needs.
As an aside, it sounds like you MAY be misunderstanding the intent of RootElement. RootElement is simply the main container that all of your sections and elements are in. It doesn't seem to make sense to have a disclosure indicator or badge on a RootElement, simply because that is not the intent of RootElement. It's possible that I could just be misunderstanding you. If, however, you want to do custom styling with badges, etc, on an element, you can create custom element classes that inherit from OwnerDrawnElement, overriding it's two abstract methods. However, read Miguel's answer to a similar question here before doing so.
Related
I am using MonoTouch.Dialog in my app; however, the form in question is implemented using a UIViewController to which which I added a TableView (so I can also add a UIToolbar).
I love the ImageLoader that comes in MonoTouch.Dialog.Utilities and am trying to use it in the GetCell() method of the DataSource for the TableView to render an image from a URL.
var callback = new ImageLoaderCallback(controller, cell.ImageView, indexPath); // ImageLoaderCallback implements IImageUpdated
cell.ImageView.Image = ImageLoader.DefaultRequestImage(new Uri(picFV.Value), callback);
The problem is that until the URL is downloaded, the space for the ImageView is collapsed (so that the text to the right of the image is actually anchored on the left of the table).
What I'd like to do is display a temporary local image which has the same dimensions as the downloaded image, so that when the ImageLoader is done retrieving and rendering the image, the user experience isn't as jarring.
I tried to do the following in the GetCell() call... cell.ImageView.Image is set to some other image (not shown below), and then I get a reference to what comes back from ImageLoader.DefaultRequestImage.
var image = ImageLoader.DefaultRequestImage(new Uri(picFV.Value), callback);
callback.Image = image;
the last line stuffs the image reference returned by ImageLoader into the callback's state, and the callback will replace the cell's ImageView.Image when the ImageLoader is done (see below):
// callback class for the MonoTouch.Dialog image loader utility
private class ImageLoaderCallback : IImageUpdated
{
private ListViewController controller;
private UIImageView imageView;
private NSIndexPath indexPath;
public ImageLoaderCallback(ListViewController c, UIImageView view, NSIndexPath path)
{
controller = c;
imageView = view;
indexPath = path;
}
public UIImage Image { get; set; }
void IImageUpdated.UpdatedImage(Uri uri)
{
if (uri == null)
return;
if (Image != null)
imageView.Image = Image;
// refresh the display for the row of the image that just got updated
controller.TableView.ReloadRows(new NSIndexPath [] { indexPath }, UITableViewRowAnimation.None);
}
}
However, this doesn't work because it appears that the ImageLoader needs to be "pulled" by the TableView when it tries to render its ImageView (i.e. the ImageLoader callback never gets invoked because no one is pulling on the URL).
How do I accomplish this scenario?
Thanks!
I know this is an old question now, but I came across it when searching for the same thing and have seen the following blog post which states how to accomplish this. I haven't yet tried it out but hopefully it might help you or anyone else coming across this in the future: http://yusinto.blogspot.co.uk/2012/05/background-image-downloading-with.html
I've created a new class that inherits from TTDefaultStyleSheet.
public class BlackStyleSheet : TTDefaultStyleSheet
{
public BlackStyleSheet() : base()
{
Console.WriteLine("BlackStyleSheet created.");
}
public override UIColor TabBarTintColor
{
get
{
Console.WriteLine("BlackStyleSheet.TabBarTintColor returned.");
return UIColor.Black;
}
}
[Export ("tabTintColor")]
public override UIColor TabTintColor
{
get
{
Console.WriteLine("BlackStyleSheet.TabTintColor returned.");
return UIColor.Black;
}
}
}
And I set this custom style sheet as the default in my FinishedLaunching method.
public override void FinishedLaunching (UIApplication application)
{
Three20.TTStyleSheet.GlobalStyleSheet = new BlackStyleSheet();
Three20.TTDefaultStyleSheet.GlobalStyleSheet = new BlackStyleSheet();
Console.WriteLine("Three20 style sheet set.");
}
Then, I create the actual TTTabStrip and TTTabItem elements within my own custom UIViewController's ViewDidLoad() method. The TTTabItem objects are declared at the class level instead of the method level.
tab1 = new TTTabItem("1");
tab2 = new TTTabItem("2");
tab3 = new TTTabItem("3");
TabStrip = new TTTabStrip();
TabStrip.Frame = new RectangleF(0,0,View.Frame.Width, 44);
TabStrip.TabItems = NSArray.FromNSObjects(tab1,tab2,tab3);
TabStrip.SelectedTabIndex = 0;
View.AddSubview(TabStrip);
When the TTDefaultStyleSheet.GlobalStyleSheet property is set to the new custom stylesheet, the app crashes. When this property setting is removed, the app runs perfectly, but the tab strip remains grey.
In all forums I've read (none seem to be MonoTouch-specific), they all indicate that creating your own stylesheet, then setting it to the global stylesheet is the way to go. But this doesn't seem to work for me with MonoTouch.
Does anyone have any ideas?
Thank you,
John K.
I tried your example in XCode with Objective-C and I can confirm that this this approach does work. I also tried for myself with MonoTouch and saw the same results you report.
I have found several problems in the Three20 binding code in the past that seem to cause aborts like this. You can try and fix up the existing binding code or create only the bindings you need from Three20 manually.
http://docs.xamarin.com/ios/advanced_topics/binding_objective-c_types
Is there a proper way to use Monotouch.Dialog (iOs) and call a UIViewController when a user clicks on a RootElement? I'm building a page of data based on an array and when clicked I'd like to open this custom view and pass in the array element.. Something like this (doesn't work). Any help is appreciated.
RootElement CreateMenuCategory(JToken menucat) {
RootElement MenuCategory = new RootElement(menucat["menucategoryname"].Value<String>());
RootElement root_element;
Section section = new Section();
foreach(JToken menuitem in menucat["menuitems"]) {
root_element = new RootElement(menuitem["menuitemname"].Value<String>(), (RootElement e) => {
return _menuitemView.LoadMenuItem(menuitem); // menuitem on view is always the same
});
section.Add (root_element);
}
MenuCategory.Add (section);
return MenuCategory;
}
That code doesn't work as the delegate always passes in the same element every time.
This is merely a side effect of how the "menuitem" variable is captured by the lambda function.
Change your foreach loop to look like this instead:
foreach (JToken iteratorMenuitem in menucat ["menuitems"]){
var menuitem = iteratorMenuitem;
//.. the rest
I have a RootElement with Sections. One section has RadioElements. How do I change the BackgroundView on the sub section?
Something like this doesn't work because the sub view isn't yet created.:
rootGroups = new RootElement ("Ideas", rdoGroup) {
new RootElement ("Baha'i") {
new Section (){
new RadioElement ("Peace"),
new RadioElement ("Unity"),
new RadioElement ("Science")
}
}
};
???
rootGroups.TableView.BackgroundColor = ...;
If you want to create two different view with two different background you must create another dialogViewController for the second root, that way you will be able to change the background.
To do this, instead of using a regular RootElement constructor, use the RootElement constructor that takes a delegate method that can create the UIViewController on demand.
I am new to Monotouch and attempting to understand how some of the basics hang together. Hopefully someone out there will be able to assist.
I've created a test project in MonoDevelop based on the Multi-Screened Apps tutorial on the Xamarin site and have extended it to include a tableView. I am having issues with referencing the Navigation Controller in a view that I need to push a detail view onto to display the detail of an item tapped in the table via an accessory button. I know some of the coding is scrappy, just been trying to get it working at this stage rather than the clarity in the code! (I'm using the latest versions of all Mono tools/libraries etc and XCode 4 on Lion). Starting at the beginning here's the code in FinishedLaunching in AppDelegate.
window = new UIWindow (UIScreen.MainScreen.Bounds);
this.rootNavigationController = new UINavigationController();
// Create a new homescreen
HomeScreen homeScreen = new HomeScreen();
// Add the homescreen to the root navigation controller
this.rootNavigationController.PushViewController(homeScreen, false);
// Set the root view controller on the window - the navigation controller
// will handle the rest.
this.window.RootViewController = this.rootNavigationController;
// make the window visible
this.window.MakeKeyAndVisible ();
homeScreen just contains a button which loads a new view containing a table view (OrderList). Here's the button event handler.
void HandleOrdersButtonhandleTouchUpInside (object sender, EventArgs e)
{
if (orderListScreen == null)
orderListScreen = new OrderList();
NavigationController.PushViewController(orderListScreen, true);
}
This all works fine. I've got some dummy data that loads into the table view, which also works fine. OrderData is a simple class for testing which just contains a couple of properties. I've added an AccessoryButton to the cells and am trying to load a detail view when this is tapped. Here's the code that does this - comment in code where issue is! (I'd previously tested the AccessoryButtonTapped functionilty was working by just displaying an alert).
public override void AccessoryButtonTapped (UITableView tableView, NSIndexPath indexPath)
{
var dataSource = (OrdersTableViewDataSource)tableView.DataSource;
if (detailScreen == null)
detailScreen = new OrderDetailScreen();
OrderData theOrder = dataSource.OrdersData[indexPath.Row];
detailScreen.currentOrder = theOrder;
// Cant get a reference to NavigationController here to push the detail view!
// this.NavigationController is not available
this.NavigationController.PushViewController(detailScreen, true);
}
My understanding of NavigationControllers from what I've read so far is that this reference should be available through all views that originate from the root ViewController/NavigationController without the need to pass the reference from AppDelegate through the various view constructors?
Can anyone tell me what I might be missing here?
Thanks in advance.
** An update after reviewing Jason's comment: (Please let me know if this is the incorrect way to post updates)
So, I tried the following:
I saved a reference to the NavigationController in the constructor for the ViewController that contains the table view as follows:
public partial class OrderList : UIViewController
{
UINavigationController navController;
public OrderList () : base ("OrderList", null)
{
this.Title = "Orders";
navController = this.NavigationController;
}
Then passed that into the TableViewDelegate, where the AccessoryButtonTapped is handled, in the ViewDidLoad method.
public override void ViewDidLoad ()
{
orderTableView.DataSource = new OrdersTableViewDataSource();
orderTableView.Delegate = new OrdersTableViewDelegate(navController);
base.ViewDidLoad ();
}
Then referenced that in the TableViewDelegate:
public class OrdersTableViewDelegate : UITableViewDelegate
{
UINavigationController navController;
public OrdersTableViewDelegate(UINavigationController controller)
{
navController = controller;
}
// Rest of class definition
}
Then the reference to the NavigationController using navController compiles with the code as previously described using the following in the AccessoryButtonTapped method:
navController.PushViewController(detailScreen, true);
When I run this and tap on the AccessoryButton I get a null reference exception on navController. The reference to this.NavigationController in the ViewController constructor is null. Am I doing something in the wrong place or sequence?
Cheers
The NavigationController property is on your table's view controller. If you are trying to reference it from your table's datasource, you need to pass a reference to the controller when you create the datasource.