Controls

1. Introduction

I have been trying to get myself up to speed with the latest Microsoft technologies and more specially .NET 3.5,VS.NET 2008 and Silverlight/WPF. So rather than just ‘playing’ I have set myself a little application to write: a simple analog Silverlight clock. It is extremely simple application that I have been able to complete the first version of it just for few days (working only in my spare time, if I had any). The target of that article is to introduce some basic concepts of programming in Silverlight, such as: drawing simple elements, using styles, making simple transformation, as well as introducing some of the most important and powerful approaches in object oriented programming.

Source code

Introduction

With the Silverlight 2 release candidate arrived three new controls: PasswordBox, ProgressBar and ComboBox.  In this article we are going to explore some of the features of the ComboBox. Also we change the look of the control using a few templates based on the default control templates. You can see all the source code here.

Download source.

ComboBox and ListBox

The ComboBox control is very similar to the ListBox control. It derives from ItemsControl and Selector, it has ItemContainer property but it also has a few additional things that are connected with the drop down items menu.

Telerik's RadPageNavigation control meets Mini SilverlightShow

In the Q3 Release of the RadControls for Silverlight, which is compatible with the RC0, you can find the RadPageNavigation control. It provides Silverlight applications with navigation, navigation history and possibility to use the browser's back and forward buttons. These three features are great and via them we are able to give the users greater experience when using Silverlight applications. For example we can create a standard web site scenario using several Xaml pages and the RadPageNavigation control and I've done it. This article describes the whole process I went through in order to implement the functionality of the control, but before write it, I needed a project. After quite a wondering I decided to implement part of the functionality of SilverlightShow into a Silverlight application and soon the name of the project was also revealed - Mini SilverlightShow. I choose that name because the Silverlight implementation of the site will have less functionality and will be smaller in size. Creative, isn't it?

Here you can find the Mini SilverlightShow live demo and source code. Now let's get the things explained!

With the release of the Release Candidate version of Silverlight 2 three long awaited controls were presented - the PasswordTextBox, the ComboBox and the ProgressBar. Since the need of such controls were pretty big, a lot of custom controls were created and the existing ones have been extended in order to fill that need. Probably you've already read a couple of tutorials about creating your own ProgressBar control. We have also developed our own simple progress bar for the Voting control and I was ready to show it off in a separate article, but that's not necessary now. Instead of this we are going to take a look at the ProgressBar control that came with the release candidate and show some of its basic features.

Download source code

Update:  The demo above is converted to Silverlight 2 RC0. The only thing you have to change in order to run the code under Silverlight RC0 is to place the generic.xaml in a folder called "Themes" in the project of the voting control. Everything else is compatible with the release candidate.

During the progress of the Silverlight: Write and Win! contest - one has finished and in the end of September another one ended, we thought that it would be nice to create a simple Voting control in Silverlight that will host the poll for the articles in the contest. The custom control we've created is based on the ItemsControl and its items are also custom controls. The biggest advantage of this control is that it's independent on the type of the objects that you pass as ItemsSource. You just set which properties of your business object to be used as Text and as Value for the poll options. That way you don't have to change them according to the control. The control also has a simple progress bar that visualizes the percentage of the votes. 

Source code

Note: The source code that is available for download is the one used for the article. To create this demo and the voting control for the site I made some modifications to it. The reason I post the basic source code is that you may want to make your own modifications to the control - like allowing multiple votes or only one time voting, modifying the user experience and the styling, adding total votes and poll title, customizing the workflow in the control etc. If you are interested in the things I have modified, I'll gladly share them with you, otherwise you can easily make your own modifications.

Note: This article is submitted by Doug Blackmore for Silverlight: Write and Win contest.Thanks a lot, Doug! Hello All, Please drop a comment if you like it.

“It is time to vote now! Please, choose your favorite articles and enter your vote by going to contest page. Thank you!„

Like many others, we have wanted a combo box since the release of Silverlight, but failed to find a usable one. Rather than waiting to see if and when the RTM includes one, we decided to address that need ourselves. It includes templating, data binding, and auto complete functionality.

View the Demo

Download Source Code

Getting Started

The initial code for the combo box was obtained by reflecting (http://www.red-gate.com/products/reflector/) on the Silverlight ListBox control. This provided the initial xaml and C# for the dropdown portion of the combo box, so we renamed the controls from ListBoxItem to ComboBoxItem and ListBox to ComboBox.

See also part 1, part 2 and the update.

Introduction

In the last part of our article series about the weather control we take a look at the templates and the web service we use.

Making the templates

Common resources

We try to make the control change its look easy and without retemplating everything. That is why we define text styles and brushes and we use them throughout the templates we create.

<Color x:Name="DarkColor">DodgerBlueColor>

<Color x:Name="MediumColor">LightSkyBlueColor>

<Color x:Name="LightColor">WhiteSmokeColor> 

<SolidColorBrush x:Name="DarkBrush" Color="{StaticResource DarkColor}"/>

<SolidColorBrush x:Name="MediumBrush" Color="{StaticResource MediumColor}"/>

<SolidColorBrush x:Name="LightBrush" Color="{StaticResource LightColor}"/>

<Style x:Name="TextStyle" TargetType="TextBlock">

     <Setter Property="HorizontalAlignment" Value="Center"/>

     <Setter Property="FontSize" Value="12"/>

     <Setter Property="Foreground" Value="{StaticResource DarkBrush}"/>

 </Style>

 <Style x:Name="TextHeading" TargetType="TextBlock">

     <Setter Property="HorizontalAlignment" Value="Center"/>

     <Setter Property="FontSize" Value="14"/>

     <Setter Property="Foreground" Value="{StaticResource LightBrush}"/>

     <Setter Property="FontWeight" Value="Bold"/>

 </Style>

Thus by editing those few styles and brushes we can very easily change the look of the control, even though not that dramatically.

See also part 1, part 3 and the update.

Download full source code

What is the slider

Main part of the weather control we introduced is the slider.

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.

Last year I built a couple of WPF tag cloud applications that hooked up to my del.icio.us account and displayed the data using different visualisations which included a tag cloud in a variety of different flavours and I also used the Time Line Panel from the blendables control suite from Identity Mine. To access del.icio.us I used a .net library up on Source Forge originally developed for use in the del.icio.us Winforms client called Netlicious which was originally written for .net 2.0 by Nate Zobrist.