Defining a custom UINavigationBar through subclassing removes navigation items - uinavigationcontroller

I'm trying to follow the standard approach to creating a custom UINavigationBar in order to change its background image, but have found an issue in the subclassing process. If I subclass UINavigationController, with the intent of overriding the virtual NavigationBar property to provide my own implementation, all navigation items (any left or right buttons, and the title view) disappear. At first I thought it was due to the background being rendered over top of the navigation items, but I can reproduce the problem with a no-op subclass.
It's reproducible with the following code:
[Register("NavigationBar")]
public class NavigationBar : UINavigationBar
{
public NavigationBar () : base()
{
}
public NavigationBar (NSCoder coder) : base(coder)
{
}
public NavigationBar (IntPtr ptr) : base(ptr)
{
}
public NavigationBar (NSObjectFlag t) : base(t)
{
}
public NavigationBar (RectangleF frame) : base(frame)
{
}
}
[Register("NavigationController")]
public class NavigationController : UINavigationController
{
private UINavigationBar _navBar;
public NavigationController () : base()
{
}
public NavigationController (NSCoder coder) : base(coder)
{
}
public NavigationController (IntPtr ptr) : base(ptr)
{
}
public NavigationController (NSObjectFlag t) : base(t)
{
}
public override UINavigationBar NavigationBar
{
get
{
if(_navBar == null)
{
return base.NavigationBar;
}
return _navBar;
}
}
public void SetNavigationBar(UINavigationBar navigationBar)
{
_navBar = (UINavigationBar)navigationBar;
}
}
Now, all you need to do to lose your navigation items is to use the custom classes instead of the default ones:
var navigationBar = new NavigationBar();
navigationBar.BarStyle = UIBarStyle.Black;
navigationBar.TintColor = HeaderColor;
var navigationController = new NavigationController();
navigationController.SetNavigationBar(navigationBar);
// ...

Well, your SetNavigationBar() method doesn't pass that down to the native base class and since you don't do any explicit drawing yourself, how is the native drawing code ever supposed to be invoked for your custom NavigationBar class?
In your example code, that NavigationBar is just floating around in space and never gets told to draw.

In order to subclass UINavigationBar, you must define the IntPtr constructor in your derived class and instantiate the UINavigationController using the public UINavigationController(Type navigationBarType, Type toolbarType) constructor. Example:
public class MyNavigationBar: UINavigationBar
{
public MyNavigationBar(IntPtr h) : base(h)
{
}
// Do something.
}
....
var navController = new UINavigationController(typeof(MyNavigationBar), typeof(UIToolbar));
Took me a while to figure it out. More information on this page: http://developer.xamarin.com/guides/ios/platform_features/introduction_to_ios_6/ in section Subclassing UINavigationBar.

Can you create a sample project where you're adding NavigationItems directly to a UINavigationController and then using the sub-classed UINavigationController/UINavigationBar causes these buttons to disappear?
Thanks,
ChrisNTR

After a lot of research and back and forth with Xamarin, the answer to this problem is that you must use an IB stub file that is essentially no-op, but exists to shuttle the desired base type for your navigation elements. There is a working example on my OSS project: http://github.com/danielcrenna/artapp

Related

How could I change the Navigastion's page arrow in Xamarin Forms?

