I display a modal dialog with a small "please wait" message whilst an Ajax request is underway. Once that request is finished, the result is injected into the content of the modal dialog. If it is significantly larger, obviously the size calculations are thrown off and the "OK" button disappears off the bottom of the screen, requiring a reload to clear the modal!
Is there anything that can be done to resize/reposition the modal dialog after I inject the new content into it, or do I need to change my logic to show a "please wait" and then close it and display the new modal dialog in its completed state?
If you wish to take over the repositioning logic of a Durandal dialog, you would create a custom dialog context. Place your repositioning logic inside of the compositionComplete handler.
Resize, on the other hand, can be handled strictly with CSS. But it can be handled in the compositionComplete handler of the custom dialog context as well.
We have written several custom dialog contexts, and use the approach above to achieve what you are trying to achieve. We have even gone so far as to include special animations in the compositionComplete handler.
Take a look here in Durandal's documentation.
Also, I have uploaded to my public OneDrive a short movie of one of our custom dialog contexts. You can view it here. The slide-out window that pops in front is actually a custom Durandal dialog context.
In Durandal 2.1.0, there will be a method to to reposition the dialog. See:
https://github.com/BlueSpire/Durandal/blob/Version-2.1.0/docs/2.x/Showing-Message-Boxes-And-Modals.html.md#repositioning-dialogs-after-their-contents-have-been-changed
Related
I have a user control with a bunch of buttons behind a scroll viewer that has a grid with a bunch of rows in it. The first row is empty. The buttons in user control need to respond to tap/click when not obscured by scroll viewer's content. My problem is that the scroll viewer caches the tap event and it is not passed to the user control because it is a sibling to the scroll viewer. I would like to somehow pass/propagate the tap event to the user control to get the buttons working. I can't find a good solution to this issue because there seems to be no RaiseEvent(e) method on UI elements in uwp. Due to specific requirements, the whole page needs to react to scroll and the buttons are required to be behind the scroll viewer content. Does anyone know if it is possible to pass the whole event to another element or somehow allow for both controls to handle it? Thanks in advance.
I'm looking for sample code that combines a confetti or fireworks animation with a Vue or Vuetify modal dialog. When the page loads I need to splash a message to the user that they have just qualified for a pay increase. With a modal dialog, it's hard to miss the message and the animation just makes them feel like they finally reached that next level, time to celebrate!
Let's say I have an app built like the Microsoft weather app.
On launch of app I need to download the forecast from the internet. While waiting to do so I also need to display a progress indicator. Which of the following (if any) is recommended?
Render the page fully with navigation controls (hamburger side menu) as well as page content (but without values since they are data bound). Then overlay a modal control like a popup with a progress indicator inside and a cancel button.
Render only the application root shell with the progress indicator inside (no other content, or navigation controls like hamburger menu are visible). Then once the task is complete, navigate to the home page with content.
Render the home page with content and navigation controls, but hide only the content (with visibility = collapsed) and show a progress indicator in its place. Once data is downloaded hide the progress indicator, and show the content.
I don't know which one of these I'm supposed to use. Is there a recommended way to do this?
Or is there a better way I didn't think of?
There is no one perfect answer for this question but I will try to explain the most common solution. None of points above is good or bad. It is better to concentrate on the user experience.
Render fully page with navigation controls and display loading popup is not really bad idea - user see the whole page with progress ring for instance and has chance to cancel it. But remmber that if data is not loaded or user abort pulling it there will be empty content in the app (if this is first time when user launched the app).
One of the best solutions for scenario you wrote is to use extended Splash Screen. Once you app is launched first Splash Screen is displayed and when you extend it, you can add progress ring to indicate that data is being retrieved.
This is very elegant way to present to the user.
Please see below guidline how to do it:
UWP Extended splash screen
Is there any property of pop up , wherein we can dim the window app.
As in metro app there is no Child Window control available , so using
popup in place of it but the problem in popup is when it is open the
user can still interact with other control on window app.
So is there an workaround to make the window app dim when pop is open.
I'm not sure to understand what your trying to do. You can put a Border as first child of the popup which exposes the Background property. So if you specify a not null Background (Transparent for instance) the popup will catch every interactions.
It sounds like you want the MessageDialog class. The popup is meant to be non-modal, letting the user close it by just clicking away from it. The MessageDialog is a regular modal popup that does not let the user interact with the rest of the app when it is displayed.
If you really insist on using the popup control, here is a simple workaround:
Make the popup use all the screen (using a grid or border), then set that background to Black with opacity 0.1 (or any other color you see fit, this is to give a "dim" effect), then inside this popup, place another container with the size and margins that you want to act as your "real" popup.
Because the popup takes the whole screen it will prevent the user from clicking anywhere in the screen.
I'm using a usercontrol with a popup element in it to create some kind of notification system.
There's the possibility that some notifications will be non-timed, so they stay open until the user interacts with it. This works allright, but when the user resizes the browser, the popup control has the wrong size.
I've tried catching the sizechanged on the usercontrol, but that doesn't get called (seems obvious now).
The one solution I have is catching the sizechanged on the mainwindow and applying it to the usercontrol. This notification usercontrol is singleton, so I can do it once and all notifications will have the right size. I just don't feel like this is the right solution.
Any other ideas on this matter?