I needed a modal dialog for my app but it appeared there is nothing like that in XAML Metro app. Someone suggested a popup.
I tried and it appeared that underlying UI still responsive.. so a Popup is not modal.
I thought OK may be its purpose is to be a popup in the center of the screen regardless the other layout and it appeared - not. Popup is bound to a layout as everything else. if it is in a grid it will be placed in row 0 and column 0 not in the center..
So may be I missing something. please help to understand. I cant find any use for it different from what can be achieved by using Grid.
what is the purpose of Popup? how it different from any other content controls?
Differences:
You don't have to put it as a child of another control. Though in such scenarios you might get problems traversing the visual tree and focusing on a TextBox won't shift its contents so the virtual keyboard might cover its contents or its adorner contents might lose alignment to adorned controls not on the Popup.
Its content tree is rendered on top of any other content and (I believe) doesn't get clipped by parent control's Clip regions.
You usually need to set its Width and Height manually when first showing or when parent layout (or size) changes, especially in one of the most common scenarios when you set its Width and Height to the Width and Height of the parent (or the window).
That said - modal dialogs are bad UI and should be avoided. You can simply navigate to another page if you would otherwise want to display a dialog or use other approaches. There's (almost) nothing more annoying than displaying a modal dialog over UI that looks otherwise enabled but doesn't respond to input.
I needed a modal dialog for my app but it appeared there is nothing like that in XAML Metro app. Someone suggested a popup.
Since Windows 8.1, there is actually something similar to a modal dialog that you may want to look into:
It's called Flyouts.
Apparently a modal popup with custom content is missing in Windows 8.1. One possible workaround:
use a Popup control (per se not modal)
make the background semi-transparent
stretch it across the entire screen
place the actual popup content inside that container and leave some space around it
Now, the parent page is visible but dimmed, and it cannot be accessed as the Popup is covering it.
Related
I want to emulate modal dialog in XAML Metro App.
So I was going to set .IsEnabled = false on all controls apart from the one which will pose as a modal dialog.
Apparently IsEnabled not in Grid not in Panel not in FrameworkElement. How to disable it not making a user control out of it?
I guess Sinofsky cut so many corners that the whole thing is now more like an Escher staircases. I am loosing my faith. Please help
Sorry, I am a little late to the party...
Here is how I created a modal popup - I used a popup dialog where the top and bottom portions are transparent so that anything behind it will show through. When the popup is opened, I set its size to cover the entire screen.
The top and bottom portions of the popup also are set to autosize (height = *), so that they fill up the entire top and bottom of the screen. This prevents any input from going into the grid underneath.
Here is a screen shot of my popup in Visual Studio:
The popup is a grid with 5 rows, 3 for the dialog itself and 2 for the transparent top and bottom.
Here is how the popup looks in my app. Obviously the grid shows through the transparent top and bottom. Since the popup fills the entire screen, any input (keyboard or mouse) goes to it rather than the grid underneath, making the popup act like a modal dialog.
Be warned though that with this strategy, you have to handle these events:
Screen resizes (full screen, snapped view, filled view) - you need to resize the popup to fit within each of the view states
Screen rotation - again, you have to handle resizing here
Keyboard popup - you need to shift the popup up so that the onscreen keyboard does not interfere with it.
Set IsHitTestVisible = false on the background content.
Additionally you could set focus to something in your modal layer root and set TabNavigation to Cycle on the modal layer root to make sure that users can't tab/shift+tab out of it. Also make sure the modal layer is all hit test-solid - e.g. Transparent or has some other fill so users can't click through it.
Also make sure no Popups show while your modal layer is visible.
Unfortunately no one seems to know (except Mr Skakun who gave wrong answer and never bothered to revise it).
Hence my solution (the simplest) is to make the element in question Hidden - I cant find any other ways to 'disable' a grid.
If I wanted to disable it correctly I would have to write a recursive function to find all FrameworkElements in the grid children and set IsEnabled = false though.
I've tried looking many places for an answer to an issue I'm having and so far I've found nothing.
What I currently have is a c# windows form with user controls inside it. Some user controls have other controls inside them. What happens when I change the text in a textbox, is its parent windows will no longer resize like they should when changing the window size. i.e. A horizontal scrollbar will appear even though horizontal scrollbars are disabled in that specific window. Its almost as if changing the text changes the parent window's styling.
In case this is too vague, I have a textbox inside a panel with a docking property set to fill. The panel has a padding of 10 in order to allow the textbox to have some white space for aesthetic purposes. This control resides within a parent control (we'll call it parent 1), which in turn resides within another control as well (we'll call it parent 2). So when I change the textbox's text (at all, even adding a space), will then make parent 2 have a horizontal scrollbar flicker and sometimes even remain when resizing the form window manually.
You should make sure that not only the TextBox in the UserControl is docked to fill but also that the user control itself and its parent (and its parent) are Docked correctly or have anchor set so that they resize with the Form.
Do you execute any special code when the user enters a character? (KeyPressed event etc.). If yes you should try disabling the events temporarily to see if they cause the problem.
If you post a sample of your code it would be easier to help. Without this we can only guess, like I tried...
I found out my issue! When using autoScrollBars and double buffering, it caused the horizontal scrollbar to show when it shouldn't have (at least in my case) when resizing the window. The answer was simple, forget the autoScrollBars, and implement my own vertical scroll bar!
I was actually getting some code to post up on here for you guys to look at, but when looking at it, I decided to forget the autoscroll, and lo and behold it worked!
I'm actually curious as to why that is though. My friend heard that .net has some issues with autoScroll but I didn't think it would be to this degree.
A disclaimer first! This might be a very fundamental question, but I have started learning Winforms Application Development on my own (.net 3.5,C#), and I have this resizing question.
I am developing a small Winforms application that has a standard tab control (along with many other controls) placed in the form. (It has 5 TabPages)
The AutoScroll property for the TabPage has been set to “True”. On reading up what I got to understand is that this will enable the scrollbars to show up at run time while resizing. i.e if the height of the form is reduced it will cause the vertical scrollbar to show up within the TabPage.
While the application is running, what I noticed is that if I reduce the height of the form using the little double headed arrow, the scroll bar does not stay on top, i.e if I adjust the height from below, the bottom end of the scrollbar is no longer there. More precisely I am just looking for a way to keep both ends of the scrollbar on top within a TabPage when the form containing the Tab control is resized.
It sounds like the problem is that the tabbed control will show scrollbars and may well autosize, but you haven't told the form what to do.
You might want to look at the 'Dock' property of controls, which causes a control to fill a specific area of the form (or other parent control), no matter what it is resized to.
I have a tabcontrol on my form, on each tab I have a control, each of these controls are similar i.e. they each have a table and a couple buttons and each control is set to Dock Fill
When I view them contols in design view something weird is happening, the first tab that is viewable has it controls placed as you would expect and all is fine, but the second and third tab each the controls appear off centre, overlapping the edges of the tab.
I have experimented with placing different controls on different tabs and it appears that if a control is on the first tab it appears fine, if it is on any other it sometimes appears weird.
The really big problem is that this seems to be appearing at run-time as well, but only sometimes.
I've checked the properties of the controls and the tabs but all seems to be the same.
Any advice would be much appreciated.
Kind regards
MeeM
Seems like a bug to me, make sure you have all the latest updates for Visual Studio.
Is this a UserControl that you are placing on a tab? If so, I would check all the layout properties on the user control and the child controls inside the user control. I have had this problem before, but I can't remember off had what I did to fix it.
Try this:
First thing is to verify the z-order of your controls is correct. For that open your Document Outline window (View->Other Windows->Document Outline) and visually check for the order of each control one by one. When setting the docking properties of controls the z-order of the controls is applied in reverse; that is: the first child control shown in the document outline has docking precedence over those at the same level lower in the document outline window.
Verify that no 2 child controls of the same parent (in your case the tabControl) have the DockStyle.Fill. As a good practice with docking, only one of the child controls should have its docking set to Fill. If you have this case it is most likely rethinking your layout flow will allow you to change it and have only one with Fill. The other docking styles (right, left, top, bottom) can be used in more than one child control and they'll never cause any problems. Only Fill is the problematic one.
If 1 nor 2 solved your problem, my advice if to avoid docking altogether and use Anchoring instead. You can essentially get very similar results using the Anchor property of the controls. I actually like this approach more, since is kinda similar to WPF anchoring.
If 1, 2 not 3 solve your problem. Post an image with your document outline and I'll recreate it here, fix it and post the solution here.
Hope it helped!
I assume that these are user controls we are talking about. Have you changed the layout of the control (class) itself since you added the user controls into your tabs? If so, they will not automatically update with the new value (for Dock, width, height, etc.).
EDIT > SOLVED: It turns out that I had set all of the UI elements' font properties to be 14pt Arial, but not the usercontrol itself, so when it was drawing it on the form, it was resizing it all. Changing the usercontrol's font size to 14pt Arial, and then repositioning/resizing everything fixed it.
I started working on the UI for an app I'm making. The app has a devexpress tab control, and initially I was just placing all of my controls in there to see what it'd look like and to work out any layout issues. Well, I decide to pull out all of the ui elements for each tabpage and toss them into a UserControl and to have that UserControl fill the tab page.
The problem is that it looks perfectly normal (ie. the same as before) when in the usercontrol but when I bring that over to the tab page, all of the ui elements are HUGE (about double in size, but not exactly double).
Here's some images to show you what I mean.
Edit> Note: This is a winforms app.
UserControl:
edit > images removed
Form:
edit > images removed
It turns out that the objects are being resized. I checked the .Size property of the ui elements after the usercontrol.load event and they are much larger than they are supposed to be. This happens if there is the anchoring as I'd like it, all top-left anchored and no anchoring at all.
The AutoScaleMode of the UserControl should be at "None"...
Hard to say without seeing code...
[edit]
Well if you have no code then I only have one idea. The controls inside your user control have anchors that are being adjusted to the size of the parent control. The parent control could be larger than expected making all the anchors adjust with the parent. This would then make them all appear too big. This is my only idea...
[/edit]