Articles → LIGHT SWITCH 2011 → Show Image With Every Record In List In Lightswitch 2011

Show Image With Every Record In List In Lightswitch 2011

In this tutorial I will explain how we can show an image along with the text in list section of list and detail screen.

Software Requirement

Before you start reading this tutorial you should make sure that

Visual studio 2010 is installed on your machine.
Visual Studio 2010 service pack 1 is installed on your machine.
Microsoft Visual Studio Light switch 2011 is installed on your machine.
Silverlight runtime version 4 or 5 is installed on your machine

Prerequisite Knowledge

Before you go ahead, it is required that you should know

How to create project using visual studio?
How to create tables in lightswitch?
How to create screens in lightswitch?

Steps Of Execution

In this tutorial I will execute certain steps for the demonstration of showing an image along with the text in list section of list and detail screen in lightswitch application. These steps are

Create a new project
Create a new table
Add a new data screen to add records
Create list and detail screen

Let us execute each step

Create A New Project

First of all create a new project. See the screen shot below for project structure

Picture showing the project structure in solution explorer

Click to Enlarge

Create A New Table

Once a new screen is added create a new table. See the screen shot below for table structure

Picture showing the Student table in lightswitch designer

Click to Enlarge

Add A New Data Screen To Add Records

Add a new data screen in the project and add a couple of records in the table. See the screen shot below for the screen layout

Picture showing the add data screen for students entity

Click to Enlarge

Create List And Detail Screen

Add a new screen of type list and detail screen. Once you have added the screen run the application and check the screen. See the screen shot below

Picture showing the list and detail screen for student entity

Click to Enlarge

Now to achieve this requirement, first of all close the application and go the screen’s designer. Once you open the designer change the summary field in the list to column layout. See the screen shot below

Picture showing changing the summary field to column layout in designer screen

Click to Enlarge

Once you select column layout delete the fields ‘Contact no’ and ‘address’ and change the position of student image. See the screen shot below

Picture showing shuffling the fields in the designer screen

Click to Enlarge

Output

Now run the application

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Sunday, July 28, 2013

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**