How design time data will save you time designing Silverlight and WPF applications

When it comes to designing applications it’s definitely a lot easier when you can visualize what you’re creating without actually running the solution.

So why should it be any different for Silverlight and WPF?

If you just want to know how you can populate controls during design time the links below show three (of the many) ways you can populate your pages, windows, user controls, grids etc with sample data in Expression Blend or Visual Studio.

Why populating controls with design time data in Silverlight and WPF will improve your productivity

Let’s image for a moment we were given the task of designing a Silverlight application to find out what colors of the rainbow are the most popular.

The SketchFlow prototype below shows what we are aiming for.

Rainbow in Sketchflow

Well this is easy enough isn’t it? The XAML below should do the job.

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="DeginTimeDataInSilverlightApplications.MainPage"
    Width="600">
    <UserControl.Resources>
        <DataTemplate x:Key="RainbowTemplate">
            <Border Background="{Binding Color}">
                <StackPanel Margin="10" Orientation="Horizontal">
                    <CheckBox/>
                    <TextBlock Text="{Binding Description}"
							   Foreground="Black"
							   FontWeight="Bold" />
                </StackPanel>
            </Border>
        </DataTemplate>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
		<StackPanel>
			<TextBlock Text="Choose your favorite colors!"
					   Margin="5"
					   TextAlignment="Center"
                       FontWeight="Bold" />
			<Grid>
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="Auto"/>
					<ColumnDefinition Width="*"/>
					<ColumnDefinition Width="Auto"/>
				</Grid.ColumnDefinitions>
				<TextBlock Text="Name:"
                           Margin="10"
                           VerticalAlignment="Center" />
				<TextBox Text="{Binding Name}"
                         Grid.Column="1"
                         VerticalAlignment="Center"/>
				<Button Content="Submit"
                        Grid.Column="2"
                        Margin="10"
                        Width="100"
                        Height="50"/>
			</Grid>
			<ListBox ItemsSource="{Binding RainbowColors}"
                     ItemTemplate="{StaticResource RainbowTemplate}"/>
		</StackPanel>
	</Grid>
</UserControl>

Spot any problems, issues or flaws yet?

If we run this application this is what is shown to the user.

Rainbow Without Stretch

As you can see there is a problem with the ListBoxItem not stretching to the width of the grid.

If you had used deign time data this is what you would have seen in Expression Blend.

Showing Rainbow Without Stretch

Still not convinced design time data will help you?

Well in that case have fun implementing a fix, running the application, implementing another fix, running the application again until you’ve resolved the issue or ran out of time.

Jag Reehal’s Final Thought on ‘How design time data will save you time designing Silverlight and WPF applications’

Designing is so much easier when you’re able to see controls populated with sample data because you will be able to find and resolve design issues and problems quicker using design time data.

Comments