Vectorlight News

  • Chat App Converted to HTML and JQuery
    Sep 08, 2011

    Converted from Silverlight to HTML and Javascript/JQuery is the Vectorlight Chat App. Login using your Vectorlight password to chat using your username and avatar.

  • HTML5 iPhone,Android Big Guns Tower Defense
    Jul 02, 2011

    Big Guns has made the leap from Windows Phone 7 (XNA) to HTML5 so you can now play it on your iPhone, Android and other HTML5 compatible devices.

  • HTML5 Games - Word Poppers and Batty
    Jun 04, 2011

    As the take-up of HTML5 quickens (74% of users currently have a browser capable of HTML5 Canvas) we present two more games for both your browser and mobile.

  • Big Guns Tower Defense on Windows Phone 7
    May 06, 2011

    Coming soon to Windows Phone 7 is an XNA port of the popular Vectorlight tower defense game Super Tower Defense. Whilst retaining many of the graphical and gameplay features of the original Silverlight game.

  • Wakacube WP7 Update
    Apr 26, 2011

    Released to the Windows Phone 7 marketplace today is Version 1.1 of Wakacube the 3D physics game of skill. Included in the update are more levels (30 in total) and new mode Wakatime which generates random crate structures to keep players entertained long after the levels have been completed.

  • Home Page News

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.

Login or Register to Download these controlsYou 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: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.

pimlong posted on Liquid.MessageBox compile issue

turn Liquid.MessageBox to Liquid.MessageBoxPlus  on page.g.cs then change <liquidPopup:MessageBox x:Name="infoDialog" /> on page.xaml to <liquidPopup:MessageBoxPlus x:Name="infoDialog" />

jimmychen posted on Memory leaks

THX

sunfun posted on Dynamically generate Error Dialog box in separate class

I would like to generate a Dialog box dynamically from a seperate class callable from all my pages, but I am not sure if this is possible. The purpose of this is to have a centrally located error handling class so that all error messages throughout the app have a standardized format for displaying error messages. See Example below:


ProjectPageCode.vb


Partial Public Class ProjectPage

    Inherits Page


    Private Err As ErrorHandling = New ErrorHandling


    Private Sub btn_Click(sender as object, e as RoutedEventArgs)

        Err.GeneralError(1, "Some error message", "Some error caption")

    End Sub

End Class


ErrorHandling.vb


Imports Liquid.MessageBox

Public Class ErrorHandling

    Public Function GeneralError(iErrorNum As Integer, sErrorMessage As String, Optional sCaption As String = "") As MessageBoxResult

        Dim msg As Liquid.MessageBox = New Liquid.MessageBox

        If sCaption = "" Then sCaption = "General Error"

        'This message box shows up

        System.Windows.MessageBox.Show(iErrorNum.ToString + " - " + sErrorMessage, sCaption, MessageBoxButton.OK)

        'This one doesn't

        msg.Show(iErrorNum.ToString + " - " + sErrorMessage, sCaption)

        Return 0

    End Function


I really like your work so far. Thank you and keep up the great work.

RiskVision posted on Changing the header font and weight

hi,

How can i change the dialog header font size , font weight and font style  ?

Agneta posted on Problem to get the Dialog on top

I'm not able to get the dialog visible. Is this because of the frame?

My xaml:

