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.

Live Popup Demo

To use the Popup Dialog control you will need to add a reference to Liquid.Popup.dll in your project.

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:liquidPopup="clr-namespace:Liquid;assembly=Liquid.Popup"
    Width="600" Height="300">
    <Grid>
          <Button x:Name="showDialog" Canvas.Left="20" Canvas.Top="20" Content="Show Dialog" Width="100" Height="20" Click="ShowDialog_Clicked" />
          <liquidPopup:Dialog x:Name="areYouSure" Width="200" Height="180" Title="Are you sure?" Closed="AreYouSure_Closed">
            <TextBlock x:Name="messageText" 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." />
        </liquidPopup:Dialog>
    </Grid>
</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();
            messageText.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:

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!

facos said:

Hi!

Is there a function to manually resize a dialog to a specified size? Thanks!

07/02/2009 06:30
 
cyrus said:

Hi!

I found the source of the problem with the dialog not been centered. I was trying to display a login dialog at the startup (not on a button action) and the dialog was shown in the top-left corner. To work-around this issue, I've attached an event handler for the LayoutUpdated event of the containing canvas and used the ShowAsModal() method (only forst time!) for displaying the login dialog. The problem disappeared :)
But what about the close button?
Thanks!

06/29/2009 12:09
 
facos said:

Hi Dan,

the library is great, please keep up the good work!

Is it possible to add custom buttons (eg pushpin button -> to keep the window at the topmost) to the dialog titlebar? if so, how?

thanks!

06/27/2009 01:06
 
cyrus said:

Hi all!
Very good work!

I have a some little problems with this control and any help will be appreciated.
How can I hide the cross close button (when I set IsCloseEnabled to false it is displayed in the disabled state)?
How can I position a dialog in the center of the viewport, but retaining it's draggable behavior? All the methods I've tried, position the dialog as needed but it's not draggable anymore.
Thanks!

06/26/2009 06:14
 
otamayo said:

Hi Dan,

Found a workaround; if I simply set the height of the dialog within the XAML to a small value 10; I can then dynamically change the height by setting the ExpandedHeight and calling Expand() before I call the ShowAsModal() method.



06/18/2009 06:32
 
otamayo said:

Hi Dan,

Is there a way to resize a modal dialog after it has been displayed/closed?
For example, I display a modal dialog, the user clicks on the close button and the dalog is closed. After an action the dialog is displayed again using ShowAsModal method; however, there is additional information displayed, the dialog will always remain the same size as originally displayed; setting the height doesn't work and setting ExpandedHeight calling Expand() doesn't work either. Any help would be greatly appreciated.

06/18/2009 05:55
 
shlsoft said:

very useful

06/11/2009 03:04
 
vitthalgb28 said:

how can i make the pop up dialog draggable
what code should do?

06/11/2009 02:31
 
vitthalgb28 said:

what could be the value of the property "TopLeft =     "
is it integer or something else like has define somewhere

06/11/2009 12:21
 
kramer1982 said:

Hi Dan,

I think there is a problem when minimizing a modal dialog, the parent panel is not enabled... maybe there should be an EnableParent when minimizing a modal dialog (unless of course there are other modal dialogs behind it) and a DisableParent when the modal dialog is restored.

06/05/2009 01:52
 
Apavl said:

Hi Dan!
I'm using your popup and i'd like to know how can i create Dialog with Width=Auto and Height=Auto ?

06/01/2009 01:32
 
dan said:

Hi carbonusa,

You can customize the XAML template, the default style can be found on the visual customization page. Thanks!

05/14/2009 08:55
 
dan said:

Hi mathoc,

You should certainly be able to inherit from the control, the problem you will have is that you will need to provide your own XAML style or you could try in the constructor of the derived class:

DefaultStyleKey = typeof(Dialog);

This will use the default style template. Hope this helps!

05/14/2009 08:53
 
carbonusa said:

I am creating a popup in code:
moLinkDialog = new Liquid.Dialog()
                {
                     Title = "New HiperLink",
                     Content = gridLink,
                     Width = 600,
                     Height = 300,
                     Buttons = Liquid.DialogButtons.OK | Liquid.DialogButtons.Cancel,
                     IsModal = true
                };

How do I change the look and feel of the popup window (i.e. Title Color, Background etc)?
Also, I want the buttons to show as OK CANCEL but they show up as CANCEL OK

05/14/2009 06:47
 
Eliandul1 said:

¿this control have scrollbars?

05/13/2009 02:05
 
mathoc said:

sorry, submitted to early ... addition to my last post:

so, even with this class without any modifications i was not able to use it.
every time i use MyDialog the application exits.

is it not possible to derive from your control? if yes, why?

05/06/2009 02:47
 
mathoc said:

Hi Dan,
looks like i cannot derive from Dialog. If i use my derived class the application exits immediately without any usefull information on the call stack.
I tried to remove all the stuff from my derived class so that in the end i had a class definition without any content :
MyDialog : Dialog {}

05/06/2009 02:46
 
borech said:

Thank you very much, WolveFred! It works now for me.

04/29/2009 09:00
 
Anu said:

Hi Dan,

Thanks for developing these cool controls.

The is no reference/documentation for the Silverlight Popup Dialog. When are you coming up with it?

