Sunday, August 24, 2008

Introducing Silverlight Contrib

Silverlight Contrib

I've just started a new project on CodePlex called Silverlight Contrib.  The aim of this project is to offer the most comprehensive collection of free and open source Silverlight controls.  The first drop is very small, but with support from the community, I hope to grow this collection into a full suite of controls that you can incorporate into your solutions.

Interesting in Contributing?

I really need your help for this project to succeed.  I am currently seeking people that are interesting in working on the project with me.  If you are interested in contributing or helping with the code base, please send me a message.

If you have a control that you would like to incorporate into Silverlight Contrib, please let me know.  I am open to ideas for this project and I want community needs to drive this project as much as possible.

Feedback

Without your feedback, we are guessing.  Is there a feature that you would like to see added to Silverlight?  Please feel free to tell us your ideas, based on your input, we hope to incorporate these features into Silverlight Contrib for the world to use.

Current Release

The current release consists of controls that you may have already seen on my site in the past.  I've compiled these into Silverlight Contrib as a starting point.  I hope to continue to progressively improve these controls while adding new controls with each official release:

Future Ideas

I've compiled a short list of items that I was hoping to add to the project.  These are just ideas, and may not be good or even possible, but I figure it is a start!  What would you like to see in Silverlight Contrib?

  • Wheel-Mouse Capture
  • US Map Selector
  • Upload Control
  • Tree View
  • Round Gauge
  • Range Selector Control
  • Progress Bar
  • Pie Chart
  • Password Box
  • Number Up/Down Control
  • Masked Text Box
  • Logging
  • Image Reflection Wrapper
  • Save File Dialog Hack
  • Drawing Brush
  • Clock Control
  • Clipboard Access
  • Accordian Panel
  • Common Effects Library

PDANUG - Tuesday, September 9th, 2008

PDANUGTuesday, September 9th, 2008
Brian Hitney

Topic: Introduction to ASP.NET MVC

Tuesday, September 9th, 2008, is the next meeting of the Pee Dee Area .NET User Group.

Brian Hitney will give us an introduction to ASP.NET MVC and how this affects the way you write ASP.NET applications. ASP.NET MVC is an alternative to the commonplace Web Forms framework.  It helps to promote the following:

  • Clear separation of concerns
  • Testability - support for Test-Driven Development
  • Fine-grained control over HTML and JavaScript
  • Intuitive URLs


Brian Hitney

I graduated in mid 90's from Plattsburgh State University (New York) and have worked for major companies including Group W Network Services, Scholastic, Inc., and Coldwater Creek, Inc. Currently, I'm a developer evangelist (DE) for Microsoft, working in the Carolinas region. You can meet me at various locations around North and South Carolina, where I'll be interacting and presenting content to developers, communities, and companies. Prior to my DE role, I worked on a Windows Vista team in Redmond, Washington.

Blog: www.structuretoobig.com

Here is the tentative schedule:
6:00 PM - 6:20 PM Socializing / Free Dinner
6:20 PM - 6:30 PM Introduction, Sponsor Time, and News.
6:30 PM - 8:00 PM Presentations

Thursday, August 21, 2008

CoolMenu: A Silverlight Menu Control

imageI thought it would be cool to try building a reusable container control so I came up with CoolMenu.  You really have to try this one out to get the full experience, a screen shot just doesn't do it justice.  CoolMenu is a Silverlight container control that gives you a nice wave-like effect as you move your mouse over the menu items.  Clicking a menu item causes the item to bounce.

You could probably use this control in many scenarios.  Other than the obvious menu navigation scenario, some potential possibilities include:

  • Card Game - Show your current hand
  • Photo Gallery  - Show the pictures in the gallery and click to select the picture.
  • Toolbar - Activate a tool in your application or a weapon in a game.

Feel free to use this in your applications, I've provided the source code and a live demo below.  Enjoy!

Live Demo

Download Source Code

