ListBoxes in Silverlight

I’ve seen this question in my email inbox 3 separate times this week, so I thought others might benefit as well:

“How do I get the value of a selected item in a ListBox with Silverlight?”

One of the coolest things about Silverlight and WPF to me is the ListBox control.  This handy control lets you bind items to a list where you control the display of the list items.  It’s a very cool concept, because a ListBox can render its items vertically or horizontally, and you can control the template for each individual item using an ItemTemplate.  This means that you can easily control images, fonts, background colors, gradients, corner rounding, etc for an individual list item.

By combining the ease of databinding with the power of controlling layout, you can create very interesting effects.  However, I am designer-challenged, so I am going to show you a very basic example.

<UserControl x:Class="SilverlightApplication1.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">

   <ListBox
       x:Name="lstDataCenter"                
       Width="150" Height="325"
       SelectionChanged="lstDataCenter_SelectionChanged">
       <ListBox.ItemTemplate>
           <DataTemplate>
               <StackPanel Orientation="Horizontal">                    
                   <TextBlock x:Name="txtLatitude" Text="{Binding Lattitude}" Width="50" />
                   <TextBlock x:Name="txtLongitude" Text="{Binding Longitude}" Width="50" />
               </StackPanel>
           </DataTemplate>
       </ListBox.ItemTemplate>
   </ListBox>
</UserControl>

This is pretty basic, we are binding something called Lattitude and Longitude to a list.  Where do we get those values?  Let’s look at the code, it’s self-explanatory.

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 System.Collections.ObjectModel;

namespace SilverlightApplication1
{
   public partial class MainPage : UserControl
   {
       public MainPage()
       {
           InitializeComponent();
           var maps = new ObservableCollection<Map>
           {
               new Map{ Lattitude=76.55544f,Longitude=87.4322f},
               new Map{ Lattitude=77.55544f,Longitude=88.4322f},
               new Map{ Lattitude=78.55544f,Longitude=89.4322f}
           };
           lstDataCenter.ItemsSource = maps;
       }

Read more: Kirk Evans Blog

Posted via email from jasper22's posterous