Developing a simple Data bound Windows Phone Application

I was asked to develop a Windows Phone Application development tutorial for beginners. This is not an advance coding stuff, but a simple basic tutorial.

Setting the Dev Environment

Windows Phone (WP) SDK latest version is 7.1 (very recent one is 7.1.1 targeted for 512 Mb mobile devices for multimedia rich apps. but SDK 7.1 is more than enough if you are developing generic WP apps)

Download the WP SDK free from

http://go.microsoft.com/fwlink/?LinkID=226694

The above link has the ISO which includes Visual Studio (VS) Express for WP development, Emulator and all the features needed for the development in a raw machine. If you already have VS this will install the missing module only.

Optional: If you want to have 7.1.1 update apply the update from this link after installing the 7.1 SDK http://www.microsoft.com/en-us/download/details.aspx?id=29233

Developing a simple List Data Bound Application

· Open VS

· New -> Project -> Silverlight for Windows Phone -> Windows Phone Application

Select the version as 7.1 to target Mango (latest version) [ Mango phone version is 7.5 and the SDK version is 7.1]

· Initial Development Interface

· Find the following Grid where we place our user elements

· Create a List box by XAML or drag and drop from Toolbox inside the Grid

· Write the ListBox template.

 <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ListBox x:Name="ListCourses">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="0,15,0,0">
                            <TextBlock Text="{Binding CourseName}" FontSize="36"/>
                            <TextBlock Text="{Binding Description}"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>        
        </Grid>

· Go to the code behind C# file of the MainPage.xaml

· Double click and open to write the code.

· Create a class Course. And populate some data in a List.

public partial class MainPage : PhoneApplicationPage
    {
        private List<Course> _courses = new List<Course>()
        {
            new Course() { CourseName = "Mobile Computing", Description = "Good course ! 🙂 " },
            new Course() { CourseName = "Wireless Communication", Description = "Good course ! 🙂 " },
            new Course() { CourseName = "Artificial Intelligent", Description = "Good course ! 🙂 " },
            new Course() { CourseName = "Database Design", Description = "Good course ! 🙂 " },
            new Course() { CourseName = "Marketing", Description = "Good course ! 🙂 " },
            new Course() { CourseName = "Communication Skills", Description = "Good course ! 🙂 " },
            new Course() { CourseName = "Presentation Skills", Description = "Good course ! 🙂 " },
            new Course() { CourseName = "Windows Phone Development", Description = "Good course ! 🙂 " },
        };

        // Constructor
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            ListCourses.DataContext = typeof(Course);
            ListCourses.ItemsSource = _courses;
        }
    }

    public class Course
    {
        public string CourseName { get; set; }
        public string Description { get; set; }
    }

· In the Loaded event we set the DataContext and ItemSource of the ListBox.

· Run the App

Share this:

Related