In this post I will show you the various ways of working with a WrapPanel in a Windows Phone 7 application. I will discuss
- Basic use of a WrapPanel
- WrapPanel with ScrollBar
- Using a WrapPanel in a ListBox
WrapPanel comes as part of Silverlight for the 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 in XAML as below,
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
Basic use 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.
![WrpnlWinPhn1.gif]()
On running you will get output as below,
![WrpnlWinPhn2.gif]()
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,
![WrpnlWinPhn3.gif]()
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,
![WrpnlWinPhn4.gif]()
What all you need to do is follow below steps,
Create a ListBox
![WrpnlWinPhn5.gif]()
Inside the ListBox you need to create ItemPanel and put a template inside it for
the WrapPanel as below,
![WrpnlWinPhn6.gif]()
Then you need to create ItemTemplate and DataTemplate as below. Inside
DataTemplate make sure you are putting StackPanel
![WrpnlWinPhn7.gif]()
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
![WrpnlWinPhn8.gif]()
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.