Wednesday, August 20, 2008

Adding Custom Collections to your Silverlight Controls

When building custom controls, you often need to allow the user to add a collection of items to the control either programmatically or through XAML declaration.  For example, suppose you are building a menu control and you need to allow the users of your control to add controls as children to your control.  The ListBox is one such example:

<ListBox Width="100" Height="300">
    <ListBoxItem Content="Testing1"></ListBoxItem>
    <ListBoxItem Content="Testing2"></ListBoxItem>
    <ListBoxItem Content="Testing3"></ListBoxItem>
</ListBox>

Each of the ListBoxItems are child controls of the ListBox control.  The ListBox arranges these child controls according to the logic contained in the ListBox control.  We can almost accomplish the same thing in our own controls with a minimal amount of logic.  I say almost because we cannot directly place the collection items as content to our parent control.  This is because custom ContentProperties are not supported for custom controls in SL2B2.  The workaround has the following form:

<local:Container>
<local:Container.Items>
    <local:ContainerItemCollection>
        <local:ContainerItem Text="Hello" />
        <local:ContainerItem Text="Silverlight" />
        <local:ContainerItem Text="World!" />
    </local:ContainerItemCollection>
</local:Container.Items>

</local:Container>

We can achieve the above syntax by adding an Items dependency and corresponding public wrapper property to our control class:

public static DependencyProperty ItemsProperty = DependencyProperty.Register(
    "Items",
    typeof (ContainerItemCollection),
    typeof (Container),
    null);

public ContainerItemCollection Items
{
    get { return this.GetValue(ItemsProperty) as ContainerItemCollection; }
    set { this.SetValue(ItemsProperty, value); }
}


In this example, ContainerItemCollection and ContainerItem are defined as follows:

public class ContainerItemCollection : ObservableCollection<ContainerItem>
{
}

public class ContainerItem
{
    public string Text { get; set; }
}


This will work just fine when adding items through your XAML declaration, but suppose you need to programmatically define your item collection at runtime.  In this case, you need to ensure that the collection exists before you begin to add items.  This can be done by adding a check on the Loaded event handler:


// Control Constructor
public Container()
{
    DefaultStyleKey = typeof (Container);
    this.Loaded += new RoutedEventHandler(Container_Loaded);
}

void Container_Loaded(object sender, RoutedEventArgs e)
{
    // Check for null collection and instantiate if it does not exist.
    if (this.Items == null)
        this.Items = new ContainerItemCollection();
}


Now you can add Items through code like so:

MyContainerControl.Items.Add(new ContainerItem { Text = "Hello" });
MyContainerControl.Items.Add(new ContainerItem { Text = "Silverlight" });
MyContainerControl.Items.Add(new ContainerItem { Text = "World!" });

 

I've included a sample project below.  This code worked as of Silverlight 2 Beta 2.  Enjoy!

Download Source Code

Monday, August 18, 2008

Silverlight: Write and Win

silverlight contest 

The SilverlightShow has just started a new contest for writing silverlight articles.  This is a great opportunity to contribute to the community and have the chance to win some nice prizes at the same time.  The contest starts today (Monday, August 18th, 2008) and concludes on Sunday, September 28th at 23:59 GMT.  Check out the contest site for more information including rules and prizes!  Good luck!

Sunday, August 17, 2008

A Really Nice Carousel Control

Last Thursday (August 7, 2008), I presented at the Greater Charleston .NET User Group.  Before the meeting, I had the chance to see a demonstration of really cool carousel control written by Matthew Drake.  I told him that I wanted to share it with the community and he gave me permission to post a demo on my site.  He was actually planning to submit the control to the Silverlight Control Builder Contest.  Unfortunately, there was some confusion about the deadline and he wasn't able to submit the control.  I really think the demonstration of his control is cool because it does a nice job simulating 3D support in an environment with limited capabilities.  In this example, the cars are simply a particular application of the control.  Consumers could place any object they wish on the various carousel "stations."