04/28/2009 02:29
 
dan said:

Hi Ryan,

It is a property that has no implementation and has been in there for a while now until I can get around to put the code in there to expand down/up. I'll see if it can be implemented in the next version... Thanks!

04/21/2009 11:30
 
dan said:

Hi WolveFred,

Yes. Setting Modal=true means the dialog cannot be resized and (with the right properties set) not allow the user to click off the dialog. Thanks!

04/21/2009 09:15
 
rfellers said:

Hey Dan,

I have a question about the expanded state on the dialog control. First off, I can set ExpandedWidth and call Expand() without any problems (the dialog expands with the animation). However, when I set ExpandedHeight and call Expand(), nothing happens. Am I missing something or is this a bug? Any help would be great!

Thanks!

04/13/2009 01:42
 
rfellers said:

Hey Dan,

I have a question about the expanded state on the dialog control. First off, I can set ExpandedWidth and call Expand() without any problems (the dialog expands with the animation). However, when I set ExpandedHeight and call Expand(), nothing happens. Am I missing something or is this a bug? Any help would be great!

Thanks!

04/13/2009 01:31
 
WolveFred said:

About the problem described by borech at 03/18/2009, I can answer him.

Placing the popup inside a grid which contains also a button (click on the button => opening of dialog), doesn't work with modal dialog and causes your exception. See the example provided on this page : the ShowAsModal() doesn't work.

The solution is to place the dialog inside a Canvas instead of the Grid. Eventually place the grid and the dialog inside the canvas. And that's working.

04/10/2009 02:20
 
WolveFred said:

Hi dan,
Is it normal that we can't resize the dialog when we use the modal mode instead of the normal mode ?

04/09/2009 05:54
 
dan said:

Hi Adrian,

Could you post the XAML you have for your Dialog? Also, is it contained within a Grid or Canvas?

04/04/2009 02:13
 
adrianhara said:

Hi Dan,

Thanks a lot. One more suggestion, if I may: it would be cool if the properties of various controls would be backed by DependencyProperties. This way their values could be extracted in styles, keeping the clutter out of the markup.

Thanks! :)

04/01/2009 03:44
 
dan said:

Hi Adrian,

Thanks for your comments. It appears to be a bug which I'll get added to our fix list for the next version. Thanks!

03/30/2009 09:59
 
adrianhara said:

Hi Dan,

Very cool control, however I have a problem: if i set the StartPosition to "Manual" and the Top"Left value, then the popup always appears at (0,0) and is not draggable. If I don't set StartPosition to "Manual" and only set the TopLeft property, then it is draggable, but it doesn't appear where TopLeft indicates.

Any ideas?

03/27/2009 02:12
 
dan said:

Hi pheideman,

Sure, there are three properties that control the visibility of the title bar buttons:

IsCloseEnabled
IsMinimizeEnabled
IsMaximizeEnabled

Hope this helps!

03/25/2009 08:27
 
pheideman said:

Hi Dan,

Love the controls! Great work. How do I handle the display of minimize/maximize/close buttons in the title bar? Depending on the usage, some or all of these buttons may need to be removed.

03/25/2009 07:28
 
borech said:

Hi, I've just updated version from 5.1.5 to 5.1.8 and got many crashes. It tells:

MS.Internal.XcpImports.CheckHResult(UInt32 hr)
    at MS.Internal.XcpImports.SetValue(INativeCoreTypeWrapper obj, DependencyProperty property, Int32 i)
    at MS.Internal.XcpImports.SetValue(INativeCoreTypeWrapper doh, DependencyProperty property, Object obj)
    at System.Windows.DependencyObject.SetObjectValueToCore(DependencyProperty dp, Object value)
    at System.Windows.DependencyObject.SetValueInternal(DependencyProperty dp, Object value, Boolean allowReadOnlySet, Boolean isSetByStyle, Boolean isSetByBuiltInStyle)
    at System.Windows.DependencyObject.SetValueInternal(DependencyProperty dp, Object value)
    at System.Windows.DependencyObject.SetValue(DependencyProperty dp, Object value)
    at Liquid.DialogBase.DisableParent()
    at Liquid.DialogBase.ElementFadeIn_Completed(Object sender, EventArgs e)
    at System.Windows.CoreInvokeHandler.InvokeEventHandler(Int32 typeIndex, Delegate handlerDelegate, Object sender, Object args)
    at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, String eventName)

Seems it happens after ShowAsModal for dialog. After changing ShowAsModal to Show everything works ok. Do you know what could cause a crash?

03/18/2009 09:22
 
dan said:

Hi jbahnick,

Thanks for your post and I'm glad you like these controls :) Basically its a technical reason why the background changes after the Popup is displayed, and looking at the code this behavior cannot be changed in the current version but I will get this added to the list of improvements for the next version. Thanks!

03/16/2009 07:28
 
jbahnick said:

Hi Dan,

Love the popup control and look forward to using other controls in my future apps.

When the popup is used as a modal, it seems that the modal pops up and then the opacity of the background (page behind the modal) changes automatically. I would like use animation to change the opacity and would like it to happen before the popup is shown.

Is this possible with the current properties of the popup? If not, is there a way to cancel/override the change in opacity so I can implement my own?

