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.
Introduction
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
Overview
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.
Slider
To create the slider we inherit several classes from ItemsControl each one adding some functionality.
ItemsSelector
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;
ItemContainersControl
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;
}
}
AnimatedSlider
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
Performance
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.
Conclusion
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.
Reference
Tip: Easy/Reusable selection with ISelectable and SelectionManager
http://www.silverlightshow.net/items/Tip-Easy-Reusable-selection-with-ISelectable-and-SelectionManager.aspx
How to inherit from ItemsControl and create a UniformGrid with containers
http://www.silverlightshow.net/items/How-to-inherit-from-ItemsControl-and-create-a-UniformGrid-with-containers.aspx
Custom ContentControl using VisualStateManager
http://www.silverlightshow.net/items/Custom-ContentControl-using-VisualStateManager.aspx