in Silverlight

OpenSource Silverlight 2.0 Controls and how to use them

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.

Leave a Reply

33 Comments

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

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

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

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

    Thanx in Advance,
    Pari

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

  9. “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”

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

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

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

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

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

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

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

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

  18. 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?

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

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