I’m trying to make a desktop application with Width= 600 Height=500. How to create a popup dialog that overlaps complete window of the app? When the user clicks on Terms&Condition (within mainpage) I want to popup a dialog like this?
3 Answers 3
ContentDialog Example
Add the following to your XAML code.
Note: Set the IsLightDismissEnabled Property to True to dismiss the popup by clicking anywhere on the app.
Inside the popup tags, you can add required child elements.
Till the end I make a New ContentDialog (Add>NewItem>ContentDialog1). After in ContentDialog1.xaml I paste defaul style of ContentDialog inside of and in MainPage.xaml.cs I instatiate this dialog and show him after with this code: » ContentDialog1 dialog = new ContentDialog1(); await dialog.ShowAsync();».
But now problem is that this dialog is inside of my frame. How can I overlay this dialog on application ?
Not the answer you’re looking for? Browse other questions tagged uwp popup desktop or ask your own question.
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
Диалоговые окна и всплывающие элементы Dialogs and flyouts
Диалоговые окна и всплывающие элементы используются для временного отображения элементов пользовательского интерфейса, если происходит нечто, требующее уведомления, подтверждения или дополнительных сведений от пользователя. Dialogs and flyouts are transient UI elements that appear when something happens that requires notification, approval, or additional information from the user.
ДиалогиDialogs
Диалоговые окна — это модальные наложения пользовательского интерфейса, которые предоставляют контекстную информацию о приложении. Dialogs are modal UI overlays that provide contextual app information. Диалоговые окна блокируют взаимодействие с окном приложения, пока пользователь явно не закроет окно. Dialogs block interactions with the app window until being explicitly dismissed. Они часто требуют от пользователя совершения каких-либо действий. They often request some kind of action from the user.
Всплывающие элементыFlyouts
Всплывающий элемент — это облегченное всплывающее контекстно-зависимое окно, отображающее элемент пользовательского интерфейса в зависимости от действий пользователя. A flyout is a lightweight contextual popup that displays UI related to what the user is doing. Он включает логику расположения и размеров и может использоваться для отображения дополнительного элемента управления или отображения дополнительных сведений об элементе. It includes placement and sizing logic, and can be used to reveal a secondary control or show more detail about an item.
В отличие от диалогового окна, всплывающий элемент можно быстро закрыть нажатием или щелчком за его пределами, нажатием клавиши Escape или кнопки «Назад», изменением размера окна приложения или ориентации устройства. Unlike a dialog, a flyout can be quickly dismissed by tapping or clicking somewhere outside the flyout, pressing the Escape key or Back button, resizing the app window, or changing the device’s orientation.
Выбор правильного элемента управления Is this the right control?
Диалоговые окна и всплывающие элементы позволяют пользователям быть в курсе важной информации, но также мешают взаимодействию с пользователем. Dialogs and flyouts make sure that users are aware of important information, but they also disrupt the user experience. Так как диалоговые окна модальны (приводят к блокировке), они прерывают работу пользователей и мешают им выполнять дальнейшие действия, пока не произойдет взаимодействие с диалоговым окном. Because dialogs are modal (blocking), they interrupt users, preventing them from doing anything else until they interact with the dialog. Всплывающие элементы в меньшей степени мешают взаимодействию с пользователем, но отображение слишком большого числа всплывающих элементов может отвлекать. Flyouts provide a less jarring experience, but displaying too many flyouts can be distracting.
Определив, собираетесь ли вы использовать диалоговое окно или всплывающий элемент, необходимо выбрать один из этих вариантов. Once you’ve determined that you want to use a dialog or flyout, you need to choose which one to use.
Учитывая то, что, в отличие от всплывающих элементов, диалоговые окна блокируют взаимодействие, последние следует использовать в тех случаях, когда пользователь должен уделить все внимание определенной информации или ответить на вопрос. Given that dialogs block interactions and flyouts do not, dialogs should be reserved for situations where you want the user to drop everything to focus on a specific bit of information or answer a question. С другой стороны, всплывающие элементы можно использовать для привлечения внимания к определенной информации, которую пользователь вполне может проигнорировать. Flyouts, on the other hand, can be used when you want to call attention to something, but it’s ok if the user wants to ignore it.
Используйте диалоговое окно в следующих целях.Use a dialog for.
Чтобы сообщить важную информацию, которую пользователь должен прочитать и осознать перед продолжением работы. Expressing important information that the user must read and acknowledge before proceeding. Примеры приведены ниже: Examples include:
угроза безопасности пользователя; When the user’s security might be compromised
намерение изменить ценные данные без возможности отмены действия; When the user is about to permanently alter a valuable asset
намерение удалить ценные данные; When the user is about to delete a valuable asset
подтверждение покупки из приложения; To confirm an in-app purchase
Сообщения об ошибках, которые относятся к приложению в целом, например ошибка подключения. Error messages that apply to the overall app context, such as a connectivity error.
Вопросы, если приложению нужно задать пользователю блокирующий вопрос, например, если приложение не может сделать выбор от имени пользователя. Questions, when the app needs to ask the user a blocking question, such as when the app can’t choose on the user’s behalf. Блокирующий вопрос нельзя проигнорировать или отложить. У пользователя должны быть понятные варианты выбора. A blocking question can’t be ignored or postponed, and should offer the user well-defined choices.
Используйте всплывающий элемент в следующих целях.Use a flyout for.
сбор дополнительных сведений для завершения действия; Collecting additional information needed before an action can be completed.
Отображение временно актуальных сведений. Displaying info that’s only relevant some of the time. например, когда пользователь щелкает эскиз изображения в приложении фотоальбома, можно использовать всплывающий элемент для отображения увеличенного варианта этого изображения; For example, in a photo gallery app, when the user clicks an image thumbnail, you might use a flyout to display a large version of the image.
отображение дополнительной информации, например подробных сведений или более длинных описаний элемента на странице. Displaying more information, such as details or longer descriptions of an item on the page.
Как избавиться от ненужных диалоговых окон и всплывающих элементов Ways to avoid using dialogs and flyouts
Учитывайте важность информации, которую требуется отобразить: важна ли она настолько, чтобы прерывать пользователя? Consider the importance of the information you want to share: is it important enough to interrupt the user? Также учтите частоту отображения информации. Если диалоговое окно или уведомление отображается каждые несколько минут, возможно, следует выделить для этой информации место в основном пользовательском интерфейсе. Also consider how frequently the information needs to be shown; if you’re showing a dialog or notification every few minutes, you might want to allocate space for this info in the primary UI instead. Возьмем, к примеру, клиент чата. Вместо того чтобы отображать всплывающий элемент каждый раз, когда друг выполняет вход, можно отображать список друзей, находящихся на данный момент в сети, и выделять друзей, выполняющих вход. For example, in a chat client, rather than showing a flyout every time a friend logs in, you might display a list of friends who are online at the moment and highlight friends as they log on.
Диалоговые окна часто используются для подтверждения действия (например, удаления файла) перед его выполнением. Dialogs are frequently used to confirm an action (such as deleting a file) before executing it. Если ожидается, что пользователь будет часто выполнять определенное действие, вы можете предоставить пользователю возможность отменить ошибочное действие, чем запрашивать его подтверждение каждый раз. If you expect the user to perform a particular action frequently, consider providing a way for the user to undo the action if it was a mistake, rather than forcing users to confirm the action every time.
Как создать диалоговое окно How to create a dialog
Как создать всплывающий элемент How to create a flyout
Примеры Examples
XAML Controls Gallery XAML Controls Gallery
Если у вас установлено приложение XAML Controls Gallery, щелкните здесь, чтобы открыть его и увидеть ContentDialog или Flyout в действии. If you have the XAML Controls Gallery app installed, click here to open the app and see the ContentDialog or Flyout in action.
Убрать блокировку всплывающих окон в windows phone 8.1
Для возможного решения проблемы, перезагрузите телефон.
Нажмите клавишу уменьшения громкости и клавишу питания, и удерживайте их нажатыми в течение 15 секунд. (Потом придётся установить дату и время заново).
Это возможное решение проблемы, которое не помогает. А где настройки в браузере про всплывающие окна? Их я не смог найти. Соответственно, они у меня не работают. А мне надо
Ответы (7)
—————————— Если совет вам помог, вы можете отметить его как ответ. Это поможет другим участникам форума.
С уважением. Елена.
Был ли этот ответ полезным?
К сожалению, это не помогло.
Отлично! Благодарим за отзыв.
Насколько Вы удовлетворены этим ответом?
Благодарим за отзыв, он поможет улучшить наш сайт.
Насколько Вы удовлетворены этим ответом?
Благодарим за отзыв.
Нет в телефоне таких настроек. Скажите пожалуйста, для чего вам нужны настройки блокировки всплывающих окон?
Отвечаю: на учебных порталах электронные курсы часто запускаются в новом окне (не всплывающем, а новом). Но браузер блокирует его открытие. На ПК есть настройки полной или посайтовой разблокировки всплывающих окон.
Учиться с помощью мобильного устройства гораздо удобнее, чем быть привязанном к компьютеру.
Был ли этот ответ полезным?
К сожалению, это не помогло.
Отлично! Благодарим за отзыв.
Насколько Вы удовлетворены этим ответом?
Благодарим за отзыв, он поможет улучшить наш сайт.
Popup window in winform c#
I’m working on a project where I need a popup window. But the thing is I also want to be able to add textboxes etc in this popup window thru the form designer.
So basically I have a button and when you click on it it will open another window that I’ve designed in the form designer.
I’ve been doing some googling but I haven’t found what I needed yet so I was hoping you guys could help me!
6 Answers 6
Just create another form (let’s call it formPopup ) using Visual Studio. In a button handler write the following code:
If you need a non-modal window use: formPopup.Show(); . If you need a dialog (so your code will hang on this invocation until you close the opened form) use: formPopup.ShowDialog()
This is not so easy because basically popups are not supported in windows forms. Although windows forms is based on win32 and in win32 popup are supported. If you accept a few tricks, following code will set you going with a popup. You decide if you want to put it to good use :
Experiment with it a bit, you have to play around with its position and its size. Use it wrong and nothing shows.
Forms in C# are classes that inherit the Form base class.
You can show a popup by creating an instance of the class and calling ShowDialog() .
If you mean to create a new form when a button is clicked, the below code may be of some use to you:
From here, you could also use the ‘Show Dialog’ method
«But the thing is I also want to be able to add textboxes etc in this popup window thru the form designer.»
It’s unclear from your description at what stage in the development process you’re in. If you haven’t already figured it out, to create a new Form you click on Project —> Add Windows Form, then type in a name for the form and hit the «Add» button. Now you can add controls to your form as you’d expect.
When it comes time to display it, follow the advice of the other posts to create an instance and call Show() or ShowDialog() as appropriate.
Всплывающие элементы Flyouts
Всплывающий элемент — это контейнер с возможностью исчезновения, который отображает в качестве содержимого произвольный пользовательский интерфейс. A flyout is a light dismiss container that can show arbitrary UI as its content. Всплывающие элементы могут содержать другие вложенные всплывающие элементы или контекстные меню. Flyouts can contain other flyouts or context menus to create a nested experience.
Получение библиотеки пользовательского интерфейса WindowsGet the Windows UI Library
Библиотека пользовательского интерфейса Windows 2.2 или более поздних версий содержит новый шаблон для этого элемента управления, который использует закругленные углы. Windows UI Library 2.2 or later includes a new template for this control that uses rounded corners. Дополнительные сведения см. в разделе о радиусе угла. For more info, see Corner radius. WinUI — это пакет NuGet, содержащий новые элементы управления и функции пользовательского интерфейса для приложений для Windows. WinUI is a NuGet package that contains new controls and UI features for Windows apps. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows. For more info, including installation instructions, see Windows UI Library.
API платформы: класс Flyout Platform APIs: Flyout class
Выбор правильного элемента управления Is this the right control?
Не используйте всплывающий элемент вместо подсказки или контекстного меню. Don’t use a flyout instead of tooltip or context menu. Используйте подсказку, чтобы вывести краткое описание, которое исчезает через определенное время. Use a tooltip to show a short description that hides after a specified time. Для контекстных действий, связанных с элементом пользовательского интерфейса, например копированием или вставкой, используйте контекстное меню. Use a context menu for contextual actions related to a UI element, such as copy and paste.
Рекомендации по целесообразности использования диалоговых окон и всплывающих элементов (аналогичных элементов управления) приведены в статье Диалоговые окна и всплывающие элементы. For recommendations on when to use a flyout vs. when to use a dialog (a similar control), see Dialogs and flyouts.
Примеры Examples
XAML Controls Gallery XAML Controls Gallery
Если у вас установлено приложение XAML Controls Gallery, щелкните здесь, чтобы открыть его и увидеть ContentDialog или Flyout в действии. If you have the XAML Controls Gallery app installed, click here to open the app and see the ContentDialog or Flyout in action.
Как создать всплывающий элемент How to create a flyout
Всплывающие элементы связаны с определенными элементами управления. Flyouts are attached to specific controls. Вы можете использовать свойство Placement для указания места отображения всплывающего элемента: вверху, слева, внизу, справа или в центре. You can use the Placement property to specify where a flyout appears: Top, Left, Bottom, Right, or Full. Если выбрать полный режим размещения, приложение растягивает всплывающий элемент или размещает его в центре окна приложения. If you select the Full placement mode, the app stretches the flyout and centers it inside the app window. Некоторые элементы управления, например Button, содержат свойство Flyout, которое можно использовать для привязки всплывающего элемента или контекстного меню. Some controls, such as Button, provide a Flyout property that you can use to associate a flyout or context menu.
В этом примере создается простой всплывающий элемент, в котором отображается текст при нажатии кнопки. This example creates a simple flyout that displays some text when the button is pressed.
Если элемент управления лишен свойства «Flyout», вы можете использовать присоединенное свойство FlyoutBase.AttachedFlyout. If the control doesn’t have a flyout property, you can use the FlyoutBase.AttachedFlyout attached property instead. При этом также следует вызвать метод FlyoutBase.ShowAttachedFlyout для отображения всплывающего элемента. When you do this, you also need to call the FlyoutBase.ShowAttachedFlyout method to show the flyout.
В этом примере к изображению добавляется простой всплывающий элемент. This example adds a simple flyout to an image. Когда пользователь нажимает на изображение, приложение отображает всплывающий элемент. When the user taps the image, the app shows the flyout.
В предыдущих примерах всплывающие элементы определялись внутренне. The previous examples defined their flyouts inline. Вы также можете определить всплывающий элемент как статический ресурс и использовать его с несколькими элементами. You can also define a flyout as a static resource and then use it with multiple elements. В этом примере показано создание более сложного всплывающего элемента, в котором отображается увеличенный вариант изображения при нажатии его эскиза. This example creates a more complicated flyout that displays a larger version of an image when its thumbnail is tapped.
Стилизация всплывающего элемента Style a flyout
Для стилизации всплывающего элемента изменяется его свойство FlyoutPresenterStyle. To style a Flyout, modify its FlyoutPresenterStyle. В этом примере показан абзац создания программы-оболочки текста и делает блок текста доступным для программ чтения с экрана. This example shows a paragraph of wrapping text and makes the text block accessible to a screen reader.
Изменение стиля всплывающих элементов для более наглядного отображения Styling flyouts for 10-foot experiences
Элементы управления с исчезновением, например всплывающие элементы, захватывают фокус клавиатуры или геймпада внутри промежуточного пользовательского интерфейса, пока не будут закрыты. Light dismiss controls like flyout trap keyboard and gamepad focus inside their transient UI until dismissed. Для предоставления визуальной подсказки по этому поведению элементы управления с исчезновением на приставке Xbox отображают наложение, затемняющее контрастность и видимость вне области действия пользовательского интерфейса. To provide a visual cue for this behavior, light dismiss controls on Xbox draw an overlay that dims the contrast and visibility of out of scope UI. Это поведение можно изменить с помощью свойства LightDismissOverlayMode . This behavior can be modified with the LightDismissOverlayMode property. По умолчанию всплывающие элементы пользовательского интерфейса отображают наложение с исчезновением на приставке Xbox, но не на других семействах устройств, хотя приложения могут принудительно устанавливать наложению постоянное значение Вкл. или Выкл. . By default, flyouts will draw the light dismiss overlay on Xbox but not other device families, but apps can choose to force the overlay to be always On or always Off.
Поведение с исчезновением Light dismiss behavior
Всплывающие элементы можно закрыть с помощью таких действий исчезновения: Flyouts can be closed with a quick light dismiss action, including
Коснитесь области за пределами всплывающего элемента. Tap outside the flyout
Нажмите клавишу Escape на клавиатуре. Press the Escape keyboard key
Нажмите аппаратную или программную системную кнопку «Назад». Press the hardware or software system Back button
Нажмите кнопку геймпада «B». Press the gamepad B button
При закрытии касанием этот жест обычно не передается пользовательскому интерфейсу под элементом. When dismissing with a tap, this gesture is typically absorbed and not passed on to the UI underneath. Например, если за открытым всплывающим элементом отображается кнопка, первое касание приведет к закрытию всплывающего элемента, но кнопка при этом не будет активирована. For example, if there’s a button visible behind an open flyout, the user’s first tap dismisses the flyout but does not activate this button. Для нажатия кнопки нужно второе касание. Pressing the button requires a second tap.
Вы можете изменить это поведение, назначив кнопку в качестве прозрачного элемента ввода для всплывающего элемента. You can change this behavior by designating the button as an input pass-through element for the flyout. Всплывающий элемент закроется при выполнении действий исчезновения, описанных выше, и передаст событие касания назначенному элементу OverlayInputPassThroughElement . The flyout will close as a result of the light dismiss actions described above and will also pass the tap event to its designated OverlayInputPassThroughElement . Такое поведение рекомендуется использовать для ускорения взаимодействия пользователей с функционально схожими элементами. Consider adopting this behavior to speed up user interactions on functionally similar items. Если ваше приложение имеет коллекцию избранного и каждый элемент в коллекции содержит присоединенный всплывающий элемент, логично предположить, что пользователям может потребоваться последовательно взаимодействовать с несколькими всплывающими элементами. If your app has a favorites collection and each item in the collection includes an attached flyout, it’s reasonable to expect that users may want to interact with multiple flyouts in rapid succession.
[!NOTE] Старайтесь не назначать прозрачный элемент ввода наложения, так как это приведет к деструктивным действиям. Be careful not to designate an overlay input pass-through element which results in a destructive action. Пользователи привыкают к действиям незаметного исчезновения, которые активируют основной пользовательский интерфейс. Users have become habituated to discreet light dismiss actions which do not activate primary UI. Кнопки «Закрыть», «Удалить» или другие кнопки деструктивных действий не должны активироваться при исчезновении, так как это может стать причиной непредвиденного и ошибочного поведения. Close, Delete or similarly destructive buttons should not activate on light dismiss to avoid unexpected and disruptive behavior.
В следующем примере будут активированы все три кнопки внутри FavoritesBar при первом касании. In the following example, all three buttons inside FavoritesBar will be activated on the first tap.
