Silverlight

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 Main Menu

This free Main Menu control provides Silverlight developers with an easy to use and customizable drop down menu system with a familiar default style.

This Silverlight only Main Menu Control 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 Main Menu control you will need to add a reference to Liquid.Menu.dll in your project.

Login or Register to Download these controls You need to login to Download the Main Menu example, If you do not have a login you can register for free!

How to Use the Main Menu Control

To use the Main Menu on your Silverlight page:

<UserControl x:Class="MainMenu.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

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

Width="400" Height="300">

<liquidMenu:MainMenu x:Name="testMenu" ItemSelected="testMenu_ItemSelected">

<liquidMenu:MainMenu.Items>

<liquidMenu:MainMenuItem Text="Menu 1">

<liquidMenu:Menu>

<liquidMenu:MenuItem ID="item11" Icon="images/document.png" Text="Item 1" />

<liquidMenu:MenuDivider />

<liquidMenu:MenuItem ID="item12" Icon="images/save.png" Shortcut="Ctrl+S" Text="Item 2" />

<liquidMenu:MenuDivider />

<liquidMenu:MenuItem ID="item13" Text="Item 3" />

</liquidMenu:Menu>

</liquidMenu:MainMenuItem>

<liquidMenu:MainMenuItem Text="Menu 2">

<liquidMenu:Menu>

<liquidMenu:MenuItem ID="item21" Text="Item 1" />

<liquidMenu:MenuItem ID="item22" Text="Item 2" />

<liquidMenu:MenuItem ID="item23" Text="Item 3" />

</liquidMenu:Menu>

</liquidMenu:MainMenuItem>

<liquidMenu:MainMenuItem Text="Menu 3">

<liquidMenu:Menu>

<liquidMenu:MenuItem ID="item31" Text="Item 1" />

<liquidMenu:MenuItem ID="item32" Text="Item 2" />

<liquidMenu:MenuDivider />

<liquidMenu:MenuItem ID="item33" Text="Item 3" />

</liquidMenu:Menu>

</liquidMenu:MainMenuItem>

</liquidMenu:MainMenu.Items>

</liquidMenu:MainMenu>

</Canvas>

</UserControl>

Here we have a menu with the name testMenu, this contains three child menus. Each of these have child menu options, they can be nested as deep as required.

Note we assign an ID to each menu item, this allows us to detect which item has been selected using the ItemSelected event which you can see below.

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;

using Liquid;

namespace MainMenu