03/16/2009 01:22
 
jbahnick said:

Hi Dan,

Love the popup control and look forward to using other controls in my future apps.

When the popup is used as a modal, it seems that the modal pops up and then the opacity of the background (page behind the modal) changes automatically. I would like use animation to change the opacity and would like it to happen before the popup is shown.

Is this possible with the current properties of the popup? If not, is there a way to cancel/override the change in opacity so I can implement my own?

03/16/2009 01:15
 
dan said:

Hi sgentile,

Thanks for your contribution and I'm glad you like these controls! The easiest way is to use the following properties:

TitleBarBackground
Background

You can set these properties in XAML or C# the same way as any other property.

Unfortunately there is no property for controlling the button styles however it is something we will get added to the next version.    Thanks!

02/27/2009 06:55
 
sgentile said:

Fantastic work - thank you

What is best approach to styling the popup?

ie. the title bar background and the dialog background, and buttons ?

Thanks again, your library has really helped me out and it's very appreciate that it's offered for free.

02/27/2009 12:04
 
e.beckers said:

Hi

I made a simple popup dialog which contains a datagrid which shows a list of databinded items.
When i remove the first item (in code) the datagrid refreshes but shows a screwed up list where most of the times
the 1st row is just empty. This code works fine when not using it in a popup dialog so i was wondering if the dialog
class is to blame..

xaml of the popup dialog:

<liquidPopup:Dialog x:Name="dialog" StartPosition="Manual" Width="800" Height="400" Title="Shortcuts" Closed="FormClosed"     >
                <data:DataGrid x:Name="datagrid" AutoGenerateColumns="False" Width="780" Height="380">
                     <data:DataGrid.Columns>
                         <data:DataGridTemplateColumn Header="" >
                                <data:DataGridTemplateColumn.CellTemplate>
                                     <DataTemplate>
                                         <Image Source="{Binding Thumbnail}" ImageFailed="Image_ImageFailed"></Image>
                                     </DataTemplate>
                                </data:DataGridTemplateColumn.CellTemplate>
                         </data:DataGridTemplateColumn>
                         <data:DataGridTextColumn Header="Type" Binding="{Binding Type}" IsReadOnly="True" />
                         <data:DataGridTextColumn Header="Name" Binding="{Binding Name}" IsReadOnly="True" />
                         <data:DataGridTemplateColumn Header="" >
                                <data:DataGridTemplateColumn.CellTemplate>
                                     <DataTemplate>
                                         <Button Click="OnDeleteShortcut" Tag="{Binding IdNode}" ToolTipService.ToolTip="Delete shortcut" >
                                                <Image Source="/images/delete_button.png"></Image>
                                         </Button>
                                     </DataTemplate>
                                </data:DataGridTemplateColumn.CellTemplate>
                         </data:DataGridTemplateColumn>
                         <data:DataGridTemplateColumn Header="" >
                                <data:DataGridTemplateColumn.CellTemplate>
                                     <DataTemplate>
                                         <Button Click="OnEditDocument" Tag="{Binding IdNode}" ToolTipService.ToolTip="Goto selected document" >
                                                <Image Source="/images/edit.png" ImageFailed="Image_ImageFailed"></Image>
                                         </Button>
                                     </DataTemplate>
                                </data:DataGridTemplateColumn.CellTemplate>
                         </data:DataGridTemplateColumn>
                     </data:DataGrid.Columns>
                </data:DataGrid>
         </liquidPopup:Dialog>


"C#" code of deleting the item:
datagrid.ItemsSource = Shortcuts;//shortcuts is of observablecollection
....
....
Shortcuts.RemoveAt(0); // delete the first item
...
... now datagrid refreshes, but result is that 1st row is empty instead of being deleted

02/11/2009 10:28
 
dan said:

Hi jpnoir,

Excellent, thank you for sussing this out, the fix will be implemented for the next version. Thanks again!

02/04/2009 10:30
 
jpnoir said:

I experimented with the modality issue a little bit more - it does work if the Dialog is contained inside a Canvas but not if it's contained inside a Grid.

I peeked a bit at the code with Reflector and observed that in DisableParent() you check to see if the immediate parent of the Dialog control is a Canvas. If not, you don't try to disable the parent. Perhaps you meant "Panel" instead of "Canvas" so that Grids and other layout panels could work as modal dialog hosts.

Anyway, keep up the good work!

02/04/2009 05:19
 
hunterb46 said:

I'm having the same problem with 5.1.6, no matter what i do(set the flag or call ShowAsModal, it doesn't display modal.

02/04/2009 03:39
 
dan said:

Hi tonycai,

We will investigate this further and let you know how we get on. Thanks!

02/04/2009 01:03
 
dan said:

Hi Romain,

I think we can certainly add the method you've described in the next version, with regards to the cross close button, this may be a bug which we will look at and fix if necessary. Thanks!

02/04/2009 12:59
 
