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

In this article we are going to explore that how we will make a 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_1_1fig.gif

Step_1_2fig.gif

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_2fig.gif

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_10fig.gif

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_1fig.gif

Step_12_2fig.gif

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.

Step_11_1newfig.gif

Select Existing Project

Step_11_2fig.gif

Add the Existing project whose named as mylibrary

Step_11_3fig.gif

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_13_1fig.gif

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

Step_13gif.gif

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

Step_14_1fig.gif

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.

Step_14_2fig.gif

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

Step_14_3fig.gif

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">
    <!--LayoutRoot is the root grid where all page content is placed-->

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>
        <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            <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 EndPoint="0.5,1" StartPoint="0.5,0">

                     <GradientStop Color="Black" Offset="0" />

                     <GradientStop Color="#FFE6FF32" Offset="1" />

                   </LinearGradientBrush>

                 </TextBlock.Foreground>

            </TextBlock>

        </StackPanel>
        <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

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

                    <my:Class1.Items>

                    <Rectangle Height="80" Width="200" Margin="10,0,0,0">

                        <Rectangle.Fill>

                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                                <GradientStop Color="Black" Offset="0" />

                                <GradientStop Color="#FFFFCDFF" Offset="1" />

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                    <Rectangle Height="80" Width="200" Margin="10,0,0,0">

                        <Rectangle.Fill>

                            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                                <GradientStop Color="Black" Offset="0" />

                                <GradientStop Color="#FFFFE3D7" Offset="1" />

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                    <Rectangle Height="80" Width="200" Margin="10,10,0,0">

                        <Rectangle.Fill>

                            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                                <GradientStop Color="Black" Offset="0" />

                                <GradientStop Color="#FFEAE51F" Offset="1" />

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                    <Rectangle Height="80" Width="200" Margin="10,10,0,0">

                        <Rectangle.Fill>

                            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                                <GradientStop Color="Black" Offset="0" />

                                <GradientStop Color="#FFDBFFCE" Offset="1" />

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                    <Rectangle Height="80" Width="200" Margin="10,10,0,0">

                        <Rectangle.Fill>

                            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                                <GradientStop Color="Black" Offset="0" />

                                <GradientStop Color="#FFFFD6FF" Offset="1" />

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                    <Rectangle Height="80" Width="200" Margin="10,10,0,0">

                        <Rectangle.Fill>

                            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                                <GradientStop Color="Black" Offset="0" />

                                <GradientStop Color="#FF97FFA4" Offset="1" />

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                    <Rectangle Height="80" Width="200" Margin="10,10,0,0">

                        <Rectangle.Fill>

                            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                                <GradientStop Color="Black" Offset="0" />

                                <GradientStop Color="#E484D2FF" Offset="1" />

                            </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.

 

Designimg.gif

 

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

 

Output.jpg


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