{

public partial class Page : UserControl

{

public Page()

{

InitializeComponent();

}

private void testMenu_ItemSelected(object sender, MenuEventArgs e)

{

switch (e.Tag.ToString())

{

case "item11":

// TODO: New functionality

break;

case "item12":

// TODO: Save functionality

break;

}

The MenuList_ItemSelected event handler is called each time an item is selected. The argument object passed in contains a Tag property which contains the ID of the item that generated the event.

The menu control used here can display images and keyboard shortcuts as well as the title text.

Example Silverlight Main Menu Control:

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

jfcjunior posted on The main menu is not rendered, is invisible. URGENT

Hello my friends,

I beg of you to help resolve this issue.

The menu does not appear anywhere in the main menu is not rendered, is invisible.

I tried several ways to follow various tutorials, but does not show the menu.

Below is the code:

_______________________________________________________________________________________________

<UserControl xmlns:my="clr-namespace:Hubble" x:Class="Hubble.MainPage"

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"

mc:Ignorable="d" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

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

xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" d:DesignHeight="601" d:DesignWidth="799" Margin="0,0,0,0" xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input">

<liquidMenu:MainMenu Background="#FFE8D3D3" Height="25" Margin="0,4" Canvas.ZIndex="3" HorizontalContentAlignment="Stretch" ID="MnuSystem" x:Name="MnuPrincipal" Visibility="Visible" VerticalContentAlignment="Center" VerticalAlignment="Top" HorizontalAlignment="Stretch">

<liquidMenu:MainMenu.Items>

<liquidMenu:MainMenuItem ID="MnuSecurity" Text="System" Height="31" Width="536" Visibility="Visible" VerticalAlignment="Center" HorizontalContentAlignment="Left">

<liquidMenu:Menu>

<liquidMenu:MenuItem ID="MnuLogin" Shortcut="Ctrl+L" Text="Login" />

<liquidMenu:MenuDivider />

<liquidMenu:MenuItem ID="MnuLogOut" Shortcut="Ctrl+G" Text="LogOut" />

<liquidMenu:MenuDivider />

<liquidMenu:MenuItem ID="MnuQuit" Text="Quit" />

</liquidMenu:Menu>

</liquidMenu:MainMenuItem>

</liquidMenu:MainMenu.Items>

</liquidMenu:MainMenu>

<controls:TabControl Height="28" HorizontalAlignment="Left" Name="TabDeskTop" VerticalAlignment="Bottom" Width="799" TabStripPlacement="Bottom" FontSize="10" Grid.Row="1">

<controls:TabItem Header="Login" Name="Tab001" Canvas.ZIndex="2" />

</controls:TabControl>

</Grid>

</UserControl>

using System;

using System.Collections.Generic;

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

using System.Windows.Shapes;

using Liquid;

namespace Hubble

{

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

App.Current.Host.Content.Resized += new EventHandler(Content_Resized);

}

void Content_Resized(object sender, EventArgs e)

{

this.Width = App.Current.Host.Content.ActualWidth;

this.Height = App.Current.Host.Content.ActualHeight;

LayoutRoot.Width = App.Current.Host.Content.ActualWidth;

LayoutRoot.Height = App.Current.Host.Content.ActualHeight;

TabDeskTop.Width = App.Current.Host.Content.ActualWidth;

}

private void MnuSystem_ItemSelected(object sender, MenuEventArgs e)

{

switch (e.Tag.ToString())

{

case "MnuLogin":

{

FrmLogin oFrmLogin;

oFrmLogin = new FrmLogin();

oFrmLogin.ParentLayoutRoot = LayoutRoot;

oFrmLogin.HasCloseButton = false;

oFrmLogin.ResizeMode = ResizeMode.CanMinimize;

oFrmLogin.Show();

break;

}

case "MnuLogOut":

// ??? Disconect DataBase PostgreSQL

break;

case "MnuQuit":

// ??? Exit Page Browser

break;

}

_______________________________________________________________________________________________

Thank you!

akumok posted on Menu behind grid

Hi,

I have almost exact behavior as you cover in previous thread but your solution for changing canvas ZIndex property does not affect anything, when clicked menu still shows behind. Below is my code:

<liquidMenu:MainMenu x:Name="mainMenu" ItemSelected="mainMenu_ItemSelected">

<liquidMenu:MainMenu.Items>

<liquidMenu:MainMenuItem Text="Structure">

<liquidMenu:Menu>

<liquidMenu:MenuItem x:Name="mnuAdd" ID="item11" Icon="images/New16.png" Text="Add new" />

<liquidMenu:MenuItem ID="item12" Icon="images/save.png" Text="Update" />

<liquidMenu:MenuItem ID="item13" Text="Clear form" />

<liquidMenu:MenuDivider />

<liquidMenu:MenuItem ID="item14" Text="Exit" />

</liquidMenu:Menu>

</liquidMenu:MainMenuItem>

</liquidMenu:MainMenu.Items>

</liquidMenu:MainMenu>

<controlsToolkit:BusyIndicator HorizontalAlignment="Center" VerticalAlignment="Center"

Name="busyIndicator" IsBusy="False">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

<sdk:TabControl Height="auto" HorizontalAlignment="Left" Name="tabControl1" Margin="20,0,5,0" VerticalAlignment="Top" Width="auto">

<sdk:TabItem Header="General" ToolTipService.ToolTip="General Information">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBox Height="39" HorizontalAlignment="Left" Margin="5,5,0,0" Name="txtXpath" VerticalAlignment="Top" Width="200" TextWrapping="Wrap"

Text="{Binding XPath, Mode=TwoWay}"/>

<TextBox Height="39" HorizontalAlignment="Left" Margin="5,5,0,0" Name="txtPContainer" VerticalAlignment="Top" Width="200"

Text="{Binding ParentContainer, Mode=TwoWay}"/>

</StackPanel>

<TextBox Height="23" HorizontalAlignment="Left" Margin="5,5,0,0" Name="txtDataPoint" VerticalAlignment="Top" Width="200"

Text="{Binding DataPoint, Mode=TwoWay}"/>

<TextBox Height="39" HorizontalAlignment="Left" Margin="5,5,0,0" Name="txtMismoDef" VerticalAlignment="Top" Width="200" TextWrapping="Wrap"

Text="{Binding MISMODefinition, Mode=TwoWay}"/>

</StackPanel>

<TextBox Height="23" HorizontalAlignment="Right" Margin="0,10,10,0" Name="txtLoanRoleType" VerticalAlignment="Top" Width="120"

Text="{Binding LoanRoleType, Mode=TwoWay}"/>

<TextBox Height="23" HorizontalAlignment="Right" Margin="12,10,10,0" Name="txtLoanStateType" VerticalAlignment="Top" Width="141"

Text="{Binding LoanStateType, Mode=TwoWay}"/>

</StackPanel>

<TextBox Height="23" HorizontalAlignment="Right" Margin="0,10,10,0" Name="txtPartyRoleType" VerticalAlignment="Top" Width="120"

Text="{Binding PartyRoleType, Mode=TwoWay}"/>

<TextBox Height="23" HorizontalAlignment="Right" Margin="5,10,5,0" Name="txtULDDCondition" VerticalAlignment="Top" Width="41"

Text="{Binding ULDDCondition, Mode=TwoWay}"/>

<TextBox Height="23" HorizontalAlignment="Right" Margin="5,10,10,0" Name="txtULDDFormat" VerticalAlignment="Top" Width="141"

Text="{Binding ULDDFormat, Mode=TwoWay}"/>

</StackPanel>

</Grid>

</sdk:TabItem>

<sdk:TabItem Header="FNM" ToolTipService.ToolTip="Fannie Mae specific information">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBox Height="23" HorizontalAlignment="Left" Margin="5,5,0,0" Name="txtFNMCondition" VerticalAlignment="Top" Width="50"

Text="{Binding FNMCondition, Mode=TwoWay}"/>

<TextBox Height="23" HorizontalAlignment="Left" Margin="5,5,0,0" Name="txtFNMConditionDetails" VerticalAlignment="Top" Width="200"

Text="{Binding FNMConditionDetails, Mode=TwoWay}"/>

</StackPanel>

<TextBox Height="39" HorizontalAlignment="Left" Margin="25,5,0,0" Name="txtFNMNotes" VerticalAlignment="Top" Width="375"

Text="{Binding FNMNotes, Mode=TwoWay}"/>

</StackPanel>

<TextBox Height="23" HorizontalAlignment="Right" Margin="5,10,10,0" Name="txtFNMULDDFormat" VerticalAlignment="Top" Width="141"

Text="{Binding FNMULDDFormat, Mode=TwoWay}"/>

</StackPanel>

</StackPanel>

<TextBox Height="23" HorizontalAlignment="Left" Margin="5,5,0,0" Name="txtFNM12112011Condition" VerticalAlignment="Top" Width="50"

Text="{Binding FNM12112011Condition, Mode=TwoWay}"/>

<TextBox Height="23" HorizontalAlignment="Left" Margin="5,5,0,0" Name="txtFNM12112011ConditionDetails" VerticalAlignment="Top" Width="200"

Text="{Binding FNM12112011ConditionDetails, Mode=TwoWay}"/>

</StackPanel>

<TextBox Height="39" HorizontalAlignment="Left" Margin="25,5,0,0" Name="txtFNM12112011Notes" VerticalAlignment="Top" Width="375"

Text="{Binding FNM12112011Notes, Mode=TwoWay}"/>

</StackPanel>

</Grid>

</sdk:TabItem>

<sdk:TabItem Header="FRE" ToolTipService.ToolTip="Freddie Mac specific information">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBox Height="23" HorizontalAlignment="Left" Margin="5,5,0,0" Name="txtFRECondition" VerticalAlignment="Top" Width="50"

Text="{Binding FRECondition, Mode=TwoWay}"/>

<TextBox Height="23" HorizontalAlignment="Left" Margin="5,5,0,0" Name="txtFREConditionDetails" VerticalAlignment="Top" Width="200"

Text="{Binding FREConditionDetails, Mode=TwoWay}"/>

</StackPanel>

<TextBox Height="39" HorizontalAlignment="Left" Margin="25,5,0,0" Name="txtFRENotes" VerticalAlignment="Top" Width="375"

Text="{Binding FRENotes, Mode=TwoWay}"/>

</StackPanel>

<TextBox Height="23" HorizontalAlignment="Right" Margin="5,10,10,0" Name="txtFREULDDFormat" VerticalAlignment="Top" Width="141"

Text="{Binding FREULDDFormat, Mode=TwoWay}"/>

</StackPanel>

</StackPanel>

<TextBox Height="23" HorizontalAlignment="Left" Margin="5,5,0,0" Name="txtFRE12112011Condition" VerticalAlignment="Top" Width="50"

Text="{Binding FRE12112011Condition, Mode=TwoWay}"/>

<TextBox Height="23" HorizontalAlignment="Left" Margin="5,5,0,0" Name="txtFRE12112011ConditionDetails" VerticalAlignment="Top" Width="200"

Text="{Binding FRE12112011ConditionDetails, Mode=TwoWay}"/>

</StackPanel>

<TextBox Height="39" HorizontalAlignment="Left" Margin="25,5,0,0" Name="txtFRE12112011Notes" VerticalAlignment="Top" Width="375"

Text="{Binding FRE12112011Notes, Mode=TwoWay}"/>

</StackPanel>

</Grid>

</sdk:TabItem>

</sdk:TabControl>

</StackPanel>

</Grid>

</controlsToolkit:BusyIndicator>

</Canvas>

dangson posted on How to hide a menu when lost focus

myMainMenu.CloseChildren() is great. Thanks in advance!

jimhamilton posted on Ambiguous

Hi Dan

Can you give me any guidance on this error. I'm using the RichTextEditor which was working fine. I then imported the Silverlight time picker control into the toolbox to use it and suddenly got this error.

The error show in Dim item As MenuItem = DirectCast(e.Parameter, MenuItem)

Error 2 'MenuItem' is ambiguous, imported from the namespaces or types 'Liquid, System.Windows.Controls'. C:\Users\Jim\Documents\Visual Studio 2010\Projects\NottsStats5\NottsStats5\Views\VideoChildWindow.xaml.vb 1192 21 NottsStats5

For some unknown reason the system suddenly doesn't like the declaration Dim item as MenuItem!

Any thoughts?

Cheers Jim

sunfun posted on menu behind datagrid

Er, make that ZIndex not ZOrder.

sunfun posted on Menu only shows button with Show on it in Grid.

Ignore this. Was mixing and matching control code samples.

Rate this:

1 Star 2 Star 3 Star 4 Star 5 Star

16 Ratings / 3.1 Average

"Big Guns Tower Defense has been converted from #wp7 XNA to Android OpenGL/Java and is in the Android Market now http://t.co/hThPN8gk"
07:56 01 Sun via web
"Some great advice to #html5 mobile game developers about making money! http://t.co/LPEXxNpM"
10:53 12 Fri via web
""Will HTML5 be good enough for gaming?" - I think so - http://t.co/CwZ405To"
07:32 12 Sat via web
"Cool #html5 Tic-Tac-Toe game by WTHIT56 http://t.co/CtPS9T3b"
01:27 10 Mon via web
"iOS5 boosts #html5 canvas performance especially for iPhone 4 http://t.co/NQDHYl6C"
10:31 10 Sat via web
Follow us on Twitter

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

Silverlight

Vectorlight News

Silverlight Main Menu

How to Use the Main Menu Control

Latest Forum Posts

Silverlight Games

Silverlight Controls