Latest News

  • Silverlight Online Chat
    Jul 24, 2010

    Today we launch the new Silverlight Live Chat application demonstrating the Liquid RichTextBox and Emoticon replacements.

  • New Super Shoot Em Up 2 Game
    Jun 29, 2010

    Added to the Games section is the new Super Shoot 'Em Up 2 game. Take control of your tank with the aim to defeat the computer controlled opponents. Features all new weapons, levels and Battle Mode!

  • Silverlight 4 Controls V5.3.2 Released
    Jun 28, 2010

    This release contains several fixes raised in the forums.

  • New Sandmania Puzzle Game
    Jun 18, 2010

    Sandmania is the latest game from vectorlight, the aim of this game is to guide sand from the top of the screen to the various colored containers below.

  • New Moon Tower Defense Game
    May 29, 2010

    Added to the Games section is the new Moon Tower Defense game. Defend the Moon from the circling Aliens and Humans.

Silverlight Popup Dialog

This free Silverlight 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.


To view the full Popup Dialog demo please see the main Silverlight controls 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 or the ShowAsModal() 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

Latest Forum Posts

Here are latest posts from around the forums, if you have a question about any of the Liquid controls you can get your answers in the Forum.

gcoleman0828 posted on MessageBox Popup errors

I am trying to implement the 5.3.1 source code on Silverlight 4 using VS2010. When I try to use the MessageBox and it says there is an ambigious object (MessageBox). I figured it was from System.Windows.Forms, but everytime I remove it, I get the following errors.


Error 1 The type 'System.Windows.Controls.ContentControl' is defined in an assembly that is not referenced. You must add a reference to assembly 'System.Windows, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e'. C:\Users\gcoleman\Documents\Visual Studio 2010\Projects\Test Projects\TimeOffRequests\TimeOffRequests.Web\Services\TimeoffDataService.cs 30 27 TimeOffRequests.Web



I even tried doing Liquid.MessageBox TestBox = new Liquid.MessageBox();


Nothing seems to be working?? Any ideas?


Thank you!!!

Hi,


In short no, well not without it looking messy.  You can overlay HTML onto Silverlight content but I suspect you would run into trouble if the dialog was dragged by the user.  In SL4 and out of browser mode there is the WebBrowser control that can render HTML in Silverlight.  This too has issues particulally rendering order i.e the WebBrowser control always gets rendered on top of anything.


Thanks!

Hi,


In DialogBase create yor own event for your custom button click and simply raise it when clicked.


public event DialogEventHandler MyButtonClickEvent;


if (MyButtonClickEvent != null)

{

    MyButtonClickEvent(sender, args);

}


You then attach to this event from your main program.  There are plenty of articles out there explaining how to setup custom events that you may want to refer to.


Thanks!

gcoleman0828 posted on Resizing issues when using a Grid

When using a Datagrid as Content inside the Dialog control, I can get it it to resize using the SizeChanged attribute, but it is always quite off. I have to static a -40 to make it sit within the size of the Dialog. Obviously, this breaks as soon as you try to minimize as it becomes a negative value. Please help. I am obviously missing something vital. It's not that complicated and I'm almost there...


Here is my Code


MainPage.xaml


<my:Dialog x:Name="EmployeeDirectoryDialog" ButtonsVisibility="Collapsed" IsResizable="True" IsMinimizeEnabled="True" Canvas.Left="6" Canvas.Top="-43" Height="420" Width="785" Minimizing="Dialog_Minimizing" Minimized="Dialog_Minimized" Restoring="Dialog_Restoring" SizeChanged="EmployeeDirectoryDialog_SizeChanged">

                <Canvas x:Name="EmployeeDirectoryCanvas" >


                    <sdk:DataGrid ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Visible" AutoGenerateColumns="True" Canvas.Left="6" Canvas.Top="6" Height="380" Width="760" x:Name="EmployeeDirectoryGrid"  AutoGeneratingColumn="EmployeeGrid_AutoGeneratingColumn" />

                        <my1:BusyIndicator x:Name="Employeebusyindicator" HorizontalAlignment="Center" VerticalAlignment="Center"  IsBusy="False" Height="21" Width="154" Canvas.Left="336" Canvas.Top="212" />

                    

                </Canvas>

            </my:Dialog>



MainPage.xaml.cs


 private void EmployeeDirectoryDialog_SizeChanged(object sender, SizeChangedEventArgs e)

        {

            //EmployeeDirectoryDialog.Content = "H = " + e.NewSize.Height.ToString() + "W = " + e.NewSize.Width.ToString();


            double EmployeeDirectoryGridHeight = e.NewSize.Height - 40;

            double EmployeeDirectoryGridWidth = e.NewSize.Width - 40;

          EmployeeDirectoryGrid.Height = EmployeeDirectoryGridHeight;

          EmployeeDirectoryGrid.Width = EmployeeDirectoryGridWidth;

            

        }

Hi Ken,


Thanks for pointing this out.  The default behaviour when for modal dialogs is to render a transparent element over the background which as you've seen doen't stop the user tabbing between controls.


The solution for this is to use the DisableBackground and EnableBackground events and in your code set the IsEnabled state on the controls that should be disabled whilst the dialog is visible.  When there are many child controls it may be a good idea to place them all in a ContentControl wrapper and just toggle the IsEnabled state of that.


Thanks!

Hi Ken,


The ButtonStyle property cannot be made a dependency property at this time.  You must use it on your XAML dialog tag or in code.


Thanks!

Rate this page: 

1 Star 2 Star 3 Star 4 Star 5 Star
16 Ratings / 3.3 Average

Ultimate Gamers

  • 1 stig
  • 2 Gh0sT
  • 3 dhoz
  • 4 janso
  • 5 RadiateLogic
  • 6 dan
  • 7 bigblue531
  • 8 k4si
  • 9 gaaslin
  • 10 Haroldo

  • See the full chart here!

Silverlight 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...