I'm creating an app using xamarin Forms (multiplatform), I'm using a Navigation page, but I want to change the arrow ("<-") to text ("back")
Do you know how could i do it?
Thanks
(I'm going to use it in an Android App, but I'm creating the app using Xamarin forms)
You could use custom renderer to remove the navigation icon and set it with text. But, when you do that, you need to capture the click of the text and simulate the back event.
Create the interface:
public class CustomNavigationPage : NavigationPage
{
public CustomNavigationPage(Page startupPage) : base(startupPage)
{
}
}
The implementation of Android:
[assembly: ExportRenderer(typeof(CustomNavigationPage),
typeof(NavigationPageRenderer_Droid))]
namespace NavigationPageDemo.Droid
{
public class NavigationPageRenderer_Droid : NavigationPageRenderer
{
public Android.Support.V7.Widget.Toolbar toolbar;
public Activity context;
public NavigationPageRenderer_Droid(Context context) : base(context)
{
}
protected override Task<bool> OnPushAsync(Page view, bool animated)
{
var retVal = base.OnPushAsync(view, animated);
context = (Activity)Forms.Context;
toolbar = context.FindViewById<Android.Support.V7.Widget.Toolbar>(Droid.Resource.Id.toolbar);
if (toolbar != null)
{
//if (toolbar.NavigationIcon != null)
//{
//toolbar.NavigationIcon = Android.Support.V7.Content.Res.AppCompatResources.GetDrawable(context, Resource.Drawable.back);
//toolbar.NavigationIcon = null;
toolbar.NavigationIcon = null;
toolbar.Title = "back";
toolbar.SetOnClickListener(new OnClick());
//}
}
return retVal;
}
protected override Task<bool> OnPopViewAsync(Page page, bool animated)
{
return base.OnPopViewAsync(page, animated);
}
}
public class OnClick : Java.Lang.Object, IOnClickListener
{
void IOnClickListener.OnClick(Android.Views.View v)
{
App.Current.MainPage.Navigation.PopAsync();
}
}
In the custom renderer, use the OnClickListener to capture the click on text.
when you are working with xamarin forms it is suggested make use of common components and make least use of custom renderer.
Now for your requirement you want to create custom navigation bar
so here is how you can do it.
Create BaseContent Page
Create a Control Template inside your base page your can follow this link
Inside your control template using a grid view place your label with text binding (Back),also your can place a label in center to show title of page again u can make use of template binding which u would come to know when u go through the link
Now inherit your main page with your basecontentpage page
add your control template inside your main page
turn off your navigation bar of your main page
and you are done, this would give u more power to add more things like image or toolbar in your navbar
also to dynamically handle your back button u can check the count from navigationstack if its 0 u can show Humburger Icon or if its more than 0 u can show your label using IsVisible True/False

Create JavaFX ComboBox with custom Popup

I want to write a ComboBox with a custom Node object inside its Popup (rather than the common ListView). ColorPicker and DatePicker are good examples, which are the other two implementations of ComboBoxBase. I had thought I could easily extend ComboBoxBase, too, but since there is no popupProperty or popupFactory I don't know how to set the content. How else is it meant to be done? Or how ColorPicker and DatePicker do this?
ComboBoxPopupControl which extends ComboBoxBaseSkin contains getPopupContent(). That's the method you are looking for. In your own skin implementation, which extends one of the ComboBoxSkins, you can return the popup content you like (although it's not recommended to use private API)
public class CustomComboBox<T> extends ComboBox<T> {
#Override
protected Skin<?> createDefaultSkin() {
return new CustomComboBoxSkin<>(this);
}
}
public class CustomComboBoxSkin<T> extends ComboBoxPopupControl<T> {
public CustomComboBoxSkin(ComboBox<T> comboBox) {
super(comboBox, new CustomComboBoxBehaviour<>(comboBox));
}
#Override
public Node getPopupContent() {
return new Rectangle(150, 200);
}
// inherited methods ...
}
I used ComtextMenu to replace the commbox's popup like this:
ContextMenu menu = new ContextMenu();
MenuItem item = new MenuItem();
item.setGraphic(new Lable("test"));
menu.getItems.add(item);
commbox.setContextMenu(null);
commbox.setContextMenu(menu );
commbox.getContextMenu().show(comboBox, Side.BOTTOM, 0, 0);
It works fine.

Not being able to change Title in a Caliburn.Micro Conductor View using MahApps MetroWindow

