I have Xamarin.Forms project.
I have MasterDetailPage inside NavigationPage.
I set icon property of the MasterDetailPage so that icon is supposed to be set as the top left position on the navigation bar. But it does not work.
public partial class App : Application
{
public App()
{
InitializeComponent();
var masterDetailpage = new MasterDetailPage {
Icon = "menuIcon.png",
Master = new Page { Title = "Sample"},
Detail = new Page()
};
MainPage = new NavigationPage(masterDetailpage);
}
}
This never works. If I put NavigationPage as MasterDetailPage's Detail property, and set icon on the Master. It works.
But it is very important to have MasterDetailPage inside NavigationPage and not vise versa.
The solution is to set the Icon property of the Page being used for the Master.
var masterDetailpage = new MasterDetailPage {
Master = new Page { Title = "Sample", Icon = "menuIcon.png"},
Detail = new NavigationPage(new Page())
};
This assumes you have a png in your iOS project under the Resources folder named menuIcon.png that is the hamburger icon you want. You will also need to use a NavigationPage around the Detail because the Icon is shown in the Navigation Bar area.
The Unicode char can be used to show the "hamburger" menu icon.
You may specify Title="☰" for the master page ContentPage-top level tag.
If you use an icon, you may draw a better icon than char. But using Unicode char is simple enough if this is acceptable for you.
It works for iOS and doesn't break Android.
Links:
Trigram for heaven (U+2630)
The Unicode character for menu icons ("navicons") ☰.
If you wrap the master page in a navigation page, put the icon on the navigation page.
This works for me:
public partial class App : Application
{
public App()
{
InitializeComponent();
var masterDetailpage = new MasterDetailPage {
Icon = "menuIcon.png",
Master = new Page { Title = "Sample"},
Detail = new Page()
};
MainPage = new NavigationPage(masterDetailpage) { Title = "Sample", Icon = "menuIcon.png" };
}
}
In case it helps someone You can set the title of the menu right before setting your MainPage as I have done in the sample code below:
var master = new MasterPage();
master.Master.Icon = "my_icon.png";
master.Master.Title = AppResources.Menu; // To get the value from resource files
MainPage = master;
MasterPage inherits from MasterDetailsPage And I was unable to directly set the value from constructor of MasterPage because of Xamarin's weird errors.
I think you have to add to your AddDelegate a common fix
namespace myApp.iOS
{
[Register("AppDelegate")]
public partial class AppDelegate :
global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
UIWindow window;
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
global::Xamarin.Forms.Forms.Init();
// fix for iOS
window = new UIWindow(UIScreen.MainScreen.Bounds);
window.RootViewController = App.GetMainPage().CreateViewController();
window.MakeKeyAndVisible();
LoadApplication(new App());
return base.FinishedLaunching(app, options);
}
}
}
In your PCL project in App.xaml.cs you have to add
public App()
{
// The root page of your application
MainPage = GetMainPage();
}
public static Page GetMainPage()
{
return new RootPage();
}
Related
I am instantiating a DialogViewController within a MvvmCross View like this
var myDialog = new MyDialogViewController();
var navController = new UINavigationController();
controller.NavigationBar.TintColor = UIColor.Black;
controller.PushViewController(myDialog, false);
Add(controller.View);
And this is how the MyDialogViewController looks like:
public class MyDialogViewController : DialogViewController
{
public MyDialogViewController()
: base(UITableViewStyle.Grouped, new RootElement("MyRoot"), true)
{
var root = new RootElement("MyRoot") {
new Section
{
new HtmlElement("MyWebsite", https://www.mywebsite.com")
}
};
Root.Add(root);
}
}
The dialog appears fine with the NavigationBar but if I select the Html element MyWebsite the Webview is displayed but without the NavigationBar and I am not able to navigate back.
The same thing occurs for elements that require to navigate to a new window, the navigationbar is not shown.
Any idea how to make the NavigationBar show after navigating to the WebView?
This worked for me:
var settings = new SettingsDialogViewController((SettingsViewModel)ViewModel, new RootElement("Settings"));
var window = UIApplication.SharedApplication.KeyWindow;
navigationController = window.RootViewController.ChildViewControllers[1].NavigationController;
navigationController.PushViewController(settings, true);
navigationController.NavigationBarHidden = false;
I am newbie to Xamarin.Forms and stuck with a situation where I want to open up a popup box with my control details [e.g. View Employee Details] on click of parent page.
How can I open custom dialog box / popup using Xamarin.Forms?
Any example code will be appreciated?
Thanks in advance!
If you still want to have your popup's code in its own Page you can set up some custom renderers along the following logic.
1. A ModalPage & corresponding renderer
public class ModalPage : ContentPage { }
public class ModalPageRenderer : PageRenderer {
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
this.View.BackgroundColor = UIColor.Clear;
this.ModalPresentationStyle = UIModalPresentationStyle.OverCurrentContext;
}
public override void ViewDidLayoutSubviews()
{
base.ViewDidLayoutSubviews();
SetElementSize (new Size (View.Bounds.Width, View.Bounds.Height));
}
}
2. HostPage
public class ModalHostPage : ContentPage, IModalHost
{
#region IModalHost implementation
public Task DisplayPageModal(Page page)
{
var displayEvent = DisplayPageModalRequested;
Task completion = null;
if (displayEvent != null)
{
var eventArgs = new DisplayPageModalRequestedEventArgs(page);
displayEvent(this, eventArgs);
completion = eventArgs.DisplayingPageTask;
}
// If there is no task, just create a new completed one
return completion ?? Task.FromResult<object>(null);
}
#endregion
public event EventHandler<DisplayPageModalRequestedEventArgs> DisplayPageModalRequested;
public sealed class DisplayPageModalRequestedEventArgs : EventArgs
{
public Task DisplayingPageTask { get; set;}
public Page PageToDisplay { get; }
public DisplayPageModalRequestedEventArgs(Page modalPage)
{
PageToDisplay = modalPage;
}
}
}
3. HostPage renderer
public class ModalHostPageRenderer: PageRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
if(e.OldElement as ModalHostPage != null)
{
var hostPage = (ModalHostPage)e.OldElement;
hostPage.DisplayPageModalRequested -= OnDisplayPageModalRequested;
}
if (e.NewElement as ModalHostPage != null)
{
var hostPage = (ModalHostPage)e.NewElement;
hostPage.DisplayPageModalRequested += OnDisplayPageModalRequested;
}
}
void OnDisplayPageModalRequested(object sender, ModalHostPage.DisplayPageModalRequestedEventArgs e)
{
e.PageToDisplay.Parent = this.Element;
var renderer = RendererFactory.GetRenderer (e.PageToDisplay);
e.DisplayingPageTask = this.PresentViewControllerAsync(renderer.ViewController, true);
}
}
Then it is as simple as calling
await ModalHost.DisplayPageModal(new PopUpPage());
from your host page or in this particular case from the ViewModel behind.
What Pete said about PushModalAsync / PopModalAsync still remains valid for this solution too (which in my opinion is not a disadvantage), but your popup would appear with transparent background.
The main advantage of this approach, in my opinion, is that you can have your popup XAML/code definition separate from the host page and reuse it on any other page where you wish to show that popup.
The general purpose of what you are trying to achieve can be accomplished by using the PushModalAsync and PopModalAsync methods of Xamarin.Forms Navigation object.
The chances are that this is good enough for what you are needing - However - this isn't truely modal. I will explain after a small code snippet:-
StackLayout objStackLayout = new StackLayout()
{
};
//
Button cmdButton_LaunchModalPage = new Button();
cmdButton_LaunchModalPage.Text = "Launch Modal Window";
objStackLayout.Children.Add(cmdButton_LaunchModalPage);
//
cmdButton_LaunchModalPage.Clicked += (async (o2, e2) =>
{
ContentPage objModalPage = new ContentPage();
objModalPage.Content = await CreatePageContent_Page2();
//
await Navigation.PushModalAsync(objModalPage);
//
// Code will get executed immediately here before the page is dismissed above.
});
//
return objStackLayout;
private async Task<StackLayout> CreatePageContent_Page2()
{
StackLayout objStackLayout = new StackLayout()
{
};
//
Button cmdButton_CloseModalPage = new Button();
cmdButton_CloseModalPage.Text = "Close";
objStackLayout.Children.Add(cmdButton_CloseModalPage);
//
cmdButton_CloseModalPage.Clicked += ((o2, e2) =>
{
this.Navigation.PopModalAsync();
});
//
return objStackLayout;
}
The problem with the above is that the
await Navigation.PushModalAsync(objModalPage);
will immediately return after the animation.
Although you can't interact with the previous page, as we are displaying a new NavigationPage with a Close button shown - the parent Navigation Page is still executing behind the scenes in parallel.
So if you had any timers or anything executing these still would get called unless you stopped those.
You could also use the TaskCompletionSource approach as outlined in the following post also How can I await modal form dismissal using Xamarin.Forms?.
Note - that although you can now await the 2nd page displaying and then when that page is dismissed allowing code execution to continue on the next line - this is still not truely a modal form. Again timers or anything executing still will get called on the parent page.
Update 1:-
To have the content appear over the top of existing content then simply include it on the current page, however make this section of content invisible until you need it.
If you use an outer container such like a Grid that supports multiple child controls in the same cell, then you will be able to achieve what you want.
You will also want to use something like a filled Box with transparency that will cover the entire page also, to control the visible, see through section, that surrounds your inner content section.
I followed above approach and found it impossible to run on iOS 7.
I found this library BTProgressHUD which you can modify and use.
I Use its methods by Dependency service.
Actual library for popups.
https://github.com/nicwise/BTProgressHUD
Following example uses BTProgressHUD library internally.
https://github.com/xximjasonxx/ScorePredictForms
I am using MonoTouch.Dialog to create a settings-like page. The linq below creates a set of RootElements, each with one section that has a set of RadioEventElements (a subclass of RadioElement that I created in order to add an OnSelected event).
// initialize other phone settings by creating a radio element list for each phone setting
var elements = (from ps in PhoneSettings.Settings.Keys select (Element) new RootElement(ps, new RadioGroup(null, 0))).ToList();
// loop through the root elements we just created and create their substructure
foreach (RootElement rootElement in elements)
{
rootElement.Add(new Section()
{
(from val in PhoneSettings.Settings[rootElement.Caption].Values select (Element) new RadioEventElement(val.Name)).ToList()
});
// ...
}
One of the settings I implement is a "Theme" - which currently is simply a background color for the various screens in the app. I can style every one of the pages correctly by setting the TableView.BackgroundColor property to the desired color... Except for new DialogViewControllers that are automatically created and pushed by the parent DialogViewController when it navigates into a radio group.
Is there any way to style (or at least set the background color) of this child DialogViewController?
I need to use the assembly browser more before asking easy questions :-)
Fortunately the RootElement has a virtual method called PrepareDialogViewController for what appears to be exactly this purpose. All I had to do is create a simple subclass of RootElement and override this method to get my desired behavior.
public class ThemedRootElement : RootElement
{
public ThemedRootElement(string caption) : base (caption)
{
}
public ThemedRootElement(string caption, Func<RootElement, UIViewController> createOnSelected) : base (caption, createOnSelected)
{
}
public ThemedRootElement(string caption, int section, int element) : base (caption, section, element)
{
}
public ThemedRootElement(string caption, Group group) : base (caption, group)
{
}
protected override void PrepareDialogViewController(UIViewController dvc)
{
dvc.View.BackgroundColor = UIColorHelper.FromString(App.ViewModel.Theme.PageBackground);
base.PrepareDialogViewController(dvc);
}
}
Hopefully this helps save someone out there a litte time...
In order to get this to work, I had to override the MakeViewController method and cast the UIViewController that it normally returns to a UITableViewController, then make my edits.
protected override UIViewController MakeViewController()
{
var vc = (UITableViewController) base.MakeViewController();
vc.TableView.BackgroundView = null;
vc.View.BackgroundColor = UIColor.Red; //or whatever color you like
return vc;
}
I am using the Application Layout control and have tabs in the TitleBar. I want to change the style of the tab if it is selected. I am currently doing it by comparing the value of the tab to a sessionScope variable I am setting when the tab is clicked.
I saw something (though I can't find it now) about using the Selected property of the Basic Node I am using for the tab. How would I access that in SSJS so that I can do something like this?
if(thisnode.selected) {
return "lotusTabs liActive";
} else {
return "lotusTabs li";
}
Thanks.
You can also access the tabs programmatically:
var layout = getComponent("layoutId");
var selectedTab = null;
var tabs = layout.getConfiguration().getTitleBarTabs();
for (var tab in tabs) {
if (tab.getSelected()) {
selectedTab = tab;
}
}
The following CSS rule will target the selected title tab:
div.lotusTitleBar ul.lotusTabs li.lotusSelected {
// your code here
}
I created for BlackberryMaps a own menu item with help of "MenuItem" and invoke Blackberry Maps. After using this Item the current location (MapView) should be send back to my Application. This works fine.
The problem is I found no solution for closing the app after using the menu Item. Is there a possibility to close Blackberry Maps? Or set my own App to foreground?
private static class MapMenuItem extends ApplicationMenuItem {
//creates a new MenuItem for Blackberry Maps and defines the action which should //happen after a click on the MenuItem
CustomDialog_GPS customDialogGps;
StartScreen startScreen;
MapMenuItem(StartScreen startScreen, CustomDialog_GPS customDialogGps) {
super(20);
this.startScreen = startScreen;
this.customDialogGps = customDialogGps;
}
public String toString() {
//creates the name for the navigation Menu
String itemName = ""+_res.getString(CUSTOMDIALOG_GPS_USE_AS_NEW_LOCATION);
return itemName;
}
public Object run(Object context) {
//defines what should happen after a click on the menu
//get the location at which the cursor is pointing at.
MapView mv = (MapView)context;
if (mv != null) {
//opens a method inside of CustomDialogGPS which handles the latitude and longitude
customDialogGps.saveAdjustedPosition(mv);
//TODO pop Screen
//Screen screen = (Screen)UiApplication.getUiApplication().getActiveScreen();
}
else {
throw new IllegalStateException("Context is null, expected a MapView instance");
}
return null;
}
}
Unfortunately you can't close another app programmatically (Actually you can if you know where is menu item to close for example) but you can foreground your app UiApplication.getApplication().requestForeground(). What is probably appropriate solution for you.
Instead of passing the user to the Maps application, which is outside your app and you have no control over it, create your own screen with a MapField in it. Using your own screen and perhaps extending the MapField class to override functions if needed, allows you to go back to the previous screen once the user selects a location.