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 Bubble

This free Silverlight Popup Bubble is easy to implement on your Silverlight driven website and is also customizable to provide a visual feel suitable for any site design.

To use the Popup Bubble 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 Bubble example, If you do not have a login you can register for free!


How to Use the Popup Bubble Control

To use the Popup Bubble on your Silverlight page:

<UserControl x:Class="Bubble.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:liquidPopup="clr-namespace:Liquid;assembly=Liquid.Popup"
    Width="400" Height="300">
    <Canvas x:Name="LayoutRoot" Background="White">
        <Button x:Name="showDialog" Canvas.Left="20" Canvas.Top="20" Content="Show Dialog" Width="100" Height="20" Click="Bubble_ButtonClick" />
        <liquidPopup:Bubble x:Name="bubblePopup" Canvas.Left="50" Canvas.Top="50" Width="300" Height="120" Lip="BottomLeft">
            <StackPanel>
                <TextBlock Width="300" TextWrapping="Wrap" Padding="10" Text="This is a Liquid bubble popup! It will close in 15 seconds or when you click the Close button!" />
                <Button Content="Close" Click="BubbleClose_Click" HorizontalAlignment="Right" Margin="10" />
            </StackPanel>
        </liquidPopup:Bubble>
    </Canvas>
</UserControl>


In your C# code behind file you can refer to the Bubble using bubblePopup.  In this example we create a simple popup bubble containing a Close button with some text, to show the dialog click the 'Show Bubble' button.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
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;

namespace Bubble
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();

            bubblePopup.IsTimerEnabled = true;
            bubblePopup.TimeUntilClose = new TimeSpan(0, 0, 15);
        }

        private void Bubble_ButtonClick(object sender, RoutedEventArgs e)
        {
            bubblePopup.Show();
        }

        private void BubbleClose_Click(object sender, RoutedEventArgs e)
        {
            bubblePopup.Close();
        }
    }
}


If you display the bubble without clicking the Close button, the bubble will close automatically after 15 seconds.  This timeout and close feature is present on all the Liquid Popup dialogs.

Example Silverlight Popup Bubble Control:

Silverlight Popup Bubble 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
31 Ratings / 3.3 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...