Silverlight Tips of the Day - Blog by Mike Snow

Silverlight Tip of the Day #53 – MessageBox is now Available in Silverlight 2

In Silverlight 2 you can now put up Message Boxes. The call is simple and straight forward and can be made without any input from a user.

This method takes the following three parameters with the last parameters being optional:

1. String – The message you want to display
2. String – The caption you want to display
3. MessageBoxButton – Either MessageBoxButton .OKCancel or MessageBoxButton .OK

It returns a MessageBoxResult which you can use to check which button the user clicked.

Here is an example that displays an initial message, then prompts the user for input on whether to play again:

MessageBox.Show("You won the game!");

MessageBoxResult result = MessageBox.Show("Do you want to play again?", "Restart", MessageBoxButton.OKCancel);

if (result == MessageBoxResult.OK)

{

}

  Thank you,
--Mike Snow

 Subscribe in a reader

Silverlight Tip of the Day #52 – How to Popup a Browser Window

Let’s say a user clicks on a button and you want to popup a separate browser and point them to a specific web page. How do you do this in Silverlight?

Silverlight now supports a method called HtmlPage.PopupWindow(). For security reasons this call can only be made in response to any user input such as a button click.

To use this method you will need to add a reference to System.Windows.Browser;

The call to HtmlPage.PopupWindow() takes three parameters:

