I am working with Xamarin Forms and I am using MasterDetailPage and NavigationPage and everything is working. Now, I need to configure the page button (three bars on the left) to be visible on all views.
I have a MasterDetailPage with a menu and the user clicks a menu its navigate to other pages. First page (homepage) look like that:
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<home:HomePage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
When the user clicks in menu inside masterdetailpage or other menus outside masterdetailpage it performs a navigation:
The three bars page button is visible only on the first view, when I navigate to others views, that button disapears.
But, I want something like that:
The page back button showns automatically when i navigate to other pages and it's fine.
How to let the three bars page button visible to all views and maintain the back page button?
I am using the following code to navigate between views:
await Navigation.PushAsync(MyNewPage());
Thanks!
Your master detail page has to handle the navigation to the detail pages for it to work correctly.
Connect the menu listview:
ListView.ItemSelected += OnItemSelected;
In the OnItemSelected event.
{MasterDetailPage}.Detail.Navigation.PushAsync(new MyNewPage());
Here is an example of master detail navigation:
async void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
var item = e.SelectedItem as MasterPageItem;
if (item != null)
{
NavigationPage nextDetailPage = null;
await Task.Run(() =>
{
nextDetailPage = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));
});
Detail = nextDetailPage;
masterPage.ListView.SelectedItem = null;
IsPresented = false;
}
}
This is not possible, as you can't have two buttons on the left side. And as many applications I have seen, no app supports this kind of UI. Unless you write custom navigation bar and put it on top of every page.
You can create a stack of detail pages in your main MasterDetailPage. So whenever you want to push a new page, instead you can just set page as Detail and put old Detail in your own stack.
For Android you can wrap back button event to pop page from stack, but on iOS there is no back button, so you will have to create some sort of back button in detail page's toolbar.
I think that you will have to write a Custom Renderer to achieve what you want.
But if you want only to keep the hamburger button, without the back button, you can navigate to your pages using this code:
Detail = new NavigationPage(new MyNewPage());
Related
Does anyone know how a navigation drawer similar to the one in the Sonos app can be implemented? I have checked both Android and iOS versions of the app and see that the navigation drawer has been implemented in the same way for both platforms.
The two key things that I like and want to implement are:
the slide out drawer is below the navigation bar. When it slides out, the navigation bar is still visible
it appears as if it is the drawer that slides out, rather than the detail view moving to the right. I've noticed that the default master detail page slides out in a different way and it's not what we want.
Have a look at the images below so see I mean.
thanks
Although not technically a good practice, if you put a MasterDetailPage into a NavigationPage, it will slide out like in the above pictures. Here's how you do that:
In the App.cs constructor or your app's OnStart() method:
MainPage = new NavigationPage(new MyMasterDetailPage()) {
Title = "Your Title"
};
Create a new MasterDetailPage called MyMasterDetailPage.
In the constructor, add the following code:
Detail = new HomePage();
Master = new MenuPage()
{
Title = "Menu"
};
You then need to create a ContentPage for both HomePage and MenuPage.
One issue that you will run into if you use this method, is that if you don't call MyMasterDetailPage as the first page upon opening the app, the three horizontal bars on the NavigationBar won't appear, which will make it hard for users to tell there is a drawer. So if you need users to go to a login page or another page before your MasterDetailPage, you may want to find another implementation.
I have a form panel and i have added a tabpanel to it. Tab Panel has 2 tabs. When the form panel is loaded the first tab's grid loads fine but when i click on the second tab i do see the grids but data is not loaded by default. But it does refresh with data When i click on the grid header.
Below is the piece of code that i use to load the grids from controllers.
var store = this.getDeficiencyDeficiencyStoreStore();
store.on('load',function() {
var accountDeliverySettingsGrid = Ext.getCmp('accountDeliverySettingsGrid');
accountDeliverySettingsGrid.reconfigure(model.allQuartesListStore);
accountDeliverySettingsGrid.getView().refresh();
})
Any help/suggestions/advice is appreciated.
I finally figured this out. I had to use event: activate to explicitly invoke refresh method to get the grids loaded. Below is the piece of code.
listeners: { activate: function(tab)
{ //alert("Put Your Logic Here");
Ext.getCmp('accountDeliverySettingsGrid').getView().refresh();
Ext.getCmp('compositeRelationship').getView().refresh();
}
I am developing a class library in Windows 8 (C#), in which i require to show an UI to get user input. How to create UI inside class library and invoking it. Please help.
Now I am invoking the Popup from class library to show the required UI, but I found the popup is opening from library but its hiding below the other UI element (Webview in my case).Please refer the code snippet below.
Class library code
namespace PopUpLibrary
{
public class PopupDialog
{
public void ShowPopup()
{
Popup popup = new Popup();
popup.HorizontalAlignment = HorizontalAlignment.Center;
popup.VerticalAlignment = VerticalAlignment.Center;
popup.Height = 500;
popup.Width = 700;
Button button = new Button();
button.Content = "adfadfad";
button.Width = 200;
button.Height = 100;
popup.Child = button;
popup.IsOpen = true;
}
}
}
Application code:
MainPage.xaml
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<WebView Name="webview" ></WebView>
</Grid>
MainPage.xaml.cs
public MainPage()
{
this.InitializeComponent();
webview.Navigate(new Uri("http://www.google.com"));
PopupDialog popupdialog = new PopupDialog();
popupdialog.ShowPopup();
}
You cannot show other controls on top of the WebView. However, you can work around this by temporarily hiding the WebView and displaying a WebViewBrush.
From the WebView Documentation:
WebView has the characteristic that other UI regions such as controls cannot be rendered on top of the WebView. This is because of how window regions are handled internally, particularly how input events are processed and how the screen draws. If you want to render HTML content and also place other UI elements on top of that HTML content, you should use WebViewBrush as the render area. The WebView still provides the HTML source information, and you reference that WebView through the SourceName property. WebViewBrush does not have this overlay limitation.
If you want to display an interactive WebView that only occasionally has overlapping content (such as a drop-down list or app bar), you can temporarily hide the WebView control when necessary, replacing it with an element using a WebViewBrush fill. Then, when the overlapping content is no longer present, you can display the original WebView again. For more info, see the WebView control sample.
What kind of input? Yes/No or string input?
For Yes/No you could use the standard MessageDialog. If you need to receive custom input, such as text, you could use the CustomDialog control, available in the Callisto toolkit.
How can I override the functionality of browser's back button? I have navigation view in page and I want to synchronize the browser back button and navigation view's back button. I can override navigation button's functionality but I don't know how to do the same thing for browser back.
Any help will be appreciated.
You have to use routes, this tutorial will show you how: http://railsdevtricksofthetrade.blogspot.com/2012/04/sencha-touch-2-routes-and-back-button.html?m=1
I managed to override the back button of the nav view with the following code
In your controller, create a new ref:
backToNav: 'myNavXtypeName button[text=Back]'
In the same controller, link the ref to a control:
backToNav: {
tap: 'backToNav'
}
Finally create the controller method that implements the navigation view's pop functionality.
backToNav: function() {
Ext.getCmp('myNavXtypeName').pop()
}
Done.
Read more about refs and controls here
My application has a WinJS AppBar control at the bottom of the screen. I use .showOnlyCommands(buttonsToShowArray) to show and hide buttons on ListView itemSelectionChanged event.
The problem I have right now is that when every I call .showOnlyCommands, the buttons to be hidden (or you may say "replaced") are going to flash on the top of the screen.
I tried to use the Microsoft sample app, this doesn't happen. I tried to use .showCommands + .hideCommands method, it is the same behavior. Note that this didn't happen before the Release Preview version of Win8.
I have no idea what is going on. Any idea?
EDIT:
I did further investigation, the problem happens on hideCommands. Say I have 3 buttons displayed on the appbar. I call hideCommands to hide all 3 buttons. The icon of the 3 buttons would disappear on the appbar, then pile up at the top-left corner of the screen and then disappear. (i.e. there would be a flash of 3 piled up buttons at the corner of the screen).
You may be invoking showOnlyCommands when the AppBar is in the process of 'showing'. I've found that when calling these methods in the beforeshow or aftershow handler that this happens. This quote from Animating your UI sheds light on why:
Use fade in and fade out animations to show or hide transient UI or controls. One example is in an app bar in which new controls can appear due to user interaction.
The sample app shows/hides the buttons before the appbar is shown. You may be calling show on the app bar before calling showOnlyCommands.
A temporary hack for this problem is:
Set the button be invisible before calling showOnlyCommands or HideCommands.
Here is the code that I use for now:
/*
* #param {WinJS.UI.AppBar} appbar winControl
* #param {Array} array of appbar buttons to be shown
*/
function showOnlyCommands(appbarControl, buttonsToShow) {
var toShow = {};
for (var i = 0; i < buttonsToShow.length; i++) {
toShow[buttonsToShow[i].id] = true;
}
for (var i = 0; i < visibleButtonsList.length; i++) {
var id = visibleButtonsList[i].id;
if (!toShow[id]) {
// set the display property of the buttons to be hidden to "none"
var button = document.getElementById(id);
if (button) {
button.style.display = 'none';
}
}
}
// update the visible buttons list
visibleButtonsList = buttonsToShow;
// Note that we don't need to set the "display" property back for the buttons,
// because WinJS.UI.AppBar.showOnlyCommands would set it back internally
appbarControl.showOnlyCommands(buttonsToShow);
}