tonycai said:

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:liquidPopup="clr-namespace:Liquid;assembly=Liquid.Popup"
mc:Ignorable="d"
x:Class="SilverlightApplication1.TestDialog">
     <Grid>
         <Canvas VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
         <TextBox x:Name="txtName" Text="test" Margin="48,72,64,72" d:LayoutOverrides="Height" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100"/>
         <Button x:Name="showDialog" Content="Show Dialog" Width="88" Height="20" Click="ShowDialog_Clicked" Background="#FF531F2D" Margin="40,44,0,0" />
         <liquidPopup:Dialog x:Name="areYouSure" Width="200" Height="180" Title="Are you sure?" Closed="AreYouSure_Closed">
                <TextBlock x:Name="messageText" 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." />
         </liquidPopup:Dialog>
         </Canvas>
     </Grid>

</UserControl>


when I call ShowAsModal(), it works like Show(). My dll's version is 5.1.6. Can you tell me what is the problem ?

02/04/2009 09:40
 
RomainP said:

In fact, it just seems that Close() doesn't change the Result, and we get the Result from the previous time the dialog was closed. Is there a reason why closing the Dialog using the cross doesn't change the Result?

02/03/2009 11:30
 
RomainP said:

Hi,

This control gets better and better with time!

Just a small request for the next release: could we have another Close() method that takes a DialogButtons parameter? We have a few dialogs closing themselves or being closed by the main app, and it would be very useful to specify which button we are emulating. A typical example is an "input" dialog, where pressing OK in the TextBox validates the input (instead of pressing OK).

For the moment, even if we force dialog.Result = DialogButtons.OK, it seems that calling Close() resets the value to "None".


Thanks,

Romain

02/03/2009 10:33
 
dannychung said:

thanks, It works.

02/01/2009 10:38
 
dan said:

Hi,

If you are using version 5.1.5 or above then the parent element of your Dialog (Canvas in your case) must have either a Width/Height specified or HorizontalAlignment/VerticalAlignment="Stretch". Hope this helps!

02/01/2009 08:49
 
dannychung said:

     <Grid x:Name="LayoutRoot" Background="White" Width="1024" Height="768">
         <Canvas>
                <Grid>
                     <Grid.RowDefinitions>
                         <RowDefinition Height="48"></RowDefinition>
                         <RowDefinition Height="*"></RowDefinition>
                     </Grid.RowDefinitions>

                     <Canvas x:Name="MenuItem_cvs" Grid.Row="0" Background="Silver"></Canvas>
                     <Canvas x:Name="MainArea_cvs" Grid.Row="1" Background="Coral" Canvas.ZIndex="0">
                         <data:DataGrid x:Name="Company_dgd" AutoGenerateColumns="True" Width="1024" Height="720" GridLinesVisibility="All">
                                <data:DataGrid.Columns>
                                     <data:DataGridTextColumn Header="Column 1" IsReadOnly="True" Binding="{Binding Path=CompanyCode}"></data:DataGridTextColumn>
                                     <data:DataGridTextColumn Header="Column 2" IsReadOnly="True" Binding="{Binding Path=CompanyName}"></data:DataGridTextColumn>
                                </data:DataGrid.Columns>
                         </data:DataGrid>
                     </Canvas>
                </Grid>
         </Canvas>
         <Canvas x:Name="Create_cvs" Canvas.ZIndex="2">
                <!--<Button Content="Hello"></Button>
                <liquid:Dialog x:Name="Create_dlg" Width="300" Height="300" StartPosition="CenterParent">
                     <liquid:Dialog.Content>
                         <StackPanel x:Name="test_spl" Width="auto" Height="auto"></StackPanel>
                     </liquid:Dialog.Content>
                </liquid:Dialog>-->
         </Canvas>
     </Grid>

when I call Create_dlg.ShowAsModal(), it works like Show(). My dll's version is 5.1.5.7615. Can you tell me what is the problem ?

02/01/2009 06:04
 
dan said:

Hi Sean,

Thanks for that, we'll do some more tests and let you know if we come reproduce the problem here. Thanks!

01/30/2009 11:34
 
sean.riedel said:

Sure. Here it is:

<Style x:Name="DialogBoxStyle" TargetType="liquid:Dialog">
                <Setter Property="Background">
                     <Setter.Value>
                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF5D78CE"/>
                                <GradientStop Color="#FFD7DBE8" Offset="0.799"/>
                         </LinearGradientBrush>
                     </Setter.Value>
                </Setter>
                <Setter Property="BorderBrush" Value="#888888" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="TitleForeground" Value="#ffffff" />
                <Setter Property="ShadowBrush" Value="#888888" />
                <Setter Property="TitleBarBackground">
                     <Setter.Value>
                         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop Color="#626C88" Offset="0.0" />
                                <GradientStop Color="#393F4D" Offset="0.5" />
                                <GradientStop Color="#151516" Offset="0.5" />
                                <GradientStop Color="#3C476F" Offset="1.0" />
                         </LinearGradientBrush>
                     </Setter.Value>
                </Setter>
                <Setter Property="TitleBarBorderBrush" Value="#7A8295" />
                <Setter Property="TitleBarBorderThickness" Value="0.5" />
                <Setter Property="CornerRadius" Value="2" />
         </Style>

01/29/2009 07:07
 
dan said:

Hi Sean,

Thedeclaration of your Dialog seems fine, as does the Canvas it is contained within, however I did notice you have a custom style on your dialog, could you post that here or email it as well? Thanks!

