[Translated] Silverlight Getting Started: Part 5-integrating other controls

This is the fifth part of the Silverlight getting started series. Click here to view the directories of this series.You can downloadC #OrVisual BasicThe complete project file of this example application.

In the previous sections, We optimized data binding and saved the data in our independent storage region. Now let's integrate some other controls to make the user experience better.

Automatic completion input box

Do you remember to save the search condition as historical data after each search? Let's make it easier for them to use the search history when they enter it. We are going to use a control in the Silverlight toolkit -- automatically complete the input box to do this.

To do this, we need to add an Assembly reference to system. Windows. Controls. input, and then add an xmlns in your search. XAML file:

1 xmlns: input = "CLR-namespace: system. Windows. controls; Assembly = system. Windows. Controls. Input"

Here we will also change the name attribute of the automatically completed input box to searchterm:

1 <input: autocompletebox X: Name = "searchterm" fontsize = "14.667" margin = "275," width = "" 2 istextcompletionenabled = "true"/>

Now we need to provide data for it, so we need to add the following method in the Helper. CS class:

1 internal static string [] getsearchtermhistory () 2 {3 list <string> searchhistory = new list <string> (); 4 5 foreach (VAR item in isolatedstorageset.pdf. applicationsettings. keys) 6 {7 searchhistory. add (item. tostring (); 8} 9 10 return searchhistory. toarray (); 11}

Then, in the loaded event processor in search. XAML. CS, I added the call of helper. getsearchtermhistory:

1 void search_loaded (Object sender, routedeventargs E) 2 {3 searchresults. itemssource = PCV; // bind the DataGrid 4 _ timer. start (); // start the timer 5 searchfortweetsex (); // do the initial search 6 searchterm. itemssource = helper. getsearchtermhistory (); // populate AutoComplete 7}

After the program is loaded, a prompt is displayed when the user enters the search criteria:

Very useful!

Add History View

Now we have a user's search history, so we can provide some data in a new view called history. XAML. You have already created it in the view folder of the previous chapter. If you do not have one, follow me (via itemtemplate of Silverlight ). We may want to display a simple list of Historical search conditions here. This can be easily done by adding a ListBox To The XAML file:

1 <stackpanel> 2 <textblock X: Name = "headertext" style = "{staticresource headertextstyle}" 3 text = "serach term history"/> 4 <ListBox X: name = "searchtermhistory"/> 5 </stackpanel>

Then, use the method in helper. CS to bind new data to The ListBox just like in history. XAML. CS.

1 protected override void onnavigatedto (navigationeventargs E) 2 {3 searchtermhistory. itemssource = helper. getsearchtermhistory (); 4}

In this way, we can completely display the search history through method reuse.

Add navigation functions

Now there is a pair of views in the application, which makes the navigation framework take effect. You can directly navigate through the button, or use the forward/backward Browse button to do the same thing.

In fact, we can make the history view better, so I added an event processor to ListBox:

1 <ListBox X: Name = "searchtermhistory" selectionchanged = "searchtermhistory_selectionchanged"/>

The method corresponding to history. XAML. CS looks like this:

1 private void searchtermhistory_selectionchanged (Object sender, selectionchangedeventargs E) 2 {3 this. navigationservice. navigate (New uri (string. format ("/search/{0}", 4 searchtermhistory. selecteditem. tostring (), urikind. relative); 5}

Have you noticed the URI format I used? It starts with/search/{term}, so we need to map the application's navigation framework accordingly. Let's go back to mainpage. XAML and add this line under urimapper:

1 <urimapper: urimapping uri = "/search/{term}" mappeduri = "/views/search. XAML? Term = {term} "/>

Now we want the search. XAML page to be able to process it, which must be in search. XAML. CSOnnavigatedtoAdd this method:

1 protected override void onnavigatedto (navigationeventargs E) 2 {3 if (this. navigationcontext. querystring. containskey ("term") 4 {5 searchterm. TEXT = This. navigationcontext. querystring ["term"]. tostring (); 6 searchfortweetsex (); 7} 8}

Now, when you go to the history view and select a project, the program will automatically perform a search!

Summary

Combining other controls with third-party controls will help you ensure and even improve the user experience of end users. A large number of third-party control vendors provide powerful control packages. You can obtain their lists from my Silverlight controls. You must also take a look at all the controls used in Microsoft's Silverlight control package and sample programs.

Our applications can already work very well, but our user interfaces can be more beautiful. In Part 6, let's learn how to optimize the template without affecting the function.