Is there a way to make the ContentDialog light dismiss?, so when the user clicks on any thing outside the ContentDialog it should be closed.
Thanks.
By default, ContentDialog is placed in PopupRoot. Behind it, there is a Rectangle which dim and prevent interaction with other elements in the app. You can find it with help of VisualTreeHelper and register a Tapped event to it, so when it's tapped you can hide ContentDialog.
You can do this after calling ShowAsync outside ContentDialog code or you can do it inside ContentDialog code. Personally, I implement a class which derives from ContentElement and I override OnApplyTemplate like this:
protected override void OnApplyTemplate()
{
// this is here by default
base.OnApplyTemplate();
// get all open popups
// normally there are 2 popups, one for your ContentDialog and one for Rectangle
var popups = VisualTreeHelper.GetOpenPopups(Window.Current);
foreach (var popup in popups)
{
if (popup.Child is Rectangle)
{
// I store a refrence to Rectangle to be able to unregester event handler later
_lockRectangle = popup.Child as Rectangle;
_lockRectangle.Tapped += OnLockRectangleTapped;
}
}
}
and in OnLockRectangleTapped:
private void OnLockRectangleTapped(object sender, TappedRoutedEventArgs e)
{
this.Hide();
_lockRectangle.Tapped -= OnLockRectangleTapped;
}
Unfortunately ContentDialog does not offer such behavior.
There are two alternatives you can consider:
Popup - a special control built for this purpose, which displays dialog-like UI on top of the app content. This control actually offers a IsLightDismissEnabled for the behavior you need. Since the Anniversary Update (SDK version 1607) also has a LightDismissOverlayMode, which can be set to "On" to automatically darken the UI around the Popup when displayed. More details are on MSDN.
Custom UI - you can create a new layer on top of your existing UI in XAML, have this layer cover the entire screen and watch for the Tapped event to dismiss it when displayed. This is more cumbersome, but you have a little more control over how it is displayed
Related
I'm trying to declare a button as default in UWP app but receive an error:
The property 'IsDefault' was not found in type 'Button'
How can I make a default button in UWP app?
I down know what IsDefault is in WPF but to get if a button is pressed in UWP you can use CoreWindow.GetForCurrentThread().KeyDown. Create a Method that will be called from when the button is pressed or VirtualKey.Enter is clicked.
public MainPage()
{
this.InitializeComponent();
CoreWindow.GetForCurrentThread().KeyDown += MainPage_KeyDown; ;
}
private void MainPage_KeyDown(CoreWindow sender, KeyEventArgs args)
{
switch (args.VirtualKey)
{
case Windows.System.VirtualKey.Enter:
// handler for enter key
break;
default:
break;
}
}
You can use key down event which you can place on any textbox for example if you are making a login page then probably there will be 2 textboxes for username and password then just add key down event handler to textbox as it will be the last mandatory field like this:
<PasswordBox KeyDown="PasswordKeyDown"/>
then you can handle this event as:
using System.Windows.Input;
private void PasswordKeyDown(object sender, KeyEventArgs e)
{
if (e.Key == Key.Enter)
Login();
}
Hope it will help you :)
There is not easy or clean way to solve your problem because IsDefault is not available for uwp apps.
if you are using MVVM or you want to reuse your code I recommend you to use Behaviors and follow the examples that the other guys posted.
I need a Button which user can invoke by pressing the ENTER key.
In an UWP app, by default a Button can be invoked by pressing the Enter key. So I guess what you want is setting the focus on this Button when there are some other UIElements in your page.
You can refer to Keyboard navigation among UI elements,
By default, the tab order of controls is the same as the order in which they are added to a design surface, listed in XAML, or programmatically added to a container.
To focus on the Button which is not the first element, you can just give the TabIndex="1" property to your Button, this property can make your Button get focus whenever the page is loaded, but if you change the focus on other controls in this page, you will need to reselect this button by mouse clicking, touching or TAB key.
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.
In my project I need to create some play,pause,stop buttons in one composite.
For that I created one composite and added these buttons there. Also I have added the images
for each button. But after drawing, it does not look good. I mean images on the buttons does not look good.Clients are not satisfied. Now is it possible to add Images to Label and give some Toggle button actions to the label? I know I can add images to the label. But when I click the label,it does not give button effect..
If you want a custom look for your 'buttons' you could use labels with custom images (one for the normal state and one for the "pushed" state. Something like:
final Label stop = new Label(composite, SWT.NONE);
stop.setSize(STOP_IMG.getImageData().width, STOP_IMG.getImageData().height)
stop.setBackgroundImage(STOP_IMG);
stop.addMouseListener(new MouseAdapter()
{
#Override
public void mouseUp(MouseEvent e)
{
stop.setBackgroundImage(STOP_IMG);
}
#Override
public void mouseDown(MouseEvent e)
{
stop.setBackgroundImage(STOP_DOWN_IMG);
// DO ACTION
}
});
For a nice UI you could also add a MouseTrack listener and have different images for the mouse over states.
Disadvantage of this is you are making it less accessible as it will only respond to mouse events. If you go for this approach you should look at creating your own class that extends MouseAdapter, and takes the label, images and action to invoke in a constructor so you don't end up with tonnes of very similar anonymous classes.
I have used toolbars in the past to achieve a nice effect.
This will create a toolbar with an item that behaves like a regular button:
//Toolbar button
ToolBar toolBar = new ToolBar(composite,SWT.FLAT);
ToolItem toolItem = new ToolItem(toolBar,SWT.PUSH);
toolItem.setImage(image);
This will a toolbar with an item that has toggle behaviour:
//Create a toggle effect
ToolBar toggleToolBar = new ToolBar(composite,SWT.FLAT);
ToolItem toggleToolItem = new ToolItem(toggleToolBar,SWT.CHECK);
toggleToolItem.setImage(image);
I want to put a flash movie in my vb.net form as a form background. i want controls like buttons and labels on top of that flash movie. If this is possible then please provide a step by step answer. Thank you
If you have flash installed.
Right click on the visual studio toolbox > choose items .. when the dialog appears click on the COM components tab and scroll till you find the "Shockwave Flash Object" , tick the checkbox to add it to your toolbox.
Drag the control from your toolbox to your form ... set its "Movie" property to absolute url of your flash swf file.
you can now drop controls on top of the shockwave flash control (your flash movie host).
You might need to drag the control to fill up the available form size.
To disable the flash menu you could put a Panel above the Shockwave Flash Object and make the panel transparent ... but the usual way won't work properly.
Code below is gotten from this link
public class TransparentPanel : Panel
{
public TransparentPanel()
{
}
protected override CreateParams CreateParams
{
get
{
CreateParams createParams = base.CreateParams;
createParams.ExStyle |= 0x00000020; // WS_EX_TRANSPARENT
return createParams;
}
}
protected override void OnPaintBackground(PaintEventArgs e)
{
// Do not paint background.
}
}
Add that to your project and make the panel you add an instance of this class you'll get a transparent overlay on the shockwave flash object that disables the right click on any other mouse events.
Hope this helps.
i am facing one problem in SCSF.
I have two workspaces
MdiWorkspace
DeckWorkspace
i have two views in a module
Viewer (display in mdiworkspace)
Property Viewer (in deckworkspace)
in Viewer i have a button in toolbar whose purpose is to display PropertyViewer (another View).
how can i display this PropertyViewer in deckworkspace agaist button click event.
NOTE: i am not using Command[CommandName].AddInvoker(control, "click:) and CommandHandler
I'm going to assume your toolbar sits in a SmartPart that implements the MVP pattern. Have the button click event handler in the SmartPart fire an event that its presenter will handle. Your presenter code would look like this:
// Presenter code
protected override void OnViewSet()
{
this.View.ToolbarButtonClick += View_ToolbarButtonClick;
}
public void View_ToolbarButtonClick(object sender, EventArgs e)
{
// remove the handler so the property viewer
// will only be added the first time
this.View.OnToolbarButtonClick -= View_ToolbarButtonClick;
var propertyView = new PropertyViewer();
this.WorkItem.Workspaces[WorkspaceNames.MyDeckWorkspace].Show(propertyView);
}