From Silverlight 2 to WPF

  • Article

I'm a new member of the WPF documentation team, fresh off of Silverlight 2. I worked on WPF many years ago when it was just a baby. We wrote our samples in notepad and compiled with msbuild. Now it feels like such a luxury coming back and having more tools than I know what to do with.

But in honor of moving over from Silverlight, I thought I would do something really cool, like port one of my simple Silverlight-based samples to WPF. I figured I could copy the code over, show all the ways I would WPF-ize it. But it turned out to be a little boring.

All I'm doing is creating a TextBlock that spans multiple columns. The ColumnSpan value is determined by the value selected in the ComboBox.

Here's the Silverlight code:

<Grid x:Name="LayoutRoot" ShowGridLines="True">

<Grid.ColumnDefinitions>

<ColumnDefinition />

<ColumnDefinition />

<ColumnDefinition />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<TextBlock x:Name="txt1" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="{Binding}"

Text="This text can span multiple columns" FontSize="16" TextWrapping="Wrap" />

<TextBlock Grid.Row="1" Text="Select the ColumnSpan"/>

<ComboBox x:Name="cb1" Grid.Column="1" Grid.Row="1" ItemsSource="{Binding}" SelectionChanged="ComboBox_SelectionChanged">

</ComboBox>

</Grid>

public partial class Page : UserControl

{

public Page()

{

InitializeComponent();

ObservableCollection<int> MyColSpan = new ObservableCollection<int>();

MyColSpan.Add(1);

MyColSpan.Add(2);

MyColSpan.Add(3);

LayoutRoot.DataContext = MyColSpan;

}

private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

txt1.DataContext = cb1.SelectedItem;

}

}

In Silverlight, you don't have UI-to-UI binding so you have to create an object in code that acts as an intermediary between the ComboBox selected item value and the ColumnSpan. And then you have to update the data context for the TextBlock every time the ComboBox selection changes. WPF makes this much simplier with UI-to-UI binding.

To create the WPF version, all I did was create a new WPF project in Visual Studio and copy the XAML and C# over. Then I deleted the SelectionChanged event and bound the ColumnSpan value directly to the ComboBox selected item.

Here's the WPF code:

<Grid x:Name="LayoutRoot" ShowGridLines="True">

<Grid.ColumnDefinitions>

<ColumnDefinition />

<ColumnDefinition />

<ColumnDefinition />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<TextBlock x:Name="txt1" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan ="{ Binding ElementName =cb1, Path =SelectedItem}"

Text="This text can span multiple columns" FontSize="16" TextWrapping="Wrap" />

<TextBlock Grid.Row="1" Text="Select the ColumnSpan"/>

<ComboBox x:Name="cb1" Grid.Column="1" Grid.Row="1" ItemsSource="{Binding}">

</ComboBox>

</Grid>

public Window1()

{

InitializeComponent();

ObservableCollection<int> MyColSpan = new ObservableCollection<int>();

MyColSpan.Add(1);

MyColSpan.Add(2);

MyColSpan.Add(3);

LayoutRoot.DataContext = MyColSpan;

}

I guess the good news is that was way too easy. So,I'll have to try taking a stab at something more complex. In the meantime, I'm going back to fixing customer bugs!

Margaret