Professional, Software

Part 4: Search Application (Search Result View)

 Next step in the search application was to show the results returned by Live APIs in a grid view.

Here are the feature that I needed to have in this control with…

  1. This grid view also need a scrollbar so that depending on the size of the browser window, user should be allowed to scroll. I used the sample ScrollBar control that Silverlight 1.1 Alpha SDK shipped with a small fix.
  2. Individual Items in Grid can expand when user moves mouse over them and in the expanded state they can show some more information about the Image
  3. Individual items have fixed width/height and based on that NumberofColumns are calculated.
  4. Based on NumberofColumns and search results returned, number of rows are decided.
  5. GridView exposes Items property. I used the same ObservationCollection class that I had used in ToolBar sample.

Individual Item Behavior is controlled by a seperate control called GridViewItem GridViewItem supports…

  1. Expanding when mouse enters the control
  2. Making Height/Width of image visible
  3. Supports ClickEvent that application can use to do something.

When webservice call returns, Application creates a new GridView and starts adding individual GridViewItem to that class. After it is done, it adds GridView in the tree.

void SearchCompleted(IAsyncResult asyncResult)
{
    SearchService.LiveWebService liveresult = asyncResult.AsyncState as SearchService.LiveWebService;
    searchresults = liveresult.EndSearchImages(asyncResult);
    gridview = new GridView();
    foreach (SearchService.Result r in searchresults)
    {
        string imageurl = r.Image.ImageURL.ToLower();
        if (imageurl.Contains(".jpg") || imageurl.Contains(".jpeg") || imageurl.Contains(".png"))
            AddItemToGrid(r);
    }
    progressui.StopProgress();
    this.Children.Remove(progressui);
    progressui = null;
    this.Children.Add(gridview);
    UpdateLayout();
}

void AddItemToGrid(SearchService.Result result)
{
    GridViewItem gridviewitem = new GridViewItem();
    gridviewitem.Height = itemheight;
    gridviewitem.Width = itemwidth;
    gridviewitem.ImageHeight = "Height: " + result.Image.ImageHeight.ToString();
    gridviewitem.ImageWidth = "Width: " + result.Image.ImageWidth.ToString();
    gridviewitem.Source = new Uri(result.Image.ImageURL);
    gridviewitem.Click += new EventHandler<GridViewItemClickEventArgs>(gridviewitem_Click);
    if (gridviewitem.ValidImage == true)
        gridview.Items.Add(gridviewitem);
}

void gridviewitem_Click(object sender, GridViewItemClickEventArgs e)
{
    //do app logic
}

 

Source for these control is here.

I wish I had used animation instead of changing height/width of gridviewitem in code. It could have looked lot smoother.

Advertisements
Standard

One thought on “Part 4: Search Application (Search Result View)

  1. Pingback: Recursive Reflection : Part 4: Search Application (Search Result View)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s