Silverlight RIA Services and AutoCompleteBox
“The Silverlight Toolkit is a collection of Silverlight controls, components and utilities made available outside the normal Silverlight release cycle. It adds new functionality quickly for designers and developers, and provides the community an efficient way to help shape product development by contributing ideas and bug reports. It includes full source code, unit tests, samples and documentation for 26 new controls covering charting, styling, layout, and user input.”
One of the controls available is the AutoCompleteBox. This represents a control that provides a text box for user input and a drop-down that contains possible matches based on the input in the text box. When this is used in conjunction with RIA Services, you have a complex solution with minimum code. Before starting you must download the Silverlight Toolkit and RIA Services July 2009 preview.
To begin with open Visual Studio 2008 and choose File > New > Project > Silverlight > Silverlight Application. A New Silverlight Application dialog will appear asking about the web application tied to this project. At the bottom of the dialog is a new section called Enable .NET RIA Services. Tick this box to enable RIA Services for the Silverlight project:
Open the web application and add a new ADO.NET Entity Data Model file to your project and name it Northwind.edmx. This example will connect up to the Northwind database. You can download it from here.
Connect to the Northwind database and select the Customers table from the Choose Your Database Objects dialog:
Click Finish when you’re done. Now that you’ve added your Customer object you must build your project. This is a must because the next step we will be adding a Domain Service Class file to the project, and it needs to discover the Customers object you just added. The next step is to right click on the web application and choose Add > New Item > Domain Service Class.
The domain service class is a new file that is specifically for RIA Services. Name the file NorthwindService and click Add. The Add New Domain Service Class dialog appears. Select the Customer object and click OK:
The file is created. A default method called GetCustomers has been created for you:
C#
public IQueryable<Customer> GetCustomers()
{
return this.Context.Customers;
}
VB.NET
Public Function GetCustomers() As IQueryable(Of Customer)
Return Me.Context.Customers
End Function
This is all that’s required for the web application. Open up the Silverlight application and add a reference to the System.Windows.Ria.Controls assembly:
This reference is required because I am going to use a new control that is part of the RIA services installation called the DomainDataSource control. This control is similar to the ObjectDataSource. It will be responsible for the connection to the database. Add the following xaml to the MainPage.xaml file:
<Grid x:Name="LayoutRoot">
<riaControls:DomainDataSource AutoLoad="True"
QueryName="GetCustomers"
x:Name="dds">
<riaControls:DomainDataSource.DomainContext>
<web:NorthwindContext />
</riaControls:DomainDataSource.DomainContext>
</riaControls:DomainDataSource>
<StackPanel Orientation="Vertical" x:Name="parent">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Contact Name:" />
<input:AutoCompleteBox
x:Name="filter"
FilterMode="StartsWith"
MinimumPrefixLength="2"
MaxDropDownHeight="150"
ItemsSource="{Binding Data, ElementName=dds}"
ValueMemberBinding="{Binding ContactName}"
Width="150" Height="25" VerticalAlignment="Top"
SelectionChanged="filter_SelectionChanged"
Background="#FFC11E1E">
</input:AutoCompleteBox>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Contact title: " FontWeight="Bold" />
<TextBlock Text="{Binding ContactTitle}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Contact name: " FontWeight="Bold" />
<TextBlock Text="{Binding ContactName}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Company Name: " FontWeight="Bold" />
<TextBlock Text="{Binding CompanyName}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Address: " FontWeight="Bold" />
<TextBlock Text="{Binding Address}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="City: " FontWeight="Bold" />
<TextBlock Text="{Binding City}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Region: " FontWeight="Bold" />
<TextBlock Text="{Binding Region}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Postal code: " FontWeight="Bold" />
<TextBlock Text="{Binding PostalCode}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Country: " FontWeight="Bold" />
<TextBlock Text="{Binding Country}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Phone: " FontWeight="Bold" />
<TextBlock Text="{Binding Phone}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Fax: " FontWeight="Bold" />
<TextBlock Text="{Binding Fax}" />
</StackPanel>
</StackPanel>
</Grid>
The first step is to tell Silverlight that you’re using a control in the System.Windows.Ria.Controls assembly by creating adding an XML namespace:
xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Ria.Controls"
The AutoCompleteBox needs an XML namespace to the System.Windows.Controls.Input assembly:
xmlns:input="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input"
These two XML namespaces are added automatically when you drag and drop the control from your toolbox. Now add the DomainDataSource control and set the QueryName property to the name of the method, GetCustomers, in the domain service class. AutoLoad must be set to True for the data to be loaded automatically. Lastly you need to assign the DomainContext to the NorthwindContext:
<riaControls:DomainDataSource.DomainContext>
<web:NorthwindContext />
</riaControls:DomainDataSource.DomainContext>
The AutoCompleteBox is bound to the DomainDataSource through element binding:
ItemsSource="{Binding Data, ElementName=dds}"
ValueMemberBinding="{Binding ContactName}"
The ValueMemberBinding property is bound to the ContactName. This means that when the user starts typing, it will be searching the customers table for matching contact names. If matches are found, the user will be able to select the record from the list provided. Run the project and type in MI to see two customers in the AutoCompleteBox.
Selecting any customer displays related information about them:
This is an easy way to get extra functionality in your project without adding tonnes of code. I hope you enjoyed reading it.
The entire source code of this article can be downloaded over here
If you liked the article, 
Subscribe to the RSS Feed or Subscribe Via Email
Malcolm Sheridan is an independent contractor who has been working with Microsoft technologies since VB4. Malcolm has worked with .NET since its inception and thoroughly enjoys ASP.NET.
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @
malcolmsheridan