OpenSource Silverlight 2.0 Controls and how to use them 37

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).

Freshy Toolbar

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.)

Free and Opensource Silverlight Toolbar

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.

Silverlight ToolBar DotNetNuke site

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.

Silverlight 2.0 Alpha SDK - Button

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. )

Silverlight XP Button

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.

Slider bar - Silverlight Control
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. )

ScrollViewer - SDK

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.

Silverlight Listbox Control

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.

Silverlight Progressbar Control

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 Hyperlink Control

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.

SDK - Silverlight Combobox

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.

Silverlight 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.

37 thoughts on “OpenSource Silverlight 2.0 Controls and how to use them

  1. Reply Richard Jan 9,2008 6:34 am

    Yayyyyyy Mike… thanks alot… this is what i was loooking for… thanks for making the sourcecode downloadable, putting the screenshots and fixing the issues for us.. :) Thanks.. looking forward more controls ….

  2. Reply Sohail Iqbal Jan 9,2008 8:29 am

    This is real cool stuff. Very generous Michael. thanks a lot :)

    I have a suggestion here…why dont you move forward and setup an opensource project on CodePlex, making this initial set of controls as foundation. Who knows this set of simple controls may inspire sophisticaed open source apps in silverlight.

  3. Reply Michael Sync Jan 9,2008 8:55 am

    Thanks. Richard. :)

    why dont you move forward and setup an opensource project on CodePlex, making this initial set of controls as foundation.

    Thanks for suggestion, Sohail.

    The most of controls (except freshy toolbar) are created by other great developers. but they forget to change the version and they are so busy to fix the issue… so, I just modified their codes and sharing with you all… I also want to do as you suggested. It would be great if there are some developers who can participate in that development. However, I will add more feature and more fixes for those controls. I’m thinking to develop opensource silverlight application and thinking to use those controls in my application..

    I’m waiting the Silverlight 2.0 beta version.. I hope MS will add a lot of nice controls in that release.

    Who knows this set of simple controls may inspire sophisticaed open source apps in silverlight.

    ya… Thanks. :)

  4. Reply Nas Jan 9,2008 2:38 pm

    Great post – thanks for rounding them all up into one place! :)

  5. Pingback: NasKhan.com » Blog Archive » Picks of the day...

  6. Reply Michael Washington Jan 10,2008 9:13 am

    Thanks for the mention. There is a non DotNetNuke version of my Silverlight Toolbar here:

    http://www.adefwebserver.com/DotNetNukeHELP/Misc/Silverlight/SilverlightToolbar/

  7. Reply Daniel Vaughan Jan 15,2008 1:04 am

    Hey great post Michael. Your blog is becoming a terrific resource. Excellent.

    Daniel

  8. Pingback: Michael Sync » Consuming ADO.NET Data Service (Astoria) from Silverlight

  9. Reply andy Jan 21,2008 10:57 am

    Hi Michael,

    This is great. I try to run and learn it. And I have a question. hope you can help me to solve it.
    I want to add child control into AXML file instead of the CS file by this code

    Is it possible? Cause I run it and got error code “FreshyToolbar does not support FreehyToolbarButton as content”

    Thanks for advise

    Andy

  10. Reply andy Jan 21,2008 10:59 am

    Hi Michael,

    This is great. I try to run and learn it. And I have a question. hope you can help me to solve it.
    I want to add child control into AXML file instead of the CS file by this code

    [controls:FreshyToolbar x:Name="Freshytoolbar"
    Width="500" Height="31" Canvas.Left="20" Canvas.Top="70"]
    [controls:FreshyToolbarButton/]
    [/controls:FreshyToolbar]

    Is it possible? Cause I run it and got error code “FreshyToolbar does not support FreehyToolbarButton as content”

    Thanks for advise

    Andy

  11. Reply Michael Sync Jan 21,2008 6:35 pm

    Hi Andy,

    Sorry for late reply. I just wake up…

    I want to add child control into AXML file instead of the CS file by this code

    I’m sorry to say that it doesn’t support like that. I’m waiting SL 2.0 beta release…. I will update the code when we got beta.

  12. Reply Pari Jan 30,2008 11:44 am

    Hi,
    I am looking for a menu control and on click on menu opening silverlight pages.

    Thanx in Advance,
    Pari

  13. Reply Bala Feb 5,2008 2:46 am

    Thanks a lot.

  14. Reply Ryan Feb 10,2008 11:41 pm

    When attempting to add the FreshyToolbar as you instructed, I get the following error:

    “The type or namespace name ‘FreshyToolbar’ does not exist in the namespace ‘Silverlight.Samples.Controls’ (are you missing an assembly reference?”

    I did add the dll from the UIControls as a reference to my project as well.

  15. Reply Michael Sync Feb 11,2008 7:54 am

    “The type or namespace name ‘FreshyToolbar’ does not exist in the namespace ‘Silverlight.Samples.Controls’ (are you missing an assembly reference?”

    Have you added xmlns:controls in Page.xaml?

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

  16. Reply Ryan Feb 11,2008 11:06 pm

    Yes, I did. I also copy and pasted the FreshyToolbar definition as used in your sample project:

  17. Reply Michael Sync Feb 12,2008 2:46 am

    Hey Ryan,

    Are you running my sample or Did you add the user control in your own project? Is that project the silverlight user control library or silverlight project?

    You can’t add the custom control in Silverlight project. You can simply copy Silverlight.Samples.Controls.dll from my sample and add it your project. OR you have to create new silverlight project and add my user control in that project.

  18. Reply Ryan Feb 12,2008 4:05 pm

    I think I see what I did. I believe that I referenced the wrong dll in the controls project (the one in the client bin didnt work?). I have it working now, thanks for your help.

  19. Reply Michael Sync Feb 12,2008 6:34 pm

    Oh. you refereced the wrong dll? Okay. man. :) I’m glad to hear that you have solved your problem.. :)

  20. Reply The Reddest Feb 20,2008 6:49 am

    Hey Michael, just thought you’d like to know that we finally made that Silverlight XP Button tutorial. You can see it here:

    http://blog.paranoidferret.com/index.php/2008/02/20/creating-an-xp-style-wpf-button-with-silverlight/

  21. Pingback: Mario Meir-Huber : Mix08: Silverlight 2.0 Beta steht in den Startlöchern

  22. Reply Vivek Dalvi Mar 19,2008 6:28 pm

    Yes that is my real name :)

  23. Reply Fallon Massey Mar 21,2008 12:28 am

    Are you going to update these controls for SilverLight 2.0 beta 1?

    I tried, and got it to compile, but it dies when I use the controls in the XAML. Dies in Initialization.

  24. Reply Fallon Massey Mar 22,2008 2:10 am

    Further report:

    I converted the project to SilverLight 2.0 Beta 1, and ALL of the controls that derive from the ControlBase work just fine when used in code, I can’t seem to get them to work in the XAML.

    I may not be using the others correctly, but I’m not sure.

    The majority of the errors in 2.0 revolve around mouse events and routed events, and were easy fixes.

    However, I still would like to know your plans. Even though Microsoft has implemented the majority of your controls, they still lack a ComboBox(which you have).

    So do you have any plans to update the library to 2.0?

    Thank You.

  25. Reply Michael Sync Mar 22,2008 11:24 am

    Hello Fallon,

    Sorry for late reply.

    Since those controls are for SL 1.1 Alpha, it doesn’t work with SL 2 beta1.

    Those controls are just a temp things before SL2 releases. but we got SL 2 beta that has the most of standard controls that we need. So, I don’t think we should upgrade those controls to SL2.

    Can you tell me which control you want me to upgrade? If you are really need this, I will see what I can do..

  26. Reply Fallon Massey Mar 22,2008 4:11 pm

    I agree, most of the controls exist in SL2.

    The TextBox is the ONLY one I would like to see work, because there is no source for it in SL2, and I can make the ComboBox work in code.

    I assume you have my email address, and I appreciate the offer and will understand if paying jobs get in the way(lol).

    Thanks

  27. Reply Fallon Massey Mar 22,2008 4:19 pm

    BTW, I can send you the project I converted, it compiles just fine and most of the controls work in code.

    It might save you some time, let me know.

  28. Reply Michael Sync Mar 23,2008 6:11 am

    Hi Fallon,

    thanks. I will mail you…

  29. Reply JohnV Apr 3,2008 11:01 am

    I have a problem when opening your sample project. Here is the error
    “C:\ProgramFiles\MSBuild\Microsoft\VisualStudio\v9.0\Silverlight\Microsoft.Silverlight.Csharp.targets” was not found.
    How can I solve this problem?

  30. Reply Michael Sync Apr 3,2008 6:28 pm

    Do you have Silverlight 1.1 (2.0) Alpha installed? because this project is for 2.0 Alpha… not for Silverlight 2 beta1.

  31. Reply Max Jul 26,2008 10:29 pm

    I need Silverlight 2.0(beta2) ControlsOpenSource now. Can you mail me?Thank you!

  32. Reply Michael Sync Jul 26,2008 10:59 pm

    Hi Max,

    Which control do you need? I think the most of them are already converted to Silverlight 2 beta2.

  33. Reply Max Jul 26,2008 11:25 pm

    ComboBox, Thank you!

  34. Reply Max Jul 27,2008 6:29 pm

    Thank you very much!

  35. Pingback: Visão Widescreen » Blog Archive » Silverlight: dicas para seus estudos

Leave a Reply