Dhananjay Kumar

In this post I will show you the various way of working with WrapPanel in Windows Phone 7 application. I will discuss

1. Basic working of WrapPanel
2. WrapPanel with ScrollBar
3. Using WrapPanel in a ListBox

WrapPanel comes as part of Silverlight for Windows Phone Toolkit. You can download it from here . You need to install MSI package after downloading the toolkit to work with WrapPanel.

To start using toolkit add the namespace on xaml as below,

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Basic working of WrapPanel

I am going to put 16 red rectangles inside a WrapPanel. All rectangles would be in two columns of WrapPanel.

<toolkit:WrapPanel>
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Margin="10" Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
</toolkit:WrapPanel>

Default FlowDirection is Left to Right. If you want you can change it as below along with the basic properties like Height etc.

On running you will get output as below,

You will notice that there should be 8 rows visible since there are 16 rectangles but you are getting only 5 rows and not able to scroll as well.

WrapPanel with ScrollBar

To work with scroll in WrapPanel, you need to put WrapPanel inside a ScrollViewer as below,

You need to put WrapPanel inside ScrollViewer. I have done this and modified the code as below to vertically scroll through all the rows of rectangles.

<ScrollViewer VerticalScrollBarVisibility="Auto">
<toolkit:WrapPanel>
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Margin="10" Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
</toolkit:WrapPanel>
</ScrollViewer>

Now on running the application, you should able to scroll vertically all the rows.

Using WrapPanel in a ListBox

A very common requirement you may come across to work with WrapPanel and ListBox together. Imagine a scenario where you want

• Button with Image as ListBox item
• Wrapping of Button horizontally

Something like below,

What all you need to do is follow below steps,

Create a ListBox

Inside the ListBox you need to create ItemPanel and put a template inside it for the WrapPanel as below,

Then you need to create ItemTemplate and DataTemplate as below. Inside DataTemplate make sure you are putting StackPanel

Now you need to create Image Button. For that modify Button as below. I am Binding Text of TextBlock with Name Property of the class whereas for Image Source is fixed to Application.jpg

By putting all the codes together, you should have below code

<ListBox x:Name="lstData">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel>
<Button x:Name="btnData" >
<StackPanel Orientation="Vertical">
<Image Source="ApplicationIcon.jpg"
Width="100"
Height="100" />
<TextBlock Text="{Binding Name}" Width="100" />
</StackPanel>
</Button>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

In the code behind, I have created a class Student.

public class Student
{
public string Name { get; set; }
}

I have also created function to return many Students.

private List<Student> GetDummyData()
{
List<Student> lstStd = new List<Student>
{
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"},
new Student {Name ="a"}

};
return lstStd;
}

And then binding it to the ListBox as below,

public MainPage()
{
InitializeComponent();
lstData.ItemsSource = GetDummyData();
}

In this way you can work with WrapPanel and ListBox. I hope this post is useful. Thanks for reading.

Follow @debug_mode

If you find my posts useful you may like to follow me on twitter http://twitter.com/debug_mode or may like Facebook page of my blog http://www.facebook.com/DebugMode.Net If you want to see post on a particular topic please do write on FB page or tweet me about that, I would love to help you.