Windows Phone Custom List

we can customize the list-box in our own way and purpose it is quite easy and simple, which is also easy to understand. we just need to take care the features and the libraries available to us. for this purpose
 just create a simple project with the name Lists ,now just follow the steps and see the magic :)

in this project make a folder with name images and put these imges inside this folder

1) just copy the given code to yours MainPage.xaml


<phone:PhoneApplicationPage 
    x:Class="Lists.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:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    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="800" 
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="#00E65BFF">

                <ListBox Margin="12,75,12,0" Name="L1"  SelectionChanged="ListBox_SelectionChanged" Foreground="#FF4AFFFF">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="0,0,0,17" Width="432" Height="78">
                                <TextBlock  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                <TextBlock  TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                            
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
        <TextBlock Height="33" HorizontalAlignment="Left" Margin="12,36,0,0" Name="textBlock1" Text="Custom ListBoxes In windows Phone by Jitesh" VerticalAlignment="Top" Width="456" FlowDirection="LeftToRight" Grid.RowSpan="1" Foreground="#FF1685BB" AllowDrop="False" />
    </Grid>
</phone:PhoneApplicationPage>

2) in this step just copy the given code to yours MainPage.xaml.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace Lists
{
    public partial class MainPage : PhoneApplicationPage
    {
        
        // Constructor
        public MainPage()
        {
            List_row row=null;
            InitializeComponent();

            string[] arr1 = new string[] { "A", "B", "C","D", "E" };
            string[] sub = new string[] { "FIRST Alphabet", " SECOND Alphabet", "THIRD Alphabet", "FOURTH Alphabet", "FIFTH Alphabet" };
            string[] images = new string[] { "a", "b", "c", "d", "e" };

            for(int i = 0; i < arr1.Length ; ++i){
                 row = new List_row();             
                row.title.Text = arr1[i];
                row.sub.Text = sub[i];
                row.myimage.Source = (ImageSource)new ImageSourceConverter().ConvertFromString("images/" + images[i] + ".png");
                L1.Items.Add(row);

               
            }
           

            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
            
        }

        // Load data for the ViewModel Items
        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
         
        }

        private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            
           
            MessageBox.Show("The selected index is : " + ((ListBox)sender).SelectedIndex);
        }

      
    }
}

3) in this third  step just create a new  .xaml with the name List_row.xaml

and  copy the code


<UserControl x:Class="Lists.List_row"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="319">

    <Grid x:Name="LayoutRoot" Height="60" Width="480"  MouseLeftButtonDown="Tap_LeftButtonDown"
                                      MouseLeave="Tap_MouseLeave" MouseLeftButtonUp="Tap_LeftButtonUp" Background="#FFC2B1CB">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="220*" />
            <ColumnDefinition Width="480*" />
        </Grid.ColumnDefinitions>
        <TextBlock Height="30" HorizontalAlignment="Left" Margin="66,6,0,0" Name="title" Text="TextBlock" VerticalAlignment="Top" Width="351" FontFamily="Times New Roman" Grid.ColumnSpan="2" Foreground="#FFBED700" />
        <Image Height="45" HorizontalAlignment="Left" Name="myimage" Stretch="Fill" VerticalAlignment="Top" Width="44" Margin="8,5,0,0" Source="/Lists;component/images/a.png" />
        <TextBlock Height="15" HorizontalAlignment="Left" Margin="67,33,0,0" Name="sub" Text="TextBlock" VerticalAlignment="Top" Width="384" FontSize="14" FontStyle="Normal" FontFamily="Times New Roman" Grid.ColumnSpan="2" Foreground="#FF36E3DD" />
    <Line X1="0" Y1="0" X2="1500" Y2="0" Stroke="#FFEF80FA" StrokeThickness="2" Grid.ColumnSpan="2" Margin="0,0,-2,0" />
    </Grid>
</UserControl>

4) in this step just copy this code to List_row.xaml.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace Lists

{

    public partial class List_row : UserControl

    {

        public List_row()

        {

            InitializeComponent();

        }

       

        private void Tap_LeftButtonDown(object sender, MouseButtonEventArgs e)

        {

            Grid rect = sender as Grid;

            // Change the size of the Rectangle.

            if (null != rect)

            {

                rect.Opacity = 0.5;

                SolidColorBrush color = new SolidColorBrush(Color.FromArgb(255, 0, 105, 0));

                rect.Background = color;

            }

        }

        private void Tap_LeftButtonUp(object sender, MouseButtonEventArgs e)

        {

            Grid rect = sender as Grid;

            // Reset the dimensions on the Rectangle.

            if (null != rect)

            {

                rect.Opacity = 1.0;

               

                SolidColorBrush color = new SolidColorBrush(Color.FromArgb(255, 194, 177, 203));

                rect.Background = color;

            }

        }

        private void Tap_MouseLeave(object sender, MouseEventArgs e)

        {

            Grid rect = sender as Grid;

            // Finger moved out of Rectangle before the mouse up event.

            // Reset the dimensions on the Rectangle.

            if (null != rect)

            {

                rect.Opacity = 1.0;

               

                SolidColorBrush color = new SolidColorBrush(Color.FromArgb(255, 194, 177, 203));

                rect.Background = color;

            }

        }

    }

}

finally you can see the desired output on yours emulator as follows