Screenshot

Application Source Code

Control Source Code

Live Demonstration

Wednesday, August 13, 2008

Congratulations to the Winner!

I'd like to personally congratulate, Faisal, the winner of the Silverlight Control Builder Contest!  Faisal submitted a really cool Fish Eye Grid control.  A special thanks goes out to Faisal for taking the time to develop and submit a control for the Silverlight Community!

fish_eye

FishEyeGrid

Silverlight control for representing items in a grid that renders them with a fisheye lens effect. When the mouse is moved over the grid, the items transform (scale & translate) to a fisheye lens effect. Items under the cursor become larger while those farther away become progressively smaller.

Source Code
Online Demo

Not What I Expected

So the Silverlight Control Builder Contest is now over and after all that excitement and anticipation from the community we got, a single, solitary entry.  One person took the time to build a Silverlight control and submit it to our contest.  I have to admit that we were expecting a little more of a response than that.  We actually received more unique vendor contributions than we did contestants.  To compound the disappointment, the contest site accumulated over 2,300 unique visitors with a total of about 9,500 page views throughout the duration of the contest, so it wasn't like nobody knew about the contest.

So, I'm trying to learn from this experience and I want to know why we didn't receive any entries.  If you were thinking about entering the contest, but didn't, I would be very interested to know why.  I really want to know your honest opinion of what was wrong.  Here are a few questions I have for the Silverlight Community:

  • Was the contest object unclear?
  • Were the rules too confusing?
  • Did the "US-Entries Only" requirement stop you?
  • Was the contest intimidating? 
  • Was the contest too difficult?
  • Was the contest simply not interesting?
  • Were the prizes not worth the effort?
  • Was there not enough time?
  • What would it take for you to enter the contest?
  • Is everyone just simply too busy to commit to something like this?

As Dave Campbell mentioned, I do consider the contest a failure, but I'm trying to make the best of the experience.  I really want to try the contest again and make right the things that were wrong in the first attempt.

I know Silverlight is new (especially version 2), but the community is growing fast and I really expected a better response from the community.  I really care about the success of Silverlight and community is a big part of that.

Sunday, August 10, 2008

Silverlight Gauge Control

gauge_controlAfter posting my Treadmill application, Andrew Duthie suggested that it would be cool if I made it so you could drag your mouse along the speed and incline visuals and have them update instead of repeatedly clicking the plus and minus buttons.  That gave me the idea for a new control.  What if we built a gauge control that you could adjust in a similar manner as described above?  That way, anyone could use it and furthermore, a properly designed control would allow us to define the "gauge" to be anything we would like and the control would work the same!

You could really use this control in a variety of situations.  For example, say you wanted to allow the user to adjust the volume of the audio in your application.  Simply drop an instance of this control into your application and subscribe to the PercentChanged event.  Using Expression Blend or Expression Design, you could design a speaker icon as your gauge.

So here it is, the Silverlight Gauge Control, I hope you find it useful.  Enjoy!


Live Demo

Download Source

Wednesday, August 06, 2008

A Customizable Silverlight Star Selector Control

I thought I would post the source code for a control that I typically demonstrate at my Silverlight presentations.  I usually show this control at the end of my presentation, so I never really get to talk about the control as much as I like. 

As you can probably infer from the image below, this control presents 4 stars/hearts/whatever and, by hovering your mouse over the control, you can change the state of the control.  Clicking on a particular star will set the rating for the selector. I think this screenshot really illustrates the awesome skinning capabilities of Silverlight.  Keep in mind, I built these control skins myself in very little time and I have no formal training in artistic design.  All of the skins are vectors and can be resized as required.  Also, since the control logic is encapsulated, creating a new skin does not require you to dive down into the code!

stars

I'd appreciate your feedback on the control.  I'm sure there are a lot of features I could add.  The source code and a live demo have been provided below.  Enjoy!

View Live Demo

Download Source Code