(X) Hide this
    • Login
    • Join
      • Generate New Image
        By clicking 'Register' you accept the terms of use .

Custom controls: Weather forecast control: Part 1 - Introduction

(10 votes)
Denislav Savkov
Denislav Savkov
Joined Feb 11, 2008
Articles:   14
Comments:   6
More Articles
11 comments   /   posted on Aug 08, 2008
Categories:   General , Controls

This article is compatible with the latest version of Silverlight.

See also part 2, part 3 and the updated version with item by item sliding.


In this article series we'll show you how we made a custom weather forecast control. To create the control we used some of the developments from our previous articles. Here we review mostly the new things that were not reviewed before. In the end of the article there are links to those articles that are relevant. 


As you see in the end we have a a nice control with custom look that draws weather data from a web service and that is usable in real-life. Sometimes the web service may delay the data, try refreshing then.

Download full source code


The weather control has two main parts. The one is an items control showing today's weather in a number of cities. The other shows the weather forecast for the next 6 days for a selected city. For the first control we created a slider control with selection and containers and for the second we use simple ItemsControl  with DataTemplate and binding. In this article we review the structure of the slider control and in the next we will look at the code, templates and the web service we use.


To create the slider we inherit several classes from ItemsControl each one adding some functionality.


On top is ItemsSelector - a class that uses the SelectionManager from one of our previous article. The SelectionManager is a observer of the items in the ItemsControl. This will work only on containers that are ISelectable. We use such in this example.

protected ObservableCollection _selectableCollection;
private SelectionManager _selectionManager;
public event EventHandler SelectionChange;


It inherits ItemSelector and adds containers for the items. There are four more properties. Two of the properties - ContainerStyle,ItemStyle -  expose the Style property of the container and of the item. To allow easier customization without Styles there is are ItemWidth and ItemHeight properties that set. The width and height of the container are proportional to ItemWidth and ItemHeight and such that the height is equal to the height of the ItemsControl. The uniform grid that we presented has similar functionality. 

protected override void PrepareContainerForItemOverride( DependencyObject element, object item )
     base.PrepareContainerForItemOverride( element, item );
     ItemContainer item2 = element as ItemContainer;
     if ( ( this.ContainerStyle != null ) && ( item2.Style == null ) )
         item2.Style = this.ContainerStyle;
     if ( ( this.ItemStyle != null ) && ( item2.ContentStyle == null ) )
         item2.ContentStyle = this.ItemStyle;
     if ( item2 != null )
         item2.ContentWidth = ItemWidth;
         item2.Width = Height * ( ItemWidth / ItemHeight );
         item2.Height = Height;
         item2.ContentHeight = ItemHeight;


The final inheritor in this hierarchy. Adds a view that restricts the number of visible items, adds previous, next buttons, storyboards that animate the movement of the ItemsPresenter. Another functionality is that you can drag the items with the mouse.

Known issues


Adding many complex items to the control leads to poor performance of the movement animations. This probably can be fixed with the use of VirtualizingPanel instead of StackPanel. We will try to improve the performance for our next article using a technique that collapses the visibility of the items outside the visible area. Anyway, the same issue is valid for every panel with lots of children in it.

Web service

Sometime the web service that we use returns unexpected result and crashes the application.  Start the application again to resolve this problem.

Web server

Starting the application sometimes result in error 2103, 2104, well and many others but that is probably from my PC. I resolve again by refreshing the page in the browser.


In our next post we will continue our discussion and reference again our previous  examples and more code review. Also, we will take a look at the web service that we use.


Tip: Easy/Reusable selection with ISelectable and SelectionManager


How to inherit from ItemsControl and create a UniformGrid with containers


