|
In this article I will discuss about the WrapPanel crontrol in Window Phone 7. WrapPanel comes along with Silverlight Windows Phone Toolkit. WrapPanel become very handy when you have to create series of tiles whether it is vertical or horizontal. It wouldn't be easy to create a series of tile without WrapPanel.
Let's see how we can use WrapPanel.
Download Silverlight Windows Phone Toolkit
Step 1: Create a silverlight for Windows Phone project.
Step 2: Add reference of Microsoft.Phone.Controls.Toolkit.dll
Step 3: Add namespace of Microsoft.Phone.Controls.Toolkit in MainPage.xaml.
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
Step 4: Place below code of WrapPanel inside ContentPanel of MainPage.xaml
<toolkit:WrapPanel ItemHeight="120" Orientation="Horizontal" ItemWidth="120" Height="400">
<Rectangle Fill="OrangeRed" Height="80" Width="80"/>
<Rectangle Fill="MediumSeaGreen" Height="80" Width="80"/>
<Rectangle Fill="Teal" Height="80" Width="80"/>
<Rectangle Fill="YellowGreen" Height="80" Width="80"/>
<Rectangle Fill="Aquamarine" Height="80" Width="80"/>
<Rectangle Fill="BlueViolet" Height="80" Width="80"/>
<Rectangle Fill="BurlyWood" Height="80" Width="80"/>
</toolkit:WrapPanel>
Now, run the application, you will get all the rectangles placed inside WrapPanel like below. The Orientation of WrapPanel can be changed using Orientation Property. E.g. Orientation="Vertical"
Orientation - Horizontal Orientation - Vertical
 
Step 5: By default flow direction is LeftToRight in WrapPanel, the flow direction can be changed to RightToLeft using FlowDirection property.
FlowDirection ="LeftToRight" or lowDirection="RightToLeft"
Change the FlowDirection property and run the application. You will notice that WrapPanel placed the rectangles from right to left like shown in below image.
Step 6: WrapPanel can be used in advanced scenario like it can be used with ListBox, ListPicker and other ItemControls. Let's use WrapPanel in ListBox.
Comment or delete WrapPanel code which we had placed inside the ContentPanel of MainPage.xaml in Step 4.
Put below code inside the ContentPanel of MainPage.xaml. It has a ListBox with WrapPanel inside ItemsPanelTemplate. ItemTemplate will have Button to place inside WrapPanel. The color of the button will be Green by default. I have attached click handler, the color of button will be changed to Red when it is clicked.
<ListBox x:Name="listBox">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel FlowDirection="LeftToRight" ItemWidth="120" ItemHeight="120"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Button Click="btn_Click" BorderThickness="0" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Green" x:Name="startVibrate" Margin="-10,-10,0,0" Height="120" Width="120" Content="{Binding}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Step 7: Add item in the listbox in the MainPage constructor.
this .listBox.ItemsSource = new List<string>() { "Btn1", "Btn2", "Btn3", "Btn4", "Btn5", "Btn6", "Btn7" };
Step 8: Place click event handler of button to change the color of button on click.
private void btn_Click(object sender, RoutedEventArgs e)
{
Button button = (Button)sender;
if (((System.Windows.Media.SolidColorBrush)(button.Background)).Color == Colors.Green)
{
((System.Windows.Media.SolidColorBrush)(button.Background)).Color = Colors.Red;
}
else
{
((System.Windows.Media.SolidColorBrush)(button.Background)).Color = Colors.Green;
}
}
Now run the application, you will notice the color changes from green to red and red to green on every click.
This ends the article of WrapPanel in Windows Phone 7.
|