I'm doing like so:
<Controls:MetroWindow x:Class="BS.Expert.Client.App.Views.ShellView"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
ShowTitleBar="True"
Title="My Title">
The thing is that this is at the same time a defined main conductor on the main window with which I control navigation through other windows, so I'm not able to inherit from MetroWindow to at least trying change the title in the ViewModel:
public class ShellViewModel : Conductor<IScreen>.Collection.OneActive, IShell
{
public ShellViewModel()
{
#region mahApps Theme Loading
var theme = ThemeManager.DetectAppStyle(Application.Current);
var appTheme = ThemeManager.GetAppTheme(App.Configuration.Theme);
ThemeManager.ChangeAppStyle(Application.Current, theme.Item2, appTheme);
#endregion
//TODO: Changing Title here is not possible ((MetroWindow)this).Title = "No way";
// Tudo bem na seguinte liƱa
LocalizeDictionary.Instance.Culture = new System.Globalization.CultureInfo("pt-BR");
ShowPageOne();
}
public void ShowPageOne()
{
ActivateItem(new PageOneViewModel());
}
}
How should I change the title?
When using the MVVM pattern you should never try to set anything on the view directly in the view model like this. Instead using data binding to accomplish this.
So you would have a property on your ShellViewModel with something like:
public string MyTitle
{
get { return _myTitle; }
set
{
_myTitle = value;
//Insert your property change code here (not sure of the caliburn micro version)
}
}
and in your window xaml it would be something like:
<Controls:MetroWindow
Title="{Binding MyTitle}"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
...
>

Structuring a MonoTouch.Dialog application

