Autocomplete in Silverlight

Posted in Programming,Silverlight by ary on the September 26th, 2008

I’ve written a simple class to allow adding autocomplete to a TextBox. An example of how to use it is:

In the XAML file:

<TextBox x:Name="uiText" Width="100" Height="30"
    manas:Autocomplete.Suggest="DoSuggest" />

In the class file:

// The texts we want to suggest
private string[] options = new string[]
{
    "Al", "Amiko", "Angla", "Anglujo", "Ankaux", "Antaux", "Atomo", "Auxto",
    "Bebo", "Bela", "Birdo",
}

// The method we have to implement to offer suggestions
public void DoSuggest(string text, SuggestCallback callback)
{
    // Don't suggest if there's no text
    if (text.Length == 0)
    {
        callback(null);
        return;
    }

    var result = new List();

    // See which options have as a prefix the text entered by the user
    foreach (var option in options)
    {
        if (option.StartsWith(text, StringComparison.InvariantCultureIgnoreCase))
        {
            result.Add(new Suggestion() { DisplayString = option,
                                                      ReplaceString = option });
        }
    }

    callback(result.ToArray());
}

As in a previous post, I use the technique to specify an action to happen in the XAML, and it’s implementation in the class file, just like an event handler.

Of course, instead of using an hardcoded options array, these could be requested in the DoSuggest method to a web service, or requested from another class.

The suggestions are shown in an unstyled ListBox, but it should be easy to style, and even to improve the code to support icons in the suggestions, or any other control.

For this to work, the RootVisual of your application must be a Canvas, since otherwise you can’t place arbitrary floating elements on top of it.

Here’s the full code in case someone finds it useful.

(+) Show Code

5 Comments

Embedding YouTube videos in Silverlight

Posted in Programming,Silverlight by ary on the September 11th, 2008

There’s no straight way of embedding YouTube videos in Silverlight. What you can do, however, is to create a floating div over the Silverlight plugin, whose content will be the YouTube video control. For this purpose, I wrote a simple class to make it easier to do this.

The usage is simple:

// ZCcedd9EfHI is the id of the video to show
YouTubePlayer player = new YouTubePlayer("ZCcedd9EfHI")
{
    Top = 100,
    Left = 200,
    Width = 400,
    Height = 400
};

player.Embed();

// And, once you want to remove the video from the page...
player.Dispose();

That’s it. Of course, you’ll have to compute the Top, Left, Width and Height values if you want to center the video inside a particular Silverlight control. You can do this computation in the Loaded event of that control.

And the best thing is, you can save a reference to the YouTubePlayer instance and, in case the Silverlight plugin is resized or moved, changing the Top, Left, Width and Height properties will automatically execute javascript code to move/resize the player.

Here’s the full code in case someone finds it useful.

(+) Show Code

8 Comments

Manas template - Built for Wordpress 1.5