Create a Custom Multi-Column StackPanel Control in Windows Phone 7

Introduction

In this article we are going to explore how to make a multi-column StackPanel control in Windows Phone 7. As we know, StackPanel is known as a container for which we can place everything according to our need. First of all we will discuss the multi-column StackPanel control which will have a maximum of two columns with a horizontal orientation. In this article we will make a custom control named multi-column StackPanel control with horizontal orientation. The maximum number of columns will be two in StackPanel which is counted horizontally. Further if we are talking about making a custom control that these are those controls. These will be created once and can be used as many times as we want to. So if we are making custom multi-column StackPanels then we have to keep in mind that first we will inherit the StackPanel class. Further we will describe the remaining functionality as per requirements. So let's see how it is possible to accomplish that and please take care to follow the steps given below.

Step 1 : In this step we have to create a Windows Phone library so let's see from where you have to add it which is given in the figure.

Go to visual studio 2010
Open New->Project
Select the template silverlight for Windows Phone
Select the Windows Phone library and give it a name such as mylibrary as I did
Click OK.

Step 2 : In this step you will see that you have to add a namespace name to the Class1.cs file which is given below.

Step 3 : In this step we will see that first of all we have to create a class named Class1 which will inherit the StackPanel class and the syntax is given below, whatever the functionality we want to assign will be inside the class.

Code

public class Class1 : StackPanel
{

}

Step 4 : In this step we will see the new class is using No_OfColumns property to hold the number of columns for StackPanel which is given below.

Code

public int No_OfColumns { get; set; }

Step 5 : In this step we will see that the Items property is used to hold UIElement collection.

Code

public Collection<UIElement> Items

{

get { return (Collection<UIElement>)GetValue(Items_Prpt); }

}

Step 6 : In this step we will see that the load_Items method is used to create many single horizontal StackPanels from the Items collection.

Code

void load_Items()

{
Children.Clear();

if (Items != null)

{

StackPanel mysp = Create_New_StPanel();

foreach (UIElement item in Items)

{

mysp.Children.Add(item);

if (mysp.Children.Count == No_OfColumns)

{

Children.Add(mysp);

mysp = Create_New_StPanel();

}

}
if (mysp.Children.Count > 0)

Children.Add(mysp);

}
}

Step 7 : In this step you can add additional handlers to PropertyMetadata of dependency property to handle Items property change events.

Code

public static readonly DependencyProperty Items_Prpt = DependencyProperty.Register("Items", typeof(Collection<UIElement>),
typeof(Class1),new PropertyMetadata(new Collection<UIElement>()));

Step 8 : in this step you will see the complete code for the Class1.cs file which is given below.

Class1.cs Code

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Collections.ObjectModel;
namespace mylibrary

{

public class Class1 : StackPanel

{

public int NumberOfColumns { get; set; }
public static readonly DependencyProperty Items_Prpt =

DependencyProperty.Register("Items",

typeof(Collection<UIElement>),

typeof(Class1),

new PropertyMetadata(new Collection<UIElement>()));
public Collection<UIElement> Items

{

get { return (Collection<UIElement>)GetValue(Items_Prpt); }

}
public Class1()

{

Orientation = Orientation.Vertical;

Loaded += (s, e) =>

{

load_Items();

};

}
void load_Items()

{

Children.Clear();

if (Items != null)

{

StackPanel mysp = Create_New_StPanel();

foreach (UIElement item in Items)

{

mysp.Children.Add(item);

if (sp.Children.Count == No_OfColumns)

{

Children.Add(mysp);

mysp = Create_New_StPanel();

}

}
if (mysp.Children.Count > 0)

Children.Add(mysp);

}

}
private StackPanel Create_New_StPanel()

{

return new StackPanel() { Orientation = Orientation.Horizontal };

}

}
}

Step 9 : In this step you have to build the Windows Phone class library application.

Step 10 : Now you have to take another application which is Windows Phone application.

Start another instance of visual studio 2010.
Go to Menu->File->New->Project.
Select the silverlight template for Windows Phone.
Select the Windows Phone application.
Click OK.

Step 11 : In this step you will have to add the reference of the phone class library which was created; let us see from where you have to add this which is shown in the figure.

Step 12 : In this step we have to add the complete phone library project to the Windows Phone application project; let us see how you will add it.

Go to solution explorer.
Right-click and select the existing project.
Select the Class library cs file and add it.
You just see that the whole library project will be added to the Windows Phone application project.

Select Existing Project

Add the Existing project whose named as mylibrary

Step 13 : In this step you will see that the project has been added to your Windows Phone application project which you can see in the figure given below:

Step 14 : In this step you just see that Class1 component has been added to the toolbox component.

Step 15 : If you want to see the control inside the toolbox then you just see the figure which is given below.

After clicking on the choose items then a window will open like shown below. If your control does not appear in the Toolbox then you will have to add a reference to your DLL file.

In this figure you just see that the control has been added to the Toolbox which is shown below.

Step 16 : In this step you just see the MainPage.xaml file code which is given below. To test this control I had to add the code below to one of the XAML pages. The result can be seen on the images below.

Code

<phone:PhoneApplicationPage

x:Class="MultistackPanel.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

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

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

shell:SystemTray.IsVisible="True" xmlns:my="clr-namespace:mylibrary;assembly=mylibrary">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock x:Name="PageTitle" Text="Multi-Column Stack Panel" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"

FontFamily="Comic Sans MS" FontSize="36" Height="71" Width="460" MaxWidth="Infinity">

<TextBlock.Foreground>

</LinearGradientBrush>

</TextBlock.Foreground>

</TextBlock>

</StackPanel>

<my:Class1 Height="348" NumberOfColumns="2" HorizontalAlignment="Left" Margin="10,10,0,0" Name="class11" VerticalAlignment="Top" Width="440">

<my:Class1.Items>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</my:Class1.Items>

</my:Class1>

</Grid>
</Grid>
</phone:PhoneApplicationPage>

Step 17 : Let us see the design of the MainPage.xaml file which is given below.

Step 18 : Let us see the output of the application.

Here are some other resources which may help you.

How to create Custom SharePoint 2010 List Column using Visual Studio 2010
MultiColumn ComboBox with configurable Display and Value Members and fast search functionality
Create a Custom Email Validator Control in Windows Phone 7
Charts in Windows Phone 7
AutoComplete in Windows Phone 7