01/27/2009 06:56
 
sean.riedel said:

Hi Dan,
I was using 5.1.4, however upgrading has not fixed my issue.
My dialog is defined as follows:

<liquid:Dialog x:Name="ShapeProperties" Canvas.Top="101" Canvas.Left="157" Width="250" Height="420" Title="Shape Properties" BottomRight="10000,10000" Canvas.ZIndex="10" Closed="ShapeProperties_Closed" d:IsLocked="True" Style="{StaticResource DialogBoxStyle}">


My direct parent element is a canvas:
<Canvas x:Name="canvas1" Background="White" Height="520" Width="596" Grid.Row="3" Grid.Column="1" Margin="8.438,28.5,8,11.5">


However that Canvas (canvas1) is inside of a Grid element:
<Grid x:Name="LayoutRoot" Width="1348" Height="940">

01/26/2009 06:06
 
dan said:

Hi Sean,

I've tried to replicate this and have been unsuccessful. Can you verify you are using version 5.1.5? In my test I had a user control with the following XAML:

<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="600" Height="300">
     <Canvas>
         <liquid:Dialog x:Name="areYouSure" Width="200" Height="180" Title="Are you sure?">
                <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." />
         </liquid:Dialog>
     </Canvas>
</UserControl>

And the C# as:

using Liquid;

namespace PopupDialog
{
     public partial class Page : UserControl
     {
         public Page()
         {
                InitializeComponent();
                areYouSure.ShowAsModal();
         }
     }
}

In this example the dialog is displayed. Is all your processing happening after the InitializeComponent(); call in your User Control's constructor?

Does your Dialog have any properties specified other than the ones used in the above example?
What kind of parent element does your Dialog use, such as Canvas or Grid?
Does the parent element have a Width/Height specified?

01/23/2009 10:03
 
sean.riedel said:

I have been having good success with your controls so far. I have a canvas that I dynamically add controls to based on users clicking buttons. Each new controls click event is given an event handler. This event handler calls the .ShowAsModal() event on your control to show a dialog box. This all works great.

Users can also save the layout of their canvas. This save just writes a text file describing out the controls on the canvas and their layout. During the load I read this file and add in the controls in the same way as the initial add including adding the event handler that calls the popup dialog. However after the load, the popup dialog does not show. The event gets called and the .ShowAsModal() gets called but the dialog does not appear. Any ideas? Thanks!

01/22/2009 10:37
 
slugster said:

Dan, thanks heaps, much appreciated. I was missing the LayoutRoot.Children.Add() call - now i have a nice popup notes editor. Once again, great control :)

01/22/2009 03:00
 
dan said:

Hi Slugster,

Thanks for your comments, building a popup in C# is fairly straigt forward, the example below is the Code Behind for a newly created User Control, the XAML file contains only the standard Grid control:

using Liquid;

public partial class Page : UserControl
{
     private Dialog _dialog;

     public Page()
     {
         InitializeComponent();

         CreateDialog("My Silverlight Application", "My popup!");
         _dialog.Show();
     }

     private void CreateDialog(string title, object content)
     {
         _dialog = new Dialog()
         {
                Title = title,
                Content = content,
                Width = 200,
                Height = 200,
                Buttons = DialogButtons.OK | DialogButtons.Cancel
         };

         LayoutRoot.Children.Add(_dialog);
     }
}

As you can see you can assign any content by setting the Content property, this example is simple text, however you can assign something like a Grid or Canvas and have whatever content you need in these containers.

It is important you give the Dialog a Width and Height, setting the Buttons property is optional.

The method of displaying a dialog is: _dialog.Show();

Hope this helps!

01/21/2009 12:40
 
slugster said:

Your popup looks really good. I have one question that you almost answered earlier: how do you invoke the popup directly from code? I have a user control that is entirely in C#, no xaml, and i want to invoke the popup in response to a click event. Can this be done? Thanks :)

01/21/2009 04:02
 
dan said:

Hi VR2,

This should be fixed in version 5.1.5, can you advise if your dialog is placed in a Canvas control? If so, what are the dimensions of the Canvas? Thanks!

01/12/2009 10:25
 
VR2 said:

I just downloaded your controls, downloaded your Popup Dialog example, removed the TopLeft property, reset the reference to the Liquid.dll, Compiled & ran it...Clicked the button, showed the dialog (looks nice) maximized it - it threw an exception.

Any ideas?

01/08/2009 06:15
 
dan said:

Hi mwieder,

At the moment the parent of a Dialog must be a Canvas if you want to be able to drag the popup around, if it is placed in a Grid it will still display but will not be moveable. We are looking to improve on this in the next version, however, due to the fact that we need to use absolute positioning to move the dialog around the parent, for now, must be a Canvas. If this hasn't answered your question, perhaps you could post some example XAML to show the structure of you Wizard page? Thanks!

12/30/2008 12:56
 
dan said:

Hi mithilesh,

If your user control is in a popup then the user controls Parent property should be the popup, simply cast this to a Popup and call the close method with something like this from your user control:

((Popup)Parent).Close();

Hope this helps!

12/30/2008 12:51
 
mwieder said:

