/default.aspx
Silverlight .NET CMS and Controls
Home
/controls.aspx
Silverlight Controls
Controls
ListBox

Silverlight ListBox Control

This ListBox control is a non-collapsable version of our Dropdown List control. Utilizing the ScrollViewer control for smooth scrolling, both horizontal and vertical.

How to Use the ListBox Control

In your XAML ensure you have a reference to the Liquid.dll in the UserControl tag at the top. To use it on your Silverlight page:

<UserControl x:Class="ListBox_Test.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="400" Height="300">
     <Canvas>
          <liquid:ListBoxPlus x:Name="list" Canvas.Top="10" Canvas.Left="10" Width="200" Height="200" ItemSelected="list_ItemSelected">
               <liquid:ListBoxPlus.Items>
                    <liquid:ListItem Key="1" Value="Australia" ImageURL="ListBox;component/images/doc.png" ImageOffset="2,2" TextOffset="18,0" />
                    <liquid:ListItem Key="2" Value="Canada" ImageURL="ListBox;component/images/mp3.png" ImageOffset="2,2" TextOffset="18,0" />
                    <liquid:ListItem Key="3" Value="China" ImageURL="ListBox;component/images/pdf.png" ImageOffset="2,2" TextOffset="18,0" />
                    <liquid:ListItem Key="4" Value="France" ImageURL="ListBox;component/images/doc.png" ImageOffset="2,2" TextOffset="18,0" />
                    <liquid:ListItem Key="5" Value="Germany" ImageURL="ListBox;component/images/gif.png" ImageOffset="2,2" TextOffset="18,0" />
                    <liquid:ListItem Key="6" Value="India" ImageURL="ListBox;component/images/doc.png" ImageOffset="2,2" TextOffset="18,0" />
                    <liquid:ListItem Key="7" Value="Italy" ImageURL="ListBox;component/images/mp3.png" ImageOffset="2,2" TextOffset="18,0" />
                    <liquid:ListItem Key="8" Value="Japan" ImageURL="ListBox;component/images/gif.png" ImageOffset="2,2" TextOffset="18,0" />
                    <liquid:ListItem Key="9" Value="Pakistan" ImageURL="ListBox;component/images/pdf.png" ImageOffset="2,2" TextOffset="18,0" />
                    <liquid:ListItem Key="10" Value="Portugal" ImageURL="ListBox;component/images/doc.png" ImageOffset="2,2" TextOffset="18,0" />
                    <liquid:ListItem Key="11" Value="Republic of Ireland" ImageURL="ListBox;component/images/gif.png" ImageOffset="2,2" TextOffset="18,0" />
                    <liquid:ListItem Key="12" Value="Russia" ImageURL="ListBox;component/images/doc.png" ImageOffset="2,2" TextOffset="18,0" />
                    <liquid:ListItem Key="13" Value="Saudi Arabia" ImageURL="ListBox;component/images/pdf.png" ImageOffset="2,2" TextOffset="18,0" />
                    <liquid:ListItem Key="14" Value="Spain" ImageURL="ListBox;component/images/mp3.png" ImageOffset="2,2" TextOffset="18,0" />
                    <liquid:ListItem Key="15" Value="Sweden" ImageURL="ListBox;component/images/gif.png" ImageOffset="2,2" TextOffset="18,0" />
                    <liquid:ListItem Key="16" Value="United Kingdom" ImageURL="ListBox;component/images/doc.png" ImageOffset="2,2" TextOffset="18,0" />
                    <liquid:ListItem Key="17" Value="USA" ImageURL="ListBox;component/images/mp3.png" ImageOffset="2,2" TextOffset="18,0" />
               </liquid:ListBoxPlus.Items>
          </liquid:ListBoxPlus>
     </Canvas>
</UserControl>

 

Our example contains one listbox, populated with some country information. You can hook into the ItemSelected event to detect selections and provide your own logic here.

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 ListBox_Test
{
     public partial class Page : UserControl
     {
          private ListItem _selected = null;

          public Page()
          {
               InitializeComponent();
          }

          private void list_ItemSelected(object sender, EventArgs e)
          {
               if (_selected != null)
               {
                    _selected.FontSize = 14;
               }

               _selected = (ListItem)sender;
               _selected.FontSize = 16;
          }
     }
}

 

Example VectorLight.Net ListBox Control:

Silverlight ListBox Control
  • Written in Client-Side C# .NET 3.5
  • Microsoft Silverlight Only
  • Customizable Visual Feel

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!

dan Feb, 19 2008 - 01:03

Hello,

I think it is the call to Build() after you have set the selected item. Try calling the Build() method first and then SetSelected().

This looks like a bug and has been added to the issues list for the next version. Let me know if your still having problems with this.

 

hintzen Feb, 18 2008 - 15:55

Hello,

The SetSelected property seems to actually select the item in the list, but there is no visual indication in the list box itself, that the item has been selected progmatically.

Am I doing something wrong?

if( UsersRolesListBox.Items.Count > 0 ) {
UsersRolesListBox.SetSelected( UsersRolesListBox.Items[0].Key );
}

UsersRolesListBox.Build();

 

dan Feb, 14 2008 - 00:29

Thanks for that, we will check the example in the download and ensure that is up-to-date.

 

Muppets Feb, 13 2008 - 13:48

That worked a treat!

Sorry, didn't spot that on the sample above. The download samples still seem to be missing the Build (Last time I check)

 

dan Feb, 13 2008 - 09:55

Hello,

The ListBox and DropDown controls were modified slightly for 2.7. The old method call AddChild() has been removed and there is now a generic List of ListItem objects, this should be populated first and then a call made to Build() which then adds your list items to the control canvas.

These changes were necessary to make these controls more similar in functionality to standard .NET controls and also to allow additional features to be implemented such as images etc.

The example above works with 2.7 but let me know if you are still having problems with this.

 

Muppets Feb, 13 2008 - 07:28

Version 2.7 seems to have broken the ListBox control. Both your sample and my project now does not display any items when the ListBox is rendered.

Any ideas on a fix for this?

 

dan Feb, 07 2008 - 10:58

No problems, were glad you like them.

 

vitaminutza Feb, 07 2008 - 10:21

Thanks Dan. Meanwhile I found a work-around with your scrollable area control and a custom Thumb class and it works just fine. Anctious for 2.7 version. I'm using liquid controls on a "try out" application for my customer and untill now it is looking great. Thanks

 

dan Feb, 07 2008 - 05:45

Hello,

There is no way to put images in the ListItems at the moment, this feature will be implemented in version 2.7 which is out on the 11th February.

 

vitaminutza Feb, 07 2008 - 00:19

Hello,

Is there a way to have a liquid ListBox with ListItems: image and text? I'm trying to achieve a ThumbView control (list box with items that are thumbs with caption).

Thanks

 

dan Jan, 18 2008 - 00:29

Hello,

At the moment this property cannot be changed, the ability to "skin" all the controls is coming in the next version. Thanks for your patience and suggestions with this.

 

prejeshvp Jan, 17 2008 - 20:40

Hi dan,

Is there any way to set background color of listbox? its transperent now, it affects controls placed below it

 
This page is 42.54KB and was generated by the SilverPages CMS in 0.062 seconds. Total impressions: 1144.