As this announcement said, Silverlight 2.0 beta will be released sometime in Q1 and it will come out with a lot of enhancements and UI controls such as textbox, button and etc.But it wont’ come fast. We probably need to wait a lit bit longer to get that release. So, what would you do if you want to develop the silverlight application with Alpha release? You may probably need to develop your own custom silverlight controls or find the opensource controls which are contributed by other developers. Yes. This is what I’m doing for now. As you are one of my readers of my blog, I will share you some controls that I created and some controls that I found and tested in this article. I hope it will save a lot of your time (at least) .

I added the sourcecode of all controls in my sample because there are a few issues in some of the controls since people used the different version of Silverlight. I have fixed, tested and uploaded them for you all. However, you should thank to the original authors for their most valuable contributions and all credits go to them.

One more thing I gotta tell you is that you can’t expect too much from those controls since those are in too early stage. Some may have a few bugs, some may not be so ease to use and some are lack of properties supports and etc. Anyway, I hope you can at lease learn something from controls and will be able to inspire your own controls.

Download : Demo Silverlight project and all controls sourcecode

Contents

• Freshy Toolbar
• Vivekdalvi’s Toolbar
• Silverlight ToolBar DotNetNuke site
• Silverlight 2.0 Alpha SDK (Button Control)
• Silverlight XP-style Button
• Silverlight 2.0 Alpha SDK (Slider Control)
• Silverlight 2.0 Alpha SDK (ScrollViewer Control)
• Silverlight 2.0 Alpha SDK (Listbox Control)
• Vivekdalvi’s Progressbar
• Vivekdalvi’s Hyperlink
• Silverlight Combobox Control
• Silverlight Checkbox Control

Freshy Toolbar

This is the toolbar control that I created based on Vivekdalvi’s toolbar. After downloading the sample from this article, You can find the sourcecode of this control under Toolbars folder of SilverlightUIControls project (attached sample).

How to use it?

• Add the SilverlightUIControls project in your solution file.
• Add the code below in the base Canvas of your xaml file (e.g. page.xaml) that you want to load (not silverlight user control)

  xmlns:controls="clr-namespace:Silverlight.Samples.Controls;assembly=ClientBin/Silverlight.Samples.Controls.dll"
  

• Add the code below in xaml file where you want to show that toolbar. (Note: You probably need to adjust the left, top, width and height properties of toolbar control to meet your need. )

  <controls:FreshyToolbar x:Name="Freshytoolbar"
  Width="500" Height="31"  Canvas.Left="20" Canvas.Top="70"
  />
  

• The following code is for adding the toolbar items to the toolbar.

  FreshyToolbar freshytoolbar = (FreshyToolbar)this.FindName("Freshytoolbar");if (freshytoolbar != null) {
  freshytoolbar.ToolBarCollection.Add(new FreshyToolbarButton("Home", new Uri("http://michaelsync.net")));
  freshytoolbar.ToolBarCollection.Add(new FreshyToolbarButton("About", new Uri("http://michaelsync.net/about-2")));
  freshytoolbar.ToolBarCollection.Add(new FreshyToolbarButton("Guest", new Uri("http://michaelsync.net/guest-book")));
  }
  

Vivekdalvi’s Toolbar

This toolbar is created by Vivekdalvi from Microsoft. (I’m not sure whether this is his real name or not. I found that name with his photo in one comment so let me call him like that.)

It looks a lit bit strange. I’m not so sure why he created like that. But I’m sure that if you read the sourcecode, you will definitely get the way for inspiring your own custom toolbar or menu.

How to use it?

• Follow step 1 to 3 from Freshy Toolbar sample
• Put the line below in xaml file that you want the control to show.

  <controls:Toolbar x:Name="toolbar" Canvas.Top="190" Canvas.Left="20" Height="50" Width="500"/>
  

• The following code is for adding toolitems to the toolbar.

  Toolbar _toolbar = this.FindName("toolbar") as Toolbar;for (int i = 0; i < 8; i++) {
  ToolbarButton tb = new ToolbarButton();
  string uri = "images/image" + (i + 1).ToString() + ".jpg";
  tb.Image = new Uri(uri, UriKind.Relative);
  tb.ToolTip = uri;
  //tb.Click += new EventHandler<EventArgs>(tb_Click);
  _toolbar.ToolBarCollection.Add(tb);
  }
  