Custom ContentControl using VisualStateManager




  • -_-

    RE: Custom controls: Weather forecast control: Part 1 - Introduction

    posted by Gus on Aug 13, 2008 13:42

    Very nice,

    I got some of the functionality of your control and use in a project where I need to display a list parts with description and images from an XML file. It is working OK, but I when I click the right or left button on the control it slide the content a little bit a the time to the left or right.

    I need the control to go to the next or previous part . How can I use it so it will jump directly to the start of the next part or the position of the next part  that I need to display. I seen some image slider example in the Internet that do what I need here, they just go to display the next full image when you click next.

    Any help will be appreciated,

    Gus G

  • dejo

    RE: Custom controls: Weather forecast control: Part 1 - Introduction

    posted by dejo on Aug 14, 2008 02:38

    Hi Gus,

    the functionality you are talking about is simple to implement but it raises a problem with the mouse dragging. I will try to post tomorrow an updated version that has this type of scrolling and try to keep the mouse dragging.  I am taking ten days off but the next thing I'll be working on is probably something like a drag manager that helps with that and can be used on any object.

    Right now there's a way to achieve what you want by making a few changes in the Template of the AnimatedSlider in generic.xaml. You need to adjust manually the size of the By property of the left and right animations to match the width of your container, currently it is set to 40. The width of you container is  = control's Height / ItemHeight * ItemWidth.  You also need to adjust the left and right button's Interval property to match the duration of the left/right animations. Here is a sample with control height 140, item height 120, item width 110

                                     By="128.3" Duration="0:0:.2"/>

                                     By="-128.3" Duration="0:0:.2"/>


    This procedure is not convenient so we will try to add such functionality to the slider in future. Any feedback is welcome.

    Denislav Savkov


  • dejo

    RE: Custom controls: Weather forecast control: Part 1 - Introduction

    posted by dejo on Aug 15, 2008 11:03

    Hi Gus,

    please see the update we posted it could be just what you need


    Denislav Savkov

  • -_-

    RE: Custom controls: Weather forecast control: Part 1 - Introduction

    posted by Gus G. on Aug 17, 2008 15:42

    Thanks for your response, I will try all of your suggestions. I will post any results here, again thank you for your help. Keep up the good work.


    Gus G.

  • -_-

    RE: Custom controls: Weather forecast control: Part 1 - Introduction

    posted by Eric Kleeman on Nov 04, 2008 23:24

    All this shows is a blank white spot in IE6, nice

  • -_-

    RE: Custom controls: Weather forecast control: Part 1 - Introduction

    posted by Rocky on Nov 09, 2008 11:59

    This is really Nice. But is there a way where I can remove the left and Right button. I would want to tweak this control to use as a Carousel menu Control with Sub menus also as a Carousel. I donot want to have the right and left button. Also I need to have even handlers on clicking images on the Item control (the second set of images you displayed.)

    I am pretty new to Siverlight.

  • Enrai

    RE: Custom controls: Weather forecast control: Part 1 - Introduction

    posted by Enrai on Nov 11, 2008 03:14

    To remove the buttons, try removing/commenting them from the Themes/generic.xaml - the style for the AnimatedSlider, and then go to the AnimatedSlider.cs file and remove/comment everything related to the PreviousButton and the NextButton. The both are located in the ControlsLibrary project.

    To handle the click on the images create a handler for the MouseLeftButtonDown or MouseLeftButtonUp event of the Image control in the ItemTemplate of the ItemsControl.

    Hope this helps you, if you have more questions, don't hesitate to ask. :)

  • -_-

    RE: Custom controls: Weather forecast control: Part 1 - Introduction

    posted by Silverlight Travel on Nov 20, 2008 18:45

    How can we get the wether for other countries?


  • -_-

    RE: Custom controls: Weather forecast control: Part 1 - Introduction

    posted by Lost in Vista on Jan 31, 2009 13:27

    You're kidding, right? It said View It, and this is all tech, and doesn't show how the widget would actually LOOK.

  • Enrai

    RE: Custom controls: Weather forecast control: Part 1 - Introduction

    posted by Enrai on Feb 02, 2009 06:36

    In the beginning of the article there is a live demo of the widget. ;)

  • lnikolov

    RE: Custom controls: Weather forecast control: Part 1 - Introduction

    posted by lnikolov on Jan 13, 2011 16:58
    The article has been updated to the latest version of Silverlight and Visual Studio.

Add Comment

Login to comment:
  *      *