1. Uri – The location to browse to (I.e http://www.silverlight.net).
2. String – The name you want to call the target window.
3. HtmlPopupWindowOptions – A variety of options such as window positioning, sizing. Also, whether the toolbar and menubar are visible and more.

The following code demonstrates how to do this in response to a button click from the user:

private void Button_Click(object sender, RoutedEventArgs e)

{

    HtmlPopupWindowOptions options = new HtmlPopupWindowOptions();

    options.Left = 0;

    options.Top = 0;

    options.Width = 800;

    options.Height = 600;

    if(true == HtmlPage.IsPopupWindowAllowed)

        HtmlPage.PopupWindow(new Uri("http://www.silverlight.net"), "new", options);

}

*Note: This method is not supported in Safari because it does not implement the right NPAPI contract.

Thank you,
--Mike Snow

 Subscribe in a reader

Silverlight Tip of the Day #51 – How to Enable and Disable Controls

With Silverlight 2 RC0 Silverlight Controls can now be enabled/disabled via the property IsEnabled. This property is supported with all XAML controls found in the toolbox except those controls that are non-interactive (I.e. An ellipse, image, line, etc). By default all controls are enabled so you really only need to add this property if you want to set it to false in order to disable the control.

In addition to the property IsEnabled an event called IsEnableChanged is now available.

When setting IsEnabled=”false” the control is grayed out and will not respond to user interaction.

The following example has two sliders with the first one enabled and the second one disabled:

<Slider Canvas.Top="300" Width="300" Margin="20"></Slider>
<Slider IsEnabled="False"  Canvas.Top="340" Width="300" Margin="20"></Slider>

Screen shot:

Thank you,
--Mike Snow

 Subscribe in a reader

Silverlight Tip of the Day #50 – Main Game Loop Revisited!

In the recent release of Silverlight 2 RC0 there is a new event that fires once before the rendering of each frame in your browser. This rendering event is routed to the specified event handler after animation and layout have been applied to the composition tree. In addition, if changes to the visual tree force updates to the composition tree, your event handler is also called.

So, instead of having to use the DispatchTimer or Storyboard Timer,  you can now use this new event for your MainGameLoop(). To add the event all you have to do is make a call to:

CompositionTarget.Rendering += new EventHandler(MainGameLoop);

Looking back at our Snowflake demo, the following code was used to create a Storyboard timer to run the main loop:

Storyboard _snowflakeTimer = new Storyboard();
public Page()

{

    InitializeComponent();

    _snowflakeTimer.Duration = TimeSpan.FromMilliseconds(0);

    _snowflakeTimer.Completed += new EventHandler(SnowFlakeTimer);

    _snowflakeTimer.Begin();

}

private void SnowFlakeTimer(object sender, EventArgs e)

{

    MoveSnowFlakes();

    CreateSnowFlakes();

}

The new way to do it would be:

public Page()

{

    InitializeComponent();

    CompositionTarget.Rendering += new EventHandler(SnowFlakeTimer);

}

private void SnowFlakeTimer(object sender, EventArgs e)

{

    MoveSnowFlakes();

    CreateSnowFlakes();

}

Thank you,
--Mike Snow

 Subscribe in a reader

Silverlight Tip of the Day #49 – How to Implement a Progress Bar

With the release of Silverlight 2 RC0 there are three new controls we will be discussing that were not available for beta 2. The three new controls with a Tip of the Day for each include:

• ProgressBar
• ComboxBox
• PasswordBox

For this tip we will be exploring the ProgressBar control. The following code below shows how to declare a ProgressBar in your XAML:

<ProgressBar Foreground="Black" Foreground="White" Background="Gray" Value="25" Maximum="100" Width="200" Height="20" Margin="20">

Let’s take a look at each of these properties in the ProgressBar and what they do:

1. Foreground – The color of the acutal bar in the ProgressBar.
2. Background – The background color of the control.
3. Value – The starting value for the ProgressBar.
4. Maximum – The end value for the ProgressBar.
5. Width/Height – The width & height of the ProgressBar.
6. Margin – The gap between the control and it’s parent container. I find it easier to use Margin over setting Canvas.Left and Canvas.Top.

Add a timer and you can move the progress bar to it’s Maximum value:

namespace Password

{

    public partial class Page : UserControl

    {

        Storyboard _timer = new Storyboard();

        public Page()

        {

            InitializeComponent();

            _timer.Duration = TimeSpan.FromMilliseconds(10);

            _timer.Completed += new EventHandler(_timer_Completed);

            _timer.Begin();

        }

        void _timer_Completed(object sender, EventArgs e)

        {

            if (MyProgress.Value < MyProgress.Maximum)

            {

                MyProgress.Value++;

                _timer.Begin();

            }

        }

    }

}

If you run this control as is you will see it start at 25 and end when it’s full:

Begin:

End:

Now if you don’t want to use a timer and want the progress bar to repeat non-stop you can set the the property IsDeterminate to “true”

<ProgressBar IsIndeterminate="True"/>

You can further customize your ProgressBar by setting the Background and Foreground to any of the available brushes:

• Brush
• GradientBrush
• LinearBrush
• Imagebrush
• LinearGradientBrush
• RadialGradientBrush
• SolidColorBrush

Here is an example using an ImageBrush:

<ProgressBar  Value="25" x:Name="MyProgress" Maximum="100" Width="300" Height="50" Margin="20">
    <ProgressBar.Foreground>
        <ImageBrush ImageSource="Smile.png"></ImageBrush>
    </ProgressBar.Foreground>
</ProgressBar>

Begin:

End:

Thank you,
--Mike Snow

 Subscribe in a reader

EnvDTE.OutputGroup.get_FileCount() exception with Silverlight 2 RC0

If you installed Silverlight 2.0 RC0 with the Blend 2.5 June Preview on the box you will notice the installer blocked on this version of Blend and gave the following error message:

However, on the forums some customers have proceeded to install Blend 2.5 Preview on the box after installing Silverlight 2.0 RC0. These versions are not compatible and if you see the exception EnvDTE.OutputGroup.get_FileCount() in the designer of the Visual Studio tools it is most likely because you have these mismatched product versions.

If you are in this state you can repair your install with these steps:

1. Uninstall Blend 2.5 June Preview.
2. Uninstall the Microsoft 2 SDK in Add/Remove Programs:
   
   
   
3. Re-install the Silverlight Tools.

Note that this release of Silverlight only supports Blend 2.0 with Service Pack 1. The service pack can be downloaded here: A trial of Blend 2 can be found here if you haven’t already purchased it.

Thank you,
--Mike Snow

 Subscribe in a reader

Silverlight Tip of the Day #48 – How to Implement a Combobox

With the release of Silverlight 2 RC0 there are three new controls we will be discussing that were not available for beta 2. The three new controls with a Tip of the Day for each include:

• ProgressBar
• ComboxBox
• PasswordBox

For this tip we will be exploring the ComboBox control.

The following code below shows how to declare and size a combo box in your XAML:

<ComboBox Width="100">
    <ComboBox.Items >
        <ComboBoxItem Content="1st Item"></ComboBoxItem>
        <ComboBoxItem Content="2nd Item"></ComboBoxItem>
        <ComboBoxItem Content="3rd Item"></ComboBoxItem>
    </ComboBox.Items>
</ComboBox>

If you were to run this code you would see a combo box without any selected items:

Click the drop down button and you will see your three items displayed:

If you want to set a default selection for your combo box add the property IsSelected=”true” to any of your ComboBoxItems:

<ComboBox Width="100">
    <ComboBox.Items >
        <ComboBoxItem Content="1st Item"></ComboBoxItem>
        <ComboBoxItem Content="2nd Item"></ComboBoxItem>
        <ComboBoxItem IsSelected="True" Content="3rd Item"></ComboBoxItem>
    </ComboBox.Items>
</ComboBox>

If you run this code, you will see the 3rd item selected by default:

The ComboBox control also supports data binding. The following code below is an example implementation.

Few notes about this code:

• By setting the DisplayMemberPath property you can specify which data item in your data you want displayed in the ComboBox. In our case below we set this to be the Name. We could have also set DisplayMemberPath =”Price” which would than show the car prices in the ComboBox.
• Setting the SelectedIndex allows you to specify which item in the ComboBox you want selected.
• I have attached an event to detect when the selection in the ComboBox has changed. The SelectedItem member of our ComboBox will return us the car that is selected at any given time.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace Password

{

    public partial class Page : UserControl

    {

        ComboBox _cars = new ComboBox();

        public Page()

        {

            InitializeComponent();

            List<Car> carList = new List<Car>();

            carList.Add(new Car() { Name = "Ferrari", Price = 150000 });

            carList.Add(new Car() { Name = "Honda", Price = 12500 });

            carList.Add(new Car() { Name = "Toyota", Price = 11500 });

            ComboBox cb = new ComboBox();

            _cars.DisplayMemberPath = "Name";

            _cars.ItemsSource = carList;

            _cars.SelectedIndex = 2;

            _cars.SelectionChanged += new SelectionChangedEventHandler(cb_SelectionChanged);

            MyCanvas.Children.Add(_cars);

        }

        void cb_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            Car selectedCar = (Car) _cars.SelectedItem;

            int price = selectedCar.Price;

            string carName = selectedCar.Name;

        }

    }

    public class Car

    {

        public string Name { get; set; }

        public int Price { get; set; }

    }

}