Must the PopupDialog be the immediate child of the Canvas control? I have a scenario where I have a wizard application and on one of the pages, I need a button to open a Modal Popup dialog. If I make just that Wizard Page the Canvas (so that the immediate child is the Popup), then the Next and Previous buttons on the Wizard object are still clickable when the Popup is opened.

12/30/2008 06:30
 
mithilesh said:

Hey Dan,

Now I am facing another problem.
I have placed a user control in pop up dialog tag. User control page has a cancel button. When clicked on it I want to close whole pop up control but its not closing :(
How to do that????

Thanks in advance...

12/19/2008 02:46
 
mithilesh said:

Thanks Dan it worked ;)

12/19/2008 02:05
 
dan said:

Hi,

The Dialog control must be placed in a Canvas. Is your popup in a Canvas? If so, you need to ensure the Canvas has a Width and Height values set. In the next version of the controls library you will not need to specify these. To make a dialog Modal you must either specify IsModal=true or call ShowAsModal() when displaying your dialog. Thanks for the post!

12/18/2008 03:14
 
mithilesh said:

Hi Dan,
             I am not able to drag pop up control what can be the problem???
             and also pop up is not modal I can click button or edit text box.....

12/18/2008 05:15
 
dan said:

Hi grinmonkey,

Thanks for reporting this, it seems that in the recent update the TopLeft property has been lost from the XAML property list, but can still be set in C#:

myPopup.TopLeft = new Point(-10000, -10000);

I've added this to the fix list for the next version. Thanks!

12/16/2008 01:12
 
grininmonkey said:

After updating my Liquid reference to the 5.1.4 version.... the TopLeft and BottomRight fix seems to be broken... and it seems the TopLeft property no longer exists?

12/16/2008 12:42
 
dan said:

Hi phoenixx,

Thanks for that, it appears this happens on a few machines and we have fixed it now. Thanks again!

12/15/2008 12:38
 
phoenixx said:

Hi, demo on http://www.vectorlight.net/liquid_silverlight_controls_demo.aspx throws Invalid Type cast exception on Application startup.

12/15/2008 02:10
 
dan said:

Hi aigoin,

Just for you I have done an article on having a User Control as the content in a popup dialog, click here to read it. Ensure you have the latest version of the controls library. Hope it helps!

12/14/2008 09:07
 
aigoin said:

Hi.
How to add a usercontrol as the content of a dialog box into the code behind?
I mean i want to do a something like that
<Liquid:Dialog>
<MyControl:MycontrolName></MyControl:MycontrolName>
</Liquid:Dialog>
but into the code behind


Thank you by advance for your answer.


12/10/2008 12:20
 
dan said:

Hi Tiradentes,

Thanks for the post, check out version 5.1.3, the buttons have now been changed to take any element as content rather than just text. For example to customize the OK button set the Dialog.YesButtonContent property.


Hi drysg,

Thanks for your post. Taking your points in turn:

1. This issue has been fixed in version 5.1.3. Now when a dialog is resized the content is also resized.
2. This may be possible in the future, at the moment it cannot be done mainly due to the controls containing standard controls such as buttons etc which themselves do not have a clone method.
3. We will implement a setting in the next version to controls the border grip width and also look to add the triangle grip you mention.

Thanks!

11/29/2008 08:08
 
Tiradentes said:

Looks great, just one (important) detail:
Using styles, I can't set the 'Content' property on 'ElementOK', only on 'ElementCross' (both are buttons).
Do you plan to implement this feature?

11/22/2008 02:38
 
drysg said:

Just tried out 5.1.2 of PopUpDialog

1. Your tools are a great asset. And your business model (developer try, then buy) works perfect for us.

I am embedding a usercontrol with an msi in the popup. I have the following issues

1. When the usercontrol is in the top level page, then the MSI stretches to fill the space I give it. But in the PopUp Dialog, I can resize the dialog, but the usercontrol (and contained MSI) do not stretch. Suggestions?

2. I would like to have the button action that spawns the popup create a new copy each time. Right now it can only create and destroy a single non-modal popup. I was hoping there is a method to do something like MyDialog.Clone().Show()

3. I have been unsuccessful in using the style to create a wider border for the dialog (element shadow?). We have users that are older (like me!) and I am having a lot of trouble finding the resizeable edge. Have you considered something like the Windows GUI resize (triangle in the corner).


<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
xmlns:shinyRed="clr-namespace:Microsoft.Windows.Controls.Theming;assembly=Microsoft.Windows.Controls.Theming.ShinyRed"
mc:Ignorable="d"
xmlns:QBI2="clr-namespace:QBI2"
x:Class="QBI2.PopUpMapPanel" d:DesignHeight="613" x:Name="NewMapTemplate" Width="778">

<shinyRed:ShinyRedTheme ApplyMode="Auto">
<Canvas x:Name="LayoutRoot">
<Button HorizontalAlignment="Left" Margin="0,0,0,0" Width="71" Content="New Map" x:Name="PopUpButton" FontFamily="Arial" FontSize="14" FontWeight="Normal" Height="28" VerticalAlignment="Top"/>
             <liquid:Dialog x:Name="MapPopUp" Resizable="True" IsModal="False" Canvas.Left="-300" Canvas.Top="50"