<UserControl x:Class="EKAKC.StickyNoteDetails"

    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:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

    xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"

    xmlns:liquidMenu="clr-namespace:Liquid;assembly=Liquid.Menu"

    xmlns:liquidPopup="clr-namespace:Liquid;assembly=Liquid.Popup"

    xmlns:liquidHtmlRichTextArea="clr-namespace:Liquid;assembly=Liquid.HtmlRichTextArea"            

    Width="600" Height="700"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    

    <Grid x:Name="LayoutRoot" Background="White" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">

             <Grid ShowGridLines="False" Height="634" Width="537">

                <Grid.RowDefinitions>

                    <RowDefinition Height="25"/>

                    <RowDefinition Height="25"/>

                    <RowDefinition Height="25"/>

                    <RowDefinition Height="25"/>

                    <RowDefinition Height="25"/>

                    <RowDefinition Height="25"/>

                    <RowDefinition Height="25"/>

                    <RowDefinition Height="27"/>

                    <RowDefinition Height="27"/>

                    <RowDefinition Height="27"/>

                    <RowDefinition Height="27"/>

                    <RowDefinition Height="27"/>

                    <RowDefinition Height="27"/>

                    <RowDefinition Height="27"/>

                    <RowDefinition Height="27"/>

                    <RowDefinition Height="27"/>

                    <RowDefinition Height="27"/>

                    <RowDefinition Height="27"/>

                    <RowDefinition Height="30"/>

                    <RowDefinition Height="27"/>

                    <RowDefinition Height="4"/>

                    <RowDefinition Height="58"/>

                    <RowDefinition Height="74*" />

                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="3" />

                    <ColumnDefinition Width="100" />

                    <ColumnDefinition Width="60"/>

                    <ColumnDefinition Width="200"/>

                    <ColumnDefinition Width="77*" />

                </Grid.ColumnDefinitions>

                <TextBlock Text="Notis namn"

                         Grid.Row="1" Grid.ColumnSpan="2" Margin="4,4,0,0"/>

                <TextBox x:Name="txtStickyNoteName"

                         Grid.Row="1"

                         Grid.Column="3" Margin="0,0,10,0" />

                <TextBlock Text="Notis id"

                         Grid.Row="2" Grid.ColumnSpan="2" Margin="4,4,0,0"/>

                <TextBox x:Name="txtStickyNoteId"

                         Grid.Row="2"

                         Grid.Column="3" Margin="0,0,10,0" />


                <TextBlock Text="Startdatum"

                           Grid.Row="3" Grid.ColumnSpan="2" Margin="4,4,0,0"/>

                <Controls:DatePicker x:Name="dpFromDate"

                                     Grid.Row="3"

                                     Grid.Column="3"

                                     Width="120"

                                     Height="22"

                                     HorizontalAlignment="Left"/>


                <TextBlock Text="Slutdatum"

                           Grid.Row="4" Grid.ColumnSpan="2" Margin="4,4,0,0"/>

                <Controls:DatePicker x:Name="dpToDate"

                                     Grid.Row="4"

                                     Grid.Column="3"

                                     Width="120"

                                     Height="22"

                                     HorizontalAlignment="Left"/>

                

                

                <Border Grid.Row="6" BorderThickness="1" BorderBrush="#8b919f" Grid.ColumnSpan="5" Margin="0,0,15,0" Grid.RowSpan="3">

                    <StackPanel Orientation="Horizontal">

                        <StackPanel.Background>

                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

                                <GradientStop Color="#ffffff" Offset="0.0" />

                                <GradientStop Color="#e3e8f4" Offset="0.5" />

                                <GradientStop Color="#cfd7eb" Offset="0.5" />

                                <GradientStop Color="#e9ecfa" Offset="1.0" />

                            </LinearGradientBrush>

                        </StackPanel.Background>

                        <StackPanel Orientation="Horizontal" Margin="4" Height="47">

                            <ComboBox x:Name="selectFontFamily" Width="155" Height="23" Margin="0 0 2 0" SelectionChanged="SelectFontFamily_ItemSelected">

                                <ComboBoxItem Content="Arial" FontSize="14" FontFamily="Arial" IsSelected="True" />

                                <ComboBoxItem Content="Arial Black" FontSize="14" FontFamily="Arial Black" />

                                <ComboBoxItem Content="Comic Sans MS" FontSize="14" FontFamily="Comic Sans MS" />

                                <ComboBoxItem Content="Courier New" FontSize="14" FontFamily="Courier New" />

                                <ComboBoxItem Content="Lucida Sans Unicode" FontSize="14" FontFamily="Lucida Sans Unicode" />

                                <ComboBoxItem Content="Times New Roman" FontSize="14" FontFamily="Times New Roman" />

                                <ComboBoxItem Content="Trebuchet MS" FontSize="14" FontFamily="Trebuchet MS" />

                                <ComboBoxItem Content="Verdana" FontSize="14" FontFamily="Verdana" />

                            </ComboBox>

                            <ComboBox x:Name="selectFontSize" Width="45" Height="23" Margin="0, 0, 10, 0" SelectionChanged="SelectFontSize_ItemSelected">

                                <ComboBoxItem Content="6" />

                                <ComboBoxItem Content="7" />

                                <ComboBoxItem Content="8" />

                                <ComboBoxItem Content="9" />

                                <ComboBoxItem Content="10" />

                                <ComboBoxItem Content="11" />

                                <ComboBoxItem Content="12" IsSelected="True" />

                                <ComboBoxItem Content="13" />

                                <ComboBoxItem Content="14" />

                                <ComboBoxItem Content="15" />

                                <ComboBoxItem Content="16" />

                                <ComboBoxItem Content="17" />

                                <ComboBoxItem Content="18" />

                                <ComboBoxItem Content="20" />

                                <ComboBoxItem Content="22" />

                                <ComboBoxItem Content="24" />

                                <ComboBoxItem Content="26" />

                                <ComboBoxItem Content="28" />

                                <ComboBoxItem Content="36" />

                                <ComboBoxItem Content="48" />

                                <ComboBoxItem Content="72" />

                            </ComboBox>

                            <Button x:Name="makeBold" Width="24" Height="23" Margin="0 0 2 0" Click="MakeBold_Click">

                                <TextBlock x:Name="boldText" Text="B" FontFamily="Arial" FontSize="14" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" />

                            </Button>

                            <Button x:Name="makeItalic" Width="24" Height="23" Margin="0 0 2 0" Click="MakeItalic_Click">

                                <TextBlock x:Name="italicText" Text="I" FontFamily="Arial" FontSize="14" FontStyle="Italic" HorizontalAlignment="Center" VerticalAlignment="Center" />

                            </Button>

                            <Button x:Name="makeUnderline" Width="24" Height="23" Margin="0 0 10 0" Click="MakeUnderline_Click">

                                <TextBlock x:Name="underlineText" Text="U" FontFamily="Arial" FontSize="14" TextDecorations="Underline" HorizontalAlignment="Center" VerticalAlignment="Center" />

                            </Button>

                            <Button x:Name="alignLeft" Width="24" Height="23" Margin="0 0 2 0" Click="alignLeft_Click">

                                <Image Source="images/left.png" Stretch="None" />

                            </Button>

                            <Button x:Name="alignCenter" Width="24" Height="23" Margin="0 0 2 0" Click="alignCenter_Click">

                                <Image Source="images/center.png" Stretch="None" />

                            </Button>

                            <Button x:Name="alignRight" Width="24" Height="23" Margin="0 0 10 0" Click="alignRight_Click">

                                <Image Source="images/right.png" Stretch="None" />

                            </Button>

                            <Button x:Name="makeLink" Width="24" Height="23" Margin="0 0 2 0" Click="MakeLink_Click">

                                <Image Source="images/link.png" Stretch="None" />

                            </Button>                            

                            <liquid:ColorSelector x:Name="selectForeground" Margin="0 0 10 0" SelectionChanged="selectForeground_SelectionChanged" />

                        </StackPanel>

                    </StackPanel>

                </Border>

                <liquidHtmlRichTextArea:HtmlRichTextArea x:Name="rta" Grid.Row="9" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" SelectionChanged="rta_SelectionChanged" Grid.ColumnSpan="5" Margin="0,0,16,15" Grid.RowSpan="11" />


                <liquidPopup:Dialog x:Name="dialogURL" Grid.Row="21" Grid.RowSpan="3" Width="254" Height="110" Title="Enter URL" Closed="dialogURL_Closed" IsMaximizeEnabled="False" IsMinimizeEnabled="False">

                    <Grid>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="116*" />

                        <ColumnDefinition Width="7*" />

                        <ColumnDefinition Width="126*" />

                    </Grid.ColumnDefinitions>

                    <TextBox x:Name="url" Width="238" Height="24" Margin="6,16,4,0" FontFamily="Arial" FontSize="14" Text="http://www.vectorlight.net" Grid.ColumnSpan="3" />

                    </Grid>

                </liquidPopup:Dialog>

                

                <StackPanel Grid.Row="21" Orientation="Horizontal"

                            HorizontalAlignment="Center" Margin="15,3,80,40" Width="105" Grid.Column="3" Grid.RowSpan="2">

                    <Button x:Name="pbSave"

                            Content="Spara"

                            Click="pbSave_Click"

                            Margin="3"

                            />

                    <Button x:Name="pbEcsape"

                            Content="Avbryt"                            

                            Click="pbEcsape_Click"

                            Margin="3"/>

                </StackPanel>                

            </Grid>        

    </Grid>

</UserControl>


Haworth1 posted on Set selected dialog On Top

I refactored the code a little more..in case anyone cares.  


Dialog searchDialog = LayoutRoot.Children.Cast<Dialog>().Where(d => d.Tag.Equals(user)).SingleOrDefault();

if (searchDialog != null)

{

    Canvas objCanvas = LayoutRoot;


    int highestZ = (from Dialog d

                           in objCanvas.Children

                            select Canvas.GetZIndex(d)).Max();


    Canvas.SetZIndex(searchDialog, highestZ + 1);

    return;

}

Rate this: 

1 Star 2 Star 3 Star 4 Star 5 Star
22 Ratings / 3.6 Average

Tweets

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