One of the most common controls in Silverlight for Windows Phone 7 is definitely the ListBox.

Basic implementation
I order to implement a design for the ListBox items you may have seen the most common implementation:

[xml]
<!– from Scott Guthrie’s blog: http://weblogs.asp.net/scottgu/archive/2010/03/18/building-a-windows-phone-7-twitter-application-using-silverlight.aspx –>

<ListBox Height="521" HorizonalAlignment="Left" Margin="0,131,0,0" Name="listBox1" VerticalAlignment="Top" Width="476">

<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132">
<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
<StackPanel Width="370">
<TextBlock Text="{Binding UserName}" Foreground="#FFC8AB14" FontSize="28" />
<TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>

</ListBox>
[/xml]

As you may see, the template is directly included in the page’s xaml. In fact it works well, and it is pretty straight forward.

But there is two main issues with this implementation. First, the designer will not render it:

Designer rendering
Designer rendering

And secondly, you thus don’t have any way to factorize your code. Let’s say you want to render again an item the exact same way but somewhere else, you will have to copy the same code.

Better implementation
Now I will use another app that displays bank accounts.

Please, code better. And please factorize, and use personal user controls.

Create a new UserControl:

Create a new user control
Create a new user control

After that you can edit it like any other xaml file with a nice designer:

My new account control
My new account control

Do not forget to use the proper binding:

[xml]
<!– Account.xaml –>
<TextBlock Text="{Binding Name}" Foreground="{StaticResource PhoneAccentBrush}" FontWeight="ExtraBold" FontSize="32" VerticalAlignment="Top" />
<TextBlock Text="{Binding Number}" VerticalAlignment="Top" Margin="0,43,0,0" />
<TextBlock Text="{Binding Balance}" FontWeight="Light" FontSize="42" Margin="0,43,15,0" VerticalAlignment="Top" HorizontalAlignment="Right" />
<TextBlock TextAlignment="Right" Text="€" FontWeight="Light" FontSize="26" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,43,0,0" />
[/xml]

After that you can use your new control very easily:

[xml]
<!– Main page.xaml –>

<!– don’t forget to include the local namespace –>
xmlns:local="clr-namespace:MyApp"

<!– the list box using the proper template –>
<ListBox x:Name="MainListBox">
<ListBox.ItemTemplate>
<DataTemplate>
<local:Account/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
[/xml]

You may also notice that all you custom User Controls are present in the tool box:

That is all. You now have every tool in hands in order to properly use the ListBox templating.

2 thoughts on “How to properly implement a template in a ListBox with Windows Phone 7

  1. Wonderful work! That is the type of info that should be shared around the net. Shame on the seek engines for now not positioning this put up higher! Come on over and consult with my web site . Thanks =)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s