Width="200" Height="200" Title="Map Pop Up"
TopLeft="-10000,-10000" BottomRight="10000,10000" Canvas.ZIndex="1" MaxSize="1200,1200"
Buttons="OK">
<QBI2:ZoomPanel />
             </liquid:Dialog>
</Canvas>
</shinyRed:ShinyRedTheme>
</UserControl>

zoomPanel looks like this:

<Grid x:Name="LayoutRoot">
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderThickness="2,2,2,2" BorderBrush="#FF000000" RenderTransformOrigin="0.5,0.5" x:Name="border">
<MultiScaleImage x:Name="msi" Source="map/GeneratedImages/dzc_output.xml" Height="Auto" Width="Auto"/>
</Border>
</Grid>
</UserControl>

11/19/2008 07:44
 
robp said:

Hi again,

problem solved; I was using an older version of Liquid Controls (5.1.0). Browsing this website, I found a new version 5.1.1 (dated november 6th) was available for download which did the trick !

I'm sorry for the inconvenience...

Rob.

11/17/2008 02:29
 
robp said:

Hi Dan,

Unfortunately the example code does not work; I copied it 'as is' to my XAML page for customizing it later on, but it keeps saying the popup dialog cannot contain content. My XAML page is shown below (I hope it will be well-formatted).

Rob.


<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="Config.Page"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
     Width="800" Height="600" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
     <Grid x:Name="LayoutRoot" Background="White">

     <Grid.RowDefinitions>
     <RowDefinition Height="0.03*"/>
     <RowDefinition Height="0.035*"/>
     <RowDefinition Height="0.935*"/>
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
     <ColumnDefinition Width="0.024*"/>
     <ColumnDefinition Width="0.029*"/>
     <ColumnDefinition Width="0.921*"/>
     <ColumnDefinition Width="0.026*"/>
     </Grid.ColumnDefinitions>
     <Rectangle Grid.Column="1" Grid.Row="1" RadiusX="10" RadiusY="10" Fill="#FF191970" Stroke="#FF000000" Grid.ColumnSpan="2"/>
     <TextBlock HorizontalAlignment="Left" Margin="-15,0,0,0" Width="345" Grid.Column="2" Grid.Row="1" FontSize="14" Foreground="#FFFFFFFF" Text="Configuration page" TextWrapping="Wrap"/>
     <TextBlock HorizontalAlignment="Right" Margin="0,0,8,0" x:Name="TextBlock_ConnectionState" Width="202" Grid.Column="2" Grid.Row="1" TextWrapping="Wrap" Foreground="#FFFFFFFF" Text="Idle" FontSize="14" />
         <TextBlock Height="17" HorizontalAlignment="Left" Margin="0,29,0,0" VerticalAlignment="Top" Width="150" Grid.Column="2" Grid.Row="2" Text="Web servers:" TextWrapping="Wrap"/>
         <data:DataGrid x:Name="DataGrid_WebServers" Width="300" Grid.Column="2" d:LayoutOverrides="Width" Grid.Row="2" HorizontalAlignment="Left" Height="150" VerticalAlignment="Top" Margin="0,46,0,0" AutoGenerateColumns="False" BeginningEdit="DataGrid_WebServers_BeginningEdit" KeyDown="DataGrid_WebServers_KeyDown" />
         <Button Height="20" HorizontalAlignment="Left" Margin="0,200,0,0" VerticalAlignment="Top" Width="100" Grid.Column="2" Grid.Row="2" Content="Save" x:Name="Button_SaveWebsites" Click="Button_SaveWebsites_Click" IsEnabled="False"/>
         <Button Height="20" HorizontalAlignment="Left" Margin="104,200,0,0" VerticalAlignment="Top" Width="100" Grid.Column="2" Grid.Row="2" Content="Cancel" x:Name="Button_CancelWebsites" Click="Button_CancelWebsites_Click" IsEnabled="False"/>

         <Canvas>
                <liquid:Dialog x:Name="areYouSure" Canvas.Left="250" Canvas.Top="250" Width="200" Height="180" Title="Are you sure?" TopLeft="-10000,-10000" BottomRight="10000,10000" Canvas.ZIndex="1" Closed="AreYouSure_Closed">
                     <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>
         </Canvas>
        
     </Grid>
</UserControl>

11/17/2008 12:19
 
dan said:

Hi robp,

Does the above example work wor you? The Dialog control can take 1 piece of content which is usually a layout control such as a Canvas or StackPanel etc. Could you post your XAML?

11/16/2008 08:16
 
robp said:

Hi,

When I try to populate the PopupDialog from within the xaml page (as in the example on top of this page), I keep getting the error 'The type 'Dialog' does not support direct content'.
The only way to populate the dialog is coding it in the code behind page, but I want the layout being defined in the xaml page...

Can you please help me out ?

For your information; I am using SilverLight version 2.0.31005.0.

11/14/2008 07:10
 
dan said:

Hi,

Yes, this has been reported, the Popup dialogs have all been modified to inhertit from a singular base control which has led to this problem. It will be fixed and an updated dll made avalaible in the next few days. Thanks!

11/06/2008 03:46
 
rshelby said:

I just installed the latest version (5.1.1) and noticed none of the closed events are being triggered. Everything seemed to work okay in 5.1.0.