Thank you,
--Mike Snow

 Subscribe in a reader

Silverlight Tip of the Day #47 – How to Implement a Password Box

With the release of Silverlight 2 RC0 there are three new controls we will be discussing that were not available for beta 2. The three new controls with a Tip of the Day for each include:

• ProgressBar
• ComboxBox
• PasswordBox

For this tip we will be exploring the PasswordBox control. Password boxes are great in that they hide the characters a user is typing for privacy and security reasons. It is essential to use this control whenever you are receiving a password from a user.

The following code below shows how to declare, size and position a password box in your XAML:

<PasswordBox Canvas.Top="20" x:Name="UserPassword"  Width="200"></PasswordBox>

By default Silverlight uses a “dot” as the character to hide the characters the user typed.

You can override this character using the PasswordChar property:

<PasswordBox PasswordChar="*" Canvas.Top="20" x:Name="UserPassword"  Width="200"></PasswordBox>

You can also do all this programmatically in your code behind:

PasswordBox passBox = new PasswordBox();

passBox.Width = 200;

passBox.SetValue(Canvas.TopProperty, (double)300);

passBox.PasswordChar = '*';

MyCanvas.Children.Add(passBox);

Note that we have to take the extra step to add it to our Canvas control so that it appears in the element tree.

Thank you,
--Mike Snow

 Subscribe in a reader

Silverlight Version 2 RC0 Released!!

Version 2 of the Silverlight developer runtime along with the Silverlight Tools is now available. This release candidate will give developers the chance to convert their sites from Beta 2 –> Release before the final release of the runtime is out.

Please check out http://silverlight.net/GetStarted/sl2rc0.aspx for download details that include the developer runtime, Silverlight Tools and Blend.

Also, check out ScottGu’s great blog on this release:

http://weblogs.asp.net/scottgu/archive/2008/09/25/silverlight-2-release-candidate-now-available.aspx

A document detailing the breaking changes between Beta2 and Release can be downloaded here.  Below I have outlined a high level overview of the content from this document. If you need further details on a particular breaking change, please refer to the document.

Breaking Change #1. Your Web Page.

If you have a project already developed for beta-1 or beta-2 you will need to make an adjustment to your web page that hosts the Silverlight control. For an HTML page change you will need to change the MIME type. To do this, open your HTML Page, change “x-silverlight-2-b1” or “application/x-silverlight-2-b2” to “application/x-silverlight-2”.

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

If you use an ASPX based Page, open your ASPX page and change the Minimum Version to “2.0.31005.0”:

<