Home » Silverlight

Silverlight ComboBox

16 Feb 2009 8:02 PM 0 Comments Bookmark and Share kick it on DotNetKicks.com

I find Silverlight amazing.  If you begin digging into the controls included with the base Silverlight install you will find an incredible structure for almost all the controls.  The part I love the most is the ItemTemplate or more specifically the DataTemplate.

As an example I’ve taken a standard ComboBox and displayed a list of custom business objects very easily.  No more limitations of only a value and text representation.

ComboBoxDemo 

See a live demo or read on as I explain everything.

 

Business Object

To begin, I created a new project in the BlogEngine.Net solution named BlogEngine.UI.Objects.  This must be a Sliverlight Class Project as they will obviously will be needed in some future xaml but more importantly, I need to separate these objects from my Silverlight examples for use else where.

 

PostInfo Object

   1: using System;
   2:  
   3: namespace BlogEngine.UI.Objects
   4: {
   5:     public class PostInfo
   6:     {
   7:         public string Post { get; set; }
   8:         public string Date { get; set; }
   9:         public int Comments { get; set; }
  10:         public string AbsolutleLink { get; set; }
  11:     }
  12: }

 

WCF Service

If you’ve read my previous post “A Silverlight BlogEngine.NET Control” you will see how to create a WCF service and all the details there-in.  For this example, I’ve created a WCF service named BlogEngineService.

   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.ServiceModel;
   5: using System.ServiceModel.Activation;
   6:  
   7: using BlogEngine.Core;
   8: using BlogEngine.UI.Objects;
   9:  
  10: [ServiceContract(Namespace = "")]
  11: [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
  12: public class BlogEngineService
  13: {
  14:     [OperationContract]
  15:     public IEnumerable<PostInfo> FetchPostInfo()
  16:     {
  17:         var posts = from p in Post.Posts
  18:                     where p.IsVisible == true
  19:                     select new PostInfo()
  20:                     {
  21:                         Post = p.Title,
  22:                         Comments = p.Comments.Count,
  23:                         Date = p.DateModified.ToString("MMM dd, yyyy hh:mm tt"),
  24:                         AbsolutleLink = p.AbsoluteLink.ToString()
  25:                     };
  26:  
  27:         return posts;
  28:     }
  29: }

 

Silverlight UserControl

Here is my user control that demonstrates visually my business object.  Notice that I’m not displaying the AbsoluteLink anywhere in the xaml.  Yet each item will navigate to its corresponding page when clicked.

 

ComboBoxDemo.xaml

   1: <UserControl 
   2:     x:Class="BlogEngine.UI.ComboBoxDemo"
   3:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   4:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
   5:     Width="Auto" Height="Auto">
   6:     
   7:     <Grid x:Name="LayoutRoot" Background="BlanchedAlmond">
   8:     
   9:         <StackPanel Orientation="Vertical">
  10:             <ComboBox x:Name="cbItems" Width="Auto" Height="50" MaxDropDownHeight="200" 
  11:                       SelectionChanged="Items_SelectionChanged">
  12:                 <ComboBox.ItemTemplate>
  13:                     <DataTemplate>
  14:                         <StackPanel Orientation="Vertical" Width="Auto" Height="35" >
  15:                         
  16:                             <TextBlock Text="{Binding Path=Post}" />
  17:                             
  18:                             <StackPanel Orientation="Horizontal">
  19:  
  20:                                 <TextBlock Text="[" />
  21:                                 <TextBlock Text="{Binding Path=Date}" />
  22:                                 <TextBlock Text=" " Margin="0,0,10,0" />
  23:                                 
  24:                                 <TextBlock Text="Comments(" />
  25:                                 <TextBlock Text="{Binding Path=Comments}" />
  26:                                 <TextBlock Text=")]" />
  27:  
  28:                             </StackPanel>
  29:                         
  30:                         </StackPanel>
  31:                     </DataTemplate>
  32:                 </ComboBox.ItemTemplate>
  33:             </ComboBox>
  34:         </StackPanel>
  35:  
  36:     </Grid>
  37:     
  38: </UserControl>

 

ComboBoxDemo.cs

 

The power of the DataTemplate and its underlying bindings become a reality when I attach to the SelectionChanged event handler.  I simply cast the ComboBox SelectedItem to a PostInfo business object and I’m able to access all its properties, including the AbsoluteLink.

   1: using System;
   2: using System.ServiceModel;
   3: using System.Windows;
   4: using System.Windows.Browser;
   5: using System.Windows.Controls;
   6:  
   7: using BlogEngine.UI.BlogEngineServiceRef;
   8:  
   9: namespace BlogEngine.UI
  10: {
  11:     public partial class ComboBoxDemo : UserControl
  12:     {
  13:         public ComboBoxDemo()
  14:         {
  15:             InitializeComponent();
  16:             this.Loaded += new RoutedEventHandler(ComboBoxDemo_Loaded);
  17:         }
  18:  
  19:         protected void ComboBoxDemo_Loaded(object sender, RoutedEventArgs e)
  20:         {
  21:             BasicHttpBinding binding = new BasicHttpBinding();
  22:             EndpointAddress address =
  23:                 new EndpointAddress(
  24:                     new Uri(Application.Current.Host.Source,
  25:                             "../themes/13sides v2/BlogEngineService.svc").ToString());
  26:  
  27:             BlogEngineServiceClient client = new BlogEngineServiceClient(binding, address);
  28:             client.FetchPostInfoCompleted += new EventHandler<FetchPostInfoCompletedEventArgs>(FetchPostInfoCompleted);
  29:             client.FetchPostInfoAsync();
  30:         }
  31:  
  32:         #region Asynch
  33:         protected void FetchPostInfoCompleted(object sender, FetchPostInfoCompletedEventArgs e)
  34:         {
  35:             if (e.Error == null)
  36:             {
  37:                 cbItems.ItemsSource = e.Result;
  38:             }
  39:         }
  40:         #endregion
  41:  
  42:         #region Event Handlers
  43:         private void Items_SelectionChanged(object sender, SelectionChangedEventArgs e)
  44:         {
  45:             PostInfo p = (PostInfo)cbItems.SelectedItem;
  46:             HtmlPage.Window.Navigate(new Uri(p.AbsolutleLink)); 
  47:         }
  48:         #endregion
  49:     }
  50: }

 

I hope you enjoyed this simple Silverlight example.  With a little imagination anything can be done.  As an example, I’ve seen a ListBox displayed as Post-It Notes with each one angled a little different. I’ll try and code that one up soon and blog it.

Currently rated 5.0 by 1 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Comments

Comments are closed