Thanks!

11/06/2008 01:41
 
timeseller said:

巍峨发

10/29/2008 08:44
 
nlecren said:

I am using the latest build and cannot seem to get the Apply event to fire

10/25/2008 11:22
 
dan said:

Hi Pratik,

Thanks for reporting this, it is a bug and we will look to get this fixed soon!

10/16/2008 03:06
 
tpratik said:

Hi,

I have one problem...
I have placed my custom control in dialog box.
Now i want to close parent dialog box from the custom control.
I have called dialog.close() method.
And it is closed... but I have added "closed event" to dialog, which is not being called from .close() method.
I need to click on close button compulsory for that.

Help me here...
Because i need to validate my control before closing the dialog box...

Regards
Pratik

10/10/2008 06:23
 
dan said:

Hi,

You can customize the Popup Dialog using the standard Silverlight 2 method of using styles. The default style can be found here. There are plenty of articles out there on using styles, but let us know if you need any further help!

09/11/2008 10:43
 
dan said:

Hi Jonathan,

After the line: RichTextBox rtb = (RichTextBox)composeMessage.FindName("richTextBox");

Is rtb null? Are you adding the RichTextBox to the Dialog in XAML or C#?

The FindName() method should return the object, however if not we will need to investigate further. Thanks!

09/11/2008 10:39
 
Vova Vadyak said:

Hi, How to change background color under title?

09/11/2008 06:15
 
jmiller said:

Great controls!!

Having an issue with a RichTextBox inside a popup dialog. In .cs, getting "Object reference not set to an instance of an object." when trying to access the control.

Error: richTextBox.Text="my text";

No error: RichTextBox rtb = (RichTextBox)composeMessage.FindName("richTextBox");

Any ideas? Thanks!

09/08/2008 07:38
 
dan said:

Hi,

Thanks for reporting this, we will take a look at this soon!

08/29/2008 10:11
 
gsnerf said:

Obviously it really was an issue having the Liquid:PopupDialog inside a silverlight Popup. I put up a canvas specifically for the popup and it seems to work now.

08/29/2008 06:44
 
gsnerf said:

Hi there,

I have little trouble with this control. I have a PopUp with a TextBox inside, after opening/closing it a few times the TextBox inside istn't editable anymore. I have double and tripplechecked that the control is not set to ReadOnly, so I assume it's a PopupDialog dependant problem. I call the Popup with ShowAsModal().
As we don't use Canvas to layout we wrapped the Dialog in a Silverlight Popup (System.Windows.Controls.Primitives.Popup) to se the dialog above the other controls, may that cause a Problem like that?

08/29/2008 01:24
 
dan said:

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!

06/25/2008 01:32
 
alex.jarnoux said:

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!

06/25/2008 01:28
 
dan said:

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!

06/20/2008 11:37
 
mfrklicDRI said:

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!

06/20/2008 03:48
 
rparsons said:

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.

06/03/2008 02:11
 
dan said:

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!

05/30/2008 04:06
 
SilverlightGeek said:

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!

05/30/2008 03:24
 
dan said:

Hello,

Do you have an example project with this problem that you could email?

05/29/2008 04:50
 
arshadm said:

Dan,

When can I call testPopup.FindName("myControl"). I have tried straight after a testPop.Show() but the value returned is null.

05/28/2008 12:52
 
dan said:

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!

05/27/2008 04:59
 
arshadm said:

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?

05/24/2008 03:55
 
dan said:

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!

05/23/2008 12:06
 
jmcfet said:

I found my problem, I downloaded the latest version and see that the Listbox is now ListboxPlus .... nice

05/22/2008 01:16
 
jmcfet said:

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

05/22/2008 11:05
 
dan said:

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!

05/13/2008 12:10
 
omnius said:

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.

05/12/2008 09:21
 
dan said:

Hello,

Not at the moment, we have added this as a future request and should make the next version!

05/06/2008 12:05
 
quintorel said:

Is possible change the window color?

For example, the tittle bar is always purple, is possible change this color?

Thanks

04/30/2008 05:20
 
dan said:

Hello,

This has been added to the list of fixes for the next version, thanks for reporting it!

04/18/2008 11:59
 
thumphries said:

If you place a Dropdownlois on a popup. The buttons will render over the list that drops down.

04/18/2008 02:27

Silverlight 3

Latest News

  • Silverlight 2 Controls V5.2.1 Released
    Jul, 03 2009

    After several months since the last release we have implemented many fixes to the controls library. The Rich TextBox has been improved with Links...

  • Silverlight 3 BETA Controls Released
    Mar, 30 2009

    As Silverlight 3 BETA is available now to test we thought we would present the Liquid Controls library for Silverlight 3. This BETA...

Silverlight 2 Controls

  • Rich TextBox

    Create and edit rich content with this slick and expandable Rich TextBox...

  • TreeView

    This easy to use TreeView comes with drag and drop, sorting, searching and much more...

  • Context Menu

    You too can have cool popup context menus in your Silverlight applications...

  • Resizable Dialog

    Draggable and resizable popup dialogs are what serious Silverlight developers need...

  • Spell Checker

    Real-time spell checking in Silverlight? We did it first here...