Silverlight Popup Dialog
This Silverlight only Popup Dialog is easy to implement on your Silverlight driven website and is also customizable to provide a visual feel suitable for any site design.
You need to login to Download the Popup Dialog example, If you do not have a login you can register for free!
How to Use the Popup Dialog Control
To use the Popup Dialog on your Silverlight page:
<UserControl x:Class="PopupDialog.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<Canvas>
<Button x:Name="showDialog" Canvas.Left="20" Canvas.Top="20" Content="Show Dialog" Width="100" Height="20" Click="ShowDialog_Clicked" />
<liquid:Dialog x:Name="areYouSure" Canvas.Left="250" Canvas.Top="250" Width="200" Height="180" Title="Are you sure?" Canvas.ZIndex="1" Closed="AreYouSure_Closed">
<liquid:Dialog.Children>
<StackPanel Canvas.Left="4" Canvas.Top="4" Width="192">
<TextBlock x:Name="messageText" FontFamily="Arial" FontSize="14" TextWrapping="Wrap" Text="Your form will now be submitted, due to the high levels of interest in this position please allow Two weeks to process." />
</StackPanel>
</liquid:Dialog.Children>
</liquid:Dialog>
</Canvas>
</UserControl>
In your C# code behind file you can refer to the Dialog using areYouSure. In this example we create a simple popup dialog containing OK and Cancel buttons with some text, to show the dialog click the 'Show Dialog' button.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Liquid;
namespace PopupDialog
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void ShowDialog_Clicked(object sender, RoutedEventArgs e)
{
areYouSure.Show();
TextBlock txtBlock = (TextBlock)areYouSure.FindName("messageText");
if (txtBlock != null)
{
txtBlock.Text = "New message";
}
}
private void AreYouSure_Closed(object sender, EventArgs e)
{
if (areYouSure.Result == DialogButtons.OK)
{
// Do some code here for the okay button
}
}
}
}
Like the .NET modal dialogs, we make a call to the Show() method when we want to display the dialog. Notice how the other controls on the parent Canvas become disabled when the dialog is displayed, this ensures the user closes the dialog before they can continue with your Silverlight application.
Example Silverlight Popup Dialog Control:
Your Comments and Questions Answered
You are not logged in. You need to login to post new messages, if you do not have a login you can register for free!
dan
Jun, 25 2008 - 13:32
Hello,
Thanks for your comments. We do not have any plans to enhance the standard datagrid yet, we are concentrating on the RichTextBox and the TreeView control. Thanks for your suggestion!
alex.jarnoux
Jun, 25 2008 - 01:28
Hi VectorLight Team,
Your controls are nice!
I had some difficulties to populate value from a TextBoxPlus inside a Dialog. But since Dialog.FindName() method is recursive, all is wonderfull :p
When will you include a DataGridPlus?
Thanks!
dan
Jun, 20 2008 - 23:37
Hello,
Thanks for your comments and feedback on the diaolog, your problem is easy to solve. As you quite rightly point out the area a dialog can be dragged changed in 4.6 when we introduced two settings for controlling the region the dialog could be constrained to.
If you try adding the following to the dialog declaration in your XAML:
TopLeft="-10000,-10000" BottomRight="10000,10000"
This should help you, but let us know if you need any more assistance with this, Thanks!
mfrklicDRI
Jun, 20 2008 - 15:48
First off - love the controls! We've been using them since at least version 4.3 for DropDownList and Dialog.
But we have noticed ever since 4.6+ the Dialog is constrained to a limited draggable area no matter what size its parent container is. We used to be able to drag the Dialog anywhere in the container and full screeen the browser (SL plugin stretched to full page width/height) and pretty much drag it anywhere withing the browser page(plugin space).
Now with this "invisible" limit or border the dialog can only be moved around a 1024x1024 space. My guess is somewhere in the source an invisible canvas is built into the control for simplifying end user set up but this limit actually hurts our current application since we require full browser page space. If there was a way to make the canvas stretch to the parent container and not be limited to 1024x1024 - this would pretty much resolve our problem.
I was hoping to find this in the Style and override it but no luck so it looks a code change would be needed to fix this.
Any feedback would be greatly appreciated! Again thanks for all the hard work in making these controls for us SL enthusiasts!
rparsons
Jun, 03 2008 - 14:11
Someone probably needs to update the Visual Customization screen for the popup dialog so that it no longer shows the default template for a text label.
dan
May, 30 2008 - 16:06
Hi,
Thanks for the comments! I've had a quick look at the code and from what I can see a dialog is modal if it's parent is a Canvas element that has a Width and Height. Only sibling elements (children of the Canvas) are 'disabled'.
I have put an improvement request in for this one to allow any parent type (such as StackPanel). If you have any suggestions yourself about how this should work please post them below. Thanks for your interest in these controls!
SilverlightGeek
May, 30 2008 - 15:24
Dan,
Great controls! I'm having trouble understanding how to specify if a pop dialog is modal or not. If I run the samples in "Silverlight Popup Dialog" those are NOT modal. If I run "Silverlight Draggable Popup Dialog" those ARE modal. I've looked @ both the XAML and code behind for each and for the life of me cannot understand why one is modal and the other is not. Am I missing a property setting or something? If you could get back to us ASAP it would be most helpful... Thanks!
dan
May, 29 2008 - 04:50
Hello,
Do you have an example project with this problem that you could email?
arshadm
May, 28 2008 - 12:52
Dan,
When can I call testPopup.FindName("myControl"). I have tried straight after a testPop.Show() but the value returned is null.
dan
May, 27 2008 - 04:59
Hello,
Are you calling FindName() on the ChildMainCanvas object or on the Popup dialog control itself?
Assuming your dialog is called testPopup:
testPopup.FindName("myControl");
This should return the control in a usable state. The demo suggests to access controls directly through the canvas which we will change because, as you point out, this is null until the popup is actually displayed.
Let us know how you get on!
arshadm
May, 24 2008 - 03:55
A very nice control, but quite hard to populate with data. I am using a GotFocus event on one of the controls on the dialog to populate them (still using FindName, because even at that point the x:Name defined names are null). Anybody have a better solution?
dan
May, 23 2008 - 00:06
Thanks for the comments, there were a couple of controls we needed to rename to avoid this sort of problem, glad you like the controls. Post any feedback back to the site!
jmcfet
May, 22 2008 - 13:16
I found my problem, I downloaded the latest version and see that the Listbox is now ListboxPlus .... nice
jmcfet
May, 22 2008 - 11:05
you really have some interesting controls and wanted to use the dialog but I have a project that users the Microsoft ListBox and when I bring in your controls I get the following:
Listbox is an ambigous reference between Liquid.Listbox and System.Windows.Controls.Listbox
dan
May, 13 2008 - 00:10
Hello,
I agree, accessing the controls on a dialog is not as easy as we would like and we are addressing the issues at the moment. Thanks for your suggestions!
omnius
May, 12 2008 - 09:21
What is the best way to pre-populate data on dialogs? An example is an "edit" type dialog that needs to be loaded with existing data that the user then edits. Currently all references to controls on the dialog are null and have to be fetched with something like dialog.ChildMainCanvas.FindName("name"); The problem is that when the dialog isn't shown or even immediately after dialog.Show() is called, ChildMainCanvas is a null reference and it there is no way to get a reference to the individual input controls to populate them with data. I also haven't been able to find a way to run code immediately after the dialog is finished showing itself which I assume is when ChildMainCanvas becomes a valid reference. It would be helpful to have an "opened" event similar to the existing "closed" event.
dan
May, 06 2008 - 00:05
Hello,
Not at the moment, we have added this as a future request and should make the next version!
quintorel
Apr, 30 2008 - 05:20
Is possible change the window color?
For example, the tittle bar is always purple, is possible change this color?
Thanks
dan
Apr, 18 2008 - 23:59
Hello,
This has been added to the list of fixes for the next version, thanks for reporting it!
thumphries
Apr, 18 2008 - 14:27
If you place a Dropdownlois on a popup. The buttons will render over the list that drops down.