I'm making a Master/Details app with Template 10. The Master/Details Template 10 sample uses a CommandBar to get full control over when the back button is shown, but I'd like to show the back button on a PageHeader or on the shell. The problem is, since there is no back stack, the button refuses to be shown. How should I handle this?
Override the OnNavigatedTo event and set AppViewBackButtonVisibility to Visible in the code-behind file for each page that you want to enable the title bar back button.
Take a look here: http://grogansoft.com/blog/?p=1116
The important part is "AppViewBackButtonVisibility"
if (rootFrame.CanGoBack)
{
// Show UI in title bar if opted-in and in-app backstack is not empty.
SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
AppViewBackButtonVisibility.Visible;
}
I also suggest you take a look at the AppBar properties.
Especially the Visibility which gets or sets the visibility of a UIElement and you could force the visibility of an item:
https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.appbar.aspx
So I've created a hacky solution to this. Basically I'm adding a dummy value onto the stack so that the back button thinks there is something to go back to.
var entry = new PageStackEntry(typeof(bool), null, null);
Frame.BackStack.Insert(0, entry);
Then I've added a BootStrapper.BackRequested event which sets HandledEventArgs.Handled to true so Template10 doesnt actually pop the page. That way I've got full control over the back stack and the back visibility.
Related
I have a grid layout in which I want to show a pop up when the user tries to replace a component which is already present in the grid.
For e.g. the grid layout has a Label (wrapped in a DragAndDropWrapper) which is present at 0,0 position.
If the user tries to add a new component at the same position(0,0 position), then it should show a pop up (confirmation dialog box) asking the user to confirm if the user wishes the replace the existing component or not.
Now, my issue is that the current thread does not wait for the execution to complete. It keeps going ahead after showing the pop up box. Thus, there is a lot of problem in updating the UI after the input is taken from the dialog box for the user's answer.
Can someone show how to do this? Note that I need to do this in a DragAndDropHandler's drop method call as I need to show the dialog box only when the user tries to drop a new component on an existing component of the grid layout.
A working example would be a great help.
Thanks in advance.
So I followed the comment by André Schild and it did work for me.
I just remember which component and location was used for replacing the component. Then, I ask for a confirmation and if the user says Yes, then I just go ahead and replace it.
Thanks again Andre
I followed this link http://www.wintellect.com/devcenter/jprosise/handling-the-back-button-in-windows-10-uwp-apps and "successfully" make my button work. I mean I can make my backbutton work between pages. However, if I navigate to a control which is inside this page and will cover the whole screen, then it would not allow me to back to the page. I will stuck in that control.
I'm wondering how to solve this problem. Currently I can think two possible ways (0) Override OnBackRequested() inside the control's code behind or viewmodel? (1) Override OnHardwareButtonsBackPressed() inside the control's code behind or viewmodel?. I don't know if these are correct way to do it or there is some better way to do it. Another reason for me to override is that I need to make some changes to the page navigation behavior.
As you have guessed, you simply need to hide the control again when the back button is pressed or back is requested in some other way. I would listen for the BackRequested event (not the HardwareButtons.BackPressed event) in the page's code-behind, and in the handling method you can check to see if the control is currently shown. The reason I recommend the BackRequested event is because it is universal, while HardwareButtons.BackPressed only works on a phone. Anyway, if the control is visible, then hide it, and set the Handled property of the event arguments to true. If the control is already hidden, don't do anything special to handle the event (because in that case you will want the navigation system to handle it by navigating to the previous page, if there is one). There are many aspects to navigation in Windows 10 -- please see these pages on Navigation and the SystemNavigationManager.
I have a single AppBar declared in default.html for use throughout my application.
On some of the pages I need to show the App Bar and in some of the I need to hide the AppBar.
So far, my efforts to find the methods to hide and show the AppBar have met a dead end.
The documentation on MSDN says:
AppBar.hide method :
Hides the app bar on Windows and the secondary command menu on Windows Phone.
So, that method only hides the AppBar for Windows and not for a Windows Phone project.
I have also tried giving display:none as a CSS style, to no effect.
Any help will be appreciated :)
AppBar.Hide hides the secondary command bar on Windows Phone, not the main AppBar. If you want the entire AppBar to go away then this isn't the right property.
The easiest way is to declare the AppBar on pages that you want to show it and to leave it out on pages that you don't want it, but you should be able to hide it by disabling the AppBar on pages that you don't want it on.
I just modified the appbar-commands.js file in the HTML AppBar control sample as follows and the appbar hides and shows as I click the hide and show buttons:
// These functions are used by the scenario to show and hide elements
function doShowItems() {
document.getElementById('commandsAppBar').winControl.disabled = false;
//document.getElementById('commandsAppBar').winControl.showCommands([cmdFavorite, cmdCamera]);
document.getElementById('scenarioShowButtons').disabled = true;
document.getElementById('scenarioHideButtons').disabled = false;
}
function doHideItems() {
document.getElementById('commandsAppBar').winControl.disabled = true;
//document.getElementById('commandsAppBar').winControl.hideCommands([cmdFavorite, cmdCamera]);
document.getElementById('scenarioHideButtons').disabled = true;
document.getElementById('scenarioShowButtons').disabled = false;
}
I also confirmed with the single-page navigation model navigating between two pages. If you aren't seeing the appbar hide and show when disabled and enabled then make sure you are calling the code to disable / enable the appbar. The PageControl's ready function may not be called when returning to a cached page.
You'll have to do it with C#, You can simply just type.. (If your appbar is called ApplicationBar)
ApplicationBar.Visibility = Visibility.Collapsed;
This will instantly hide the AppBar! If you want your HTML Page to perform this action, it will be much complicated.
Cheers
I think you can try below step in your code.
Add a event listener for appbar beforeshow
In code of before show Check a condition with specific page name
Like : if (WinJS.Navigation.location.match("test.html"))
According to you condition you can Disable your appbar.
All the best..!!
Actually, I want to store some data in background page and the popup page just show that part of data say Data as a div element created in background page document.createElement("div"). Here, the background page will register some listeners to the tab update and change the Data elements accordingly. What the popup will do is to get that Data and appendit use the document.appendChild(Data).
(The purpose I intend is this will cause the popup changes immediately while the tab updage is triggered.)
However, the elements are shown as usual, what I am facing very headache is I have registered the onclick for the div object in backgroundpage as onclick="chrome.extension.getBackgroundPage().somefunc()". However, the first time, all the click will triger the right behavior but after the popup loses foucs and get focus again, all the click won't work.
I try to put something like change the onclick="somefunc()" and leave the func within the script of popup page. And there I want to log whether it is called by console.log("clicked"). Here, something unbelievable happens, the function is succefully trigerred BUT the console is null here, I cannot even call chrome.extension.getBackgroundPage() as well.
Here are a list of questions, maybe very hard to express for me...
1. Whether I can reuse the DOM element from the background page to the popup page directly by appendChild(chrome.extension.getBackgroundPage().getElementById()?
2.Will the onclick event registered in the background page still work in the popup pages?
3. What's the problem with the problem I am encountering? I have tried many ways to find out the reason but all in vain at last...
Best Regards,
If you need any more information, please let me know.
(PS: I am wonderning if it is called something like the event propogation, however, I am not an expert in this two pages communicating...)
I have a search dialog that I am popping up and filling with jquery templates. After they make a selection I set a value on the current page. As such I don't need hashTags or anything like that, I just need a pop-up dialog that I can open and close programatically. I am currently opening the dialog with
$.mobile.changePage(dialog, { transition: "slide", changeHash: false });
and closing it with
dialog.dialog('close');
However, in certain cases (when the page is navigated to), closing the dialog refreshes the current page.
Is there a better way to interact with this?
Update:
I think I figured out what is going on. So for some reason, jquery mobile usually keeps 2 pages loaded on the DOM - one of which is invisible, you can verify this by running $('[data-role=page]') in the console. One page is the page you're on, the other is the page that you initially navigated to. Not quite sure why they choose to do that, but there you have it.
So they treat dialogs as a page navigation with a different transition even if the dialog is already in the DOM. Therefore, if you go directly to the page and then trigger a dialog, modifying the current page and closing it works fine - because the original page is always loaded in the DOM. However if you go to another page, than navigate to the page that triggers the dialog, and THEN trigger the dialog it destroys the current page so that the pages in the DOM are the initial one and the dialog. In that case it reloads that dialog-launching page entirely and you never get a chance to make any modifications.
Jeez. How do I interact with the jqm dialog widget directly?
You can try two other things. Both should work:
1 set DomChache
How about overriding JQM to keep the page your are firing the dialog from in the DOM? The docs say you can set data-dom-chache and override cleaning the page from the DOM.
If it only happens when you load this page in via AJAX (vs. loading it directly) you could make DOM-keeping dependend on your trigger page having data-page-external, assign DOM-chache="true" only when the dialog is openend and remove it again once the dialog is closed.
2 override JQM
I had the same problem you described and got it to work like this (requires hacking into JQM though...):
// inside transitionPages function
if ( !$(toPage).jqmData('internal-page')
{fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } );}
}
My problem was that pagechanging to certain pages (same as dialog) caused the preceding page (where the dialog fired from) to be removed from the DOM, so I had a blank screen (when trying to go back). I added data-internal-page="true" to the pages, which should keep the preceding page intact and added the if-clause in JQM.
So now pageHide (and DOMcleanup) only fires, if I'm not going to a page labelled with data-internal-page="true"
Cheers!
I think I was having a similar problem. What I wanted to do was based on certain parameters, pop a dialog window on load (with that content on the same page), which they can close and view the page that loaded.
I could get it to pop on load using load, or the pageshow events, but when I clicked close that sent you back to the previous page in history, instead of just closing the dialog.
//target your 1st page content, here its id=success
//the modal content is in a page id=dialog and data-role="dialog"
$('#success').live('pageshow',function(){
window.setTimeout(function(){
$.mobile.changePage('#dialog','pop',false,false);
},1);
}
Its a hack, and just allows the page load to beat the dialog so it gets stuck in history. Then the default dialog close behavior for the dialog works as expected. Talk about a PITA, if they took a little more for the JQuery UI dialog it would have made things a ton easier.
And regarding your question: Have you looked at Jquery Mobile Actionsheet plugin
If you don't really require a page to be loaded, that should be ok.
Also helpful could be Cagintranet iPad popover, although you have to tweak the design to be fullscreen on mobile devices. If you require CSS/Jquery to do that let me know (I'm using this in a JQM plugin I'm writing)
Hope that helps.