From the examples at Xamarin.com you can build basic M.T. Dialog apps, but how do you build a real life application?
Do you:
1) Create a single DialogViewController and tree every view/RootElement from there or,
2) Create a DialogViewController for every view and use the UINavigationController and push it on as needed?
Depending on your answer, the better response is how? I've built the example task app, so I understand adding elements to a table, click it to go to the 'next' view for editing, but how to click for non-editing? How to click a button, go next view if answer is number 1?
Revised:
There is probably no one right answer, but what I've come up with seems to work for us. Number 2 from above is what was chosen, below is an example of the code as it currently exists. What we did was create a navigation controller in AppDelegate and give access to it throughout the whole application like this:
public partial class AppDelegate : UIApplicationDelegate
{
public UIWindow window { get; private set; }
//< There's a Window property/field which we chose not to bother with
public static AppDelegate Current { get; private set; }
public UINavigationController NavController { get; private set; }
public override bool FinishedLaunching (UIApplication app, NSDictionary options)
{
Current = this;
window = new UIWindow (UIScreen.MainScreen.Bounds);
NavController = new UINavigationController();
// See About Controller below
DialogViewController about = new AboutController();
NavController.PushViewController(about, true);
window.RootViewController = NavController;
window.MakeKeyAndVisible ();
return true;
}
}
Then every Dialog has a structure like this:
public class AboutController : DialogViewController
{
public delegate void D(AboutController dvc);
public event D ViewLoaded = delegate { };
static About about;
public AboutController()
: base(about = new About())
{
Autorotate = true;
about.SetDialogViewController(this);
}
public override void LoadView()
{
base.LoadView();
ViewLoaded(this);
}
}
public class About : RootElement
{
static AboutModel about = AboutVM.About;
public About()
: base(about.Title)
{
string[] message = about.Text.Split(...);
Add(new Section(){
new AboutMessage(message[0]),
new About_Image(about),
new AboutMessage(message[1]),
});
}
internal void SetDialogViewController(AboutController dvc)
{
var next = new UIBarButtonItem(UIBarButtonSystemItem.Play);
dvc.NavigationItem.RightBarButtonItem = next;
dvc.ViewLoaded += new AboutController.D(dvc_ViewLoaded);
next.Clicked += new System.EventHandler(next_Clicked);
}
void next_Clicked(object sender, System.EventArgs e)
{
// Load next controller
AppDelegate.Current.NavController.PushViewController(new IssuesController(), true);
}
void dvc_ViewLoaded(AboutController dvc)
{
// Swipe location: https://gist.github.com/2884348
dvc.View.Swipe(UISwipeGestureRecognizerDirection.Left).Event +=
delegate { next_Clicked(null, null); };
}
}
Create a sub-class of elements as needed:
public class About_Image : Element, IElementSizing
{
static NSString skey = new NSString("About_Image");
AboutModel about;
UIImage image;
public About_Image(AboutModel about)
: base(string.Empty)
{
this.about = about;
FileInfo imageFile = App.LibraryFile(about.Image ?? "filler.png");
if (imageFile.Exists)
{
float size = 240;
image = UIImage.FromFile(imageFile.FullName);
var resizer = new ImageResizer(image);
resizer.Resize(size, size);
image = resizer.ModifiedImage;
}
}
public override UITableViewCell GetCell(UITableView tv)
{
var cell = tv.DequeueReusableCell(skey);
if (cell == null)
{
cell = new UITableViewCell(UITableViewCellStyle.Default, skey)
{
SelectionStyle = UITableViewCellSelectionStyle.None,
Accessory = UITableViewCellAccessory.None,
};
}
if (null != image)
{
cell.ImageView.ContentMode = UIViewContentMode.Center;
cell.ImageView.Image = image;
}
return cell;
}
public float GetHeight(UITableView tableView, NSIndexPath indexPath)
{
float height = 100;
if (null != image)
height = image.Size.Height;
return height;
}
public override void Selected(DialogViewController dvc, UITableView tableView, NSIndexPath indexPath)
{
//base.Selected(dvc, tableView, path);
tableView.DeselectRow(indexPath, true);
}
}
#miquel
The current idea of a workflow is an app that starts with a jpg of the Default.png that fades into the first view, with a flow control button(s) that would move to the main app. This view, which I had working previous to M.T.D. (MonoTouch.Dialog), which is a table of text rows with an image. When each row is clicked, it moves to another view that has the row/text in more detail.
The app also supports in-app-purchasing, so if the client wishes to purchase more of the product, then switch to another view to transact the purchase(s). This part was the main reason for switching to M.T.D., as I thought M.T.D. would be perfect for it.
Lastly there would be a settings view to re-enable purchases, etc.
PS How does one know when the app is un-minimized? We would like to show the fade in image again.
I have been asking myself the same questions. I've used the Funq Dependency Injection framework and I create a new DialogViewController for each view. It's effectively the same approach I've used previously developing ASP.NET MVC applications and means I can keep the controller logic nicely separated. I subclass DialogViewController for each view which allows me to pass in to the controller any application data required for that particular controller. I'm not sure if this is the recommended approach but so far it's working for me.
I too have looked at the TweetStation application and I find it a useful reference but the associated documentation specifically says that it isn't trying to be an example of how to structure a MonoTouch application.
I use option 2 that you stated as well, it works pretty nicely as you're able to edit the toolbar options on a per-root-view basis and such.
Option 2 is more feasible, as it also gives you more control on each DialogViewController. It can also helps if you want to conditionally load the view.

skinning multiple UI components

Let's say you have a large number (N) of spark buttons in your app. Let's also say that your buttons all have very similar skins (size, various effects, etc) - the only difference being the specific png that they use as their BitmapImage.
Do you end up with N skin files, all differing by 1 line? Or is there a smarter way to do this while not adding a lot of code when you create the buttons in MXML (in fact, ideally, none).
Creating a custom Button with a icon SkinPart typed as a BitmapImage will allow you to use the same Skin for all buttons :
<YourCustomButton icon="#Embed('yourIconFile.png') />
CustomButton.as
public class CustomButton extends Button
{
[SkinPart(required="false")]
public var iconContainer:BitmapImage;
private var _icon:Object;
public function CustomButton()
{
super();
}
override protected function partAdded(partName:String, instance:Object):void
{
super.partAdded(partName, instance);
if (instance == iconContainer && _icon)
iconContainer.source = _icon;
}
public function get icon():Object
{
return _icon;
}
public function set icon(value:Object):void
{
if (iconContainer)
iconContainer.source = value;
_icon = value;
}
}

Resources