Note: Here is the instruction from original author.

Silverlight ToolBar DotNetNuke site

This is the toolbar control for DotNetNuke users.

Here is the original post for that control. As I’m not using DotNetNike, I didn’t add the sourcecode in my sample file. So, you will have to go and read the instruction about that toolbar.

Silverlight 2.0 Alpha SDK (Button Control)

This button control (including sourcecode) is released with Silverlight 2.0 Alpha SDK. It doesn’t look good that much but if you read the sourcecode then you will get the idea how to create your own button control for Silverlight application.

How to use it?

• Follow step 1 to 3 from Freshy Toolbar sample
• Paste the following code in XAML file.

  <controls:Button Canvas.Top="480" Canvas.Left="20" Text="Button1" />
  <controls:Button Canvas.Top="480" Canvas.Left="150" Text="Button2" />
  <controls:Button Canvas.Top="480" Canvas.Left="280" Text="Button3" />
  

• Run the application. That’s all.

Silverlight XP-style Button

This button is available to download from this link. It looks exactly like XP button. But there are a few issues with this button. (e.g: Width or height can’t be increased. or etc) For the time being, the sourcecode is not available but I asked the original author of this control. He said that he is implementing more features for that control and he will write the step-by-step guide for making this control in his blog. (Hey The Reddest! I’m waiting your article. )

How to use it?

You can read this article “How to use the custom control in Silverlight?” if you want to know how to use that control in your own project.

Silverlight 2.0 Alpha SDK (Slider Control)

This is the horizontal slider bar that come along with Silverlight 2.0 Alpha SDK. You can easily change the orientation at runtime. In my example, I used the sliderbar control with image control. If you move the slider then the opacity property of image will be changed. There is very important notes as below that you must read in that sample.

A slider needs to be provided a Range in order to be functional and show up on screen. Currently you can only do this in code-behind, not in XAML markup because there is no type converter support.

BTW, that photo looks cool, isn’t it? (Thanks to Phitar for that photo.)

How to use it?

• Follow step 1 to 3 from Freshy Toolbar sample
• Add the code in XAML file

  <controls:Slider x:Name="hSlider" Canvas.Top="580" Canvas.Left="140"  />
  

• Specify the Range from cs file.

  hSlider.Range = new ValueRange(0, 11);
  hSlider.Value = 10;
  //vSlider.Orientation = Orientation.Vertical;
  hSlider.ValueChanged += new EventHandler(hSlider_ValueChanged);void hSlider_ValueChanged(object sender, EventArgs e) {}
  

Silverlight 2.0 Alpha SDK (ScrollViewer Control)

This is the Scrollviewer control for Silverlight application. This control is shipped with Sliverlight 2.0 Alpha SDK. What I did in my sample is that I created the big canvas with image in code. Then, add that canvas to the content property of ScrollViewer control. (I think there are some issues with calculating the height and width of canvas. )

Note: Thanks to lorna87 for this photo.

How to use it?

• Follow step 1 to 3 from Freshy Toolbar sample
• Add the scrollbar in XAML file

  <controls:ScrollViewer x:Name="scrollViewer1" ScrollableHeight="60" ScrollableWidth="2"
  Width="300" Height="300" Canvas.Left="20" Canvas.Top="950" />
  

• then, you have to set something that you want to show in ScrollViewer to the content property of Scrollviewer. For the time being, you won’t be able to place any control inside the ScrollViewer tag. In order to solve this problem, there are two wordaround so far. 1) You can create the base canvas in XAML view and place all controls that you want in that canvas. Then, remove that canvas from the page at runtime and set it to the content of Scrollviewer control. This is the way which is used in SDK sample. 2) If you don’t want to do that, you can create all controls that you want on the fly. then, set it to the content of Scrollviewer. This is the way that I used in my sample. Actually, those two workarounds are so similar. So, you can choose either way.In my example, the following code is written in PageLoad event.

  Canvas canvasForScrollViewer = new Canvas();
  Image _img = new Image();
  canvasForScrollViewer.Width = 1200;
  canvasForScrollViewer.Height = 1200;
  _img.Source = new Uri("images/waferfall.jpg",UriKind.Relative);
  canvasForScrollViewer.Children.Add(_img);
  scrollViewer1.Content = canvasForScrollViewer;
  

Silverlight 2.0 Alpha SDK (Listbox Control)

This control is shipped with Silverlight Alpha SDK. It doesn’t look nice in original so that I made a few minor changes and make it look like that below.

How to use it?

• Follow step 1 to 3 from Freshy Toolbar sample
• Add the listbox control in XAML file.

  <controls:ListBox x:Name="listBox" Canvas.Top="960" Canvas.Left="400"  Width="200" Height="249"/>
  

• Write the code in Constructor

  for ( int i = 0; i < 15; i++ )
  {
  listBox.Items.Add (ListItem (i));
  }
  listBox.UpdateItems ();
  

• Add the following function

  static int colorCounter = 50;
  // The ListItem method creates and returns one FrameworkElement
  // Each call results in an element with a different background color
  // then the previous
  private FrameworkElement ListItem(int i) {
  // our FrameworkElement will be a Canvas
  Canvas canvas = new Canvas();
  canvas.Width = 200;
  canvas.Height = 31;// in it we add a rectangle...
  Rectangle rect = new Rectangle();
  Color color = Color.FromArgb(0xff, (byte)(colorCounter % 256),
  (byte)((colorCounter + 50) % 256),
  (byte)((colorCounter + 120) % 256));rect.StrokeThickness = 1;
  rect.Stroke = new SolidColorBrush (Color.FromArgb (0xFF, 0x84, 0x7E, 0x7E));
  rect.Width = 200;
  rect.Height = 31;
  rect.SetValue(Canvas.TopProperty, 0);
  rect.SetValue(Canvas.LeftProperty, 0);
  colorCounter += 21;
  canvas.Children.Add(rect);//... and some text
  TextBlock tb = new TextBlock();
  tb.Text = "Item" + i;
  tb.Height = 21;
  
  tb.SetValue(Canvas.TopProperty, 6);
  tb.SetValue(Canvas.LeftProperty, 50);
  canvas.Children.Add(tb);
  
  return canvas;
  
  }
  

Vivekdalvi’s Progressbar

This is another control created by Vivekdalvi.

I fixed two issues in that control. If you run my example, you can click one of those buttons to change the progress color.

Vivekdalvi’s Hyperlink

This is also another control created by Vivekdalvi. I used it in my previous article.

Silverlight Combobox Control

I found this control from this link. The original control is written in Javascript and XAML. I changed that control to Silverlight 2.0 User control.

There are two issues in that controls. First, it won’t show the scrollbar in Itemlist. Second, if you click somewhere in Canvas while the combobox is opening, it won’t close. As I said earlier, you will get the idea about how to create combobox in Siliverlight. Plus, you will be able to use that control in your project with a few minor modification.

How to use it?

• You can bind the combobox with list<string> as below.

  List<string> data = new List<string>();
  data.Add ("Michael Sync");
  data.Add ("Michelle");
  data.Add ("Lilian");
  data.Add ("Julia");
  data.Add ("Alice");
  
  combobox1.DataSource = data;
  combobox1.DataBind ();
  

Silverlight Checkbox Control

This is the modified version of Checkbox control created by one MVP. I converted this control to Silverlight 2.0 user control and added one feature which you can select to show “cross” (middle one) or “mark” (last one) in the checkbox.

I think it would be great if we can some animations for hovering.

Conclusion

That’s all for now. Three more controls (Textbox, Radiobutton and Chart) will be coming soon. (Hey don’t forget to subscribe my feed.) Even though those controls are not so perfect, you will be able to use them in your silverlight project with very minium efforts before Microsoft release the Silverlight 2.0 beta. If you have cool Silverlight 2.0 controls (not Javascript), please let me know. If you found some issues and want to contribute the fixes that you made, please contact me. I’m really appreciate it. Thanks a lot for visiting my blog.