Category Archives: Lists

Using a ListBox, Dynamically adding contents to a listbox in Windows Phone

This post shows how to add string objects to a ListBox Control in Windows Phone.

Make sure to choose a C# template for the project.

This is the layout .

ListBox Windows Phone

This is the complete Layout
Just change the class name in the root of the layout to yours.

<phone:PhoneApplicationPage 
    x:Class="ListBoxExample.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">

    <!--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="ApplicationTitle" Text="MY LISTBOX APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="ListBox Application" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ListBox Height="383" HorizontalAlignment="Left" Margin="3,7,0,0" Name="listBox1" VerticalAlignment="Top" Width="448" />
            <Button Content="Add to ListBox" Height="72" HorizontalAlignment="Left" Margin="86,499,0,0" Name="button1" VerticalAlignment="Top" Width="250" Click="button1_Click" />
            <TextBlock Height="30" HorizontalAlignment="Left" Margin="12,414,0,0" Name="textBlock1" Text="Type something to add to the ListBox" VerticalAlignment="Top" Width="443" />
            <TextBox Height="72" HorizontalAlignment="Left" Margin="3,436,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="460" />
        </Grid>
    </Grid>
 </phone:PhoneApplicationPage>

Now we will look at the code.

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 ListBoxExample
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            listBox1.Items.Add("ListBox Demo From Coderzheaven"); 
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            listBox1.Items.Add(textBox1.Text.Trim());
        }
    }
}

How to find your Google Plus ID

This is so simple

1. Go to your Google + account (https://plus.google.com/).

2. Click on the Profile icon on the Left.

3. If you look at the URL in the address bar, it should look something like this:

https://plus.google.com/104653270154306099169/posts

4. The long numerical string in the URL is your Google+ ID. Here is CoderzHeaven’s from the URL above:

104653270154306099169/

Google + CoderzHeaven

How to create a Custom ListBox in Windows Phone 7?

For creating Custom ListView First create a new project named “Lists” and the language is “C#” here.

Now open the “MainPage.xaml” and copy this code.

<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="Transparent">

                <ListBox Margin="12,75,12,0" Name="L1"  SelectionChanged="ListBox_SelectionChanged">
                    <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 7" VerticalAlignment="Top" Width="456" FlowDirection="LeftToRight" Grid.RowSpan="1" Foreground="#FF1BEB8D" AllowDrop="False" />
    </Grid>
</phone:PhoneApplicationPage>

Now we have to create another xaml for each custom row in the List.
For that right click on the project folder in the solution explorer.
Please check the screenshot, then select Add->New Item.

.

Now select the “Windows Phone User control”.
See the Screenshot.

Now in the “List_row.xaml” file copy this 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" Background="#FF382725">
        <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="#FF00BE3A" />
        <Image Height="45" HorizontalAlignment="Left" Name="myimage" Stretch="Fill" VerticalAlignment="Top" Width="44" Margin="8,5,0,0" Source="/Lists;component/images/coderzheaven.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="#FFD15F3E" />
    </Grid>
</UserControl>

Copy five image files into a folder named images in the solution explorer as shown in the first screenshot.

Now we go to the C# code.

Open MainPage.cs from the solution explorer and copy this code into it.

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()
        {
            InitializeComponent();

            string[] arr1 = new string[] { "CoderzHeaven", "Google", "Android","Apple", "Windows" };
            string[] sub = new string[] { "www.coderzheaven.com", "www.google.com", "www.android.com", "www.apple.com", "www.microsoft.com" };
            string[] images = new string[] { "coderzheaven", "google", "android", "apple", "windows" };

            for(int i = 0; i < arr1.Length ; ++i){
                List_row 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);

            }
            for (int i = 0; i < arr1.Length; ++i)
            {
                List_row 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);

            }
            for (int i = 0; i < arr1.Length; ++i)
            {
                List_row 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)
        {

        }
    }
}

android listview

Please leave your valuable comments on this post.

Download the complete source code from here.