Model Window in LightSwitch Beta 2

Prologue:

My previous article was about how to use images in a LightSwitch application. Now we shall discuss how to add a Model
Window into the LightSwitch Application.

What is Model Window in LightSwitch?

A Model Window is basically a kind of window having overall control of when it is fired up to display. We can't touch the other windows without responding to the Model Window.

In LightSwitch, if you add a Model Window into your screen, initially it will be displayed as a Button control. On clicking the Button the Model Window will be shown.

To demonstrate the Model Window in LightSwitch we will create an application.

Preparing the Solution:

Start the VS 2010; create a LightSwitch Desktop application with the name "ModelWindowInLSBeta2" as shown in the following figure.


Follow the [No: #] to create the Project.

Creating Entity for Application:

Create a table as shown in the screen by selecting the "create a table" option in the startup screen.


Designing the Screen:
First of all we need to add a new Data Screen to our demo application. We should know how to add a new Data Screen to a LightSwitch application, prior to proceeding with designing the screen. To know more about how to add a New Data Screen to a LightSwitch Application please read this Article.

Now we know how to do the screen stuff. See the following figure which is the default screen layout for the screen we have created.


So we have to change this layout of the screen so that the Model Window can be easily explained.


Before adding the Model Window we have to prepare the layout. So delete the highlighted fields as shown in the above figure.

Adding Model Window into the Screen:

After preparing the layout to add a Model Window, just add a new group to the Person Property Rows Layout.


After adding the new group, change the default layout to Model Windows as shown in the above figure. Now we have to design the Model Window.


Change the MaxWidth of the Model Window button in the Property page so then it won't stretch to the screen. And also change the Label position as None.


Add a new Group in to the Model Window.

• To add the new Group just click the Model Window; it will gives you an Add button.
• From the dropdown list of the Add button select the new Group and change it's layout to Columns layout and change the display name to Person Image.
• Select the Group Person Image, it will display the Add button and add the Photo field to the Person Image group.

In the Person Image Group add a new Group and change the layout to Rows layout as shown in the following figure.



Here,

• [No: 1] – "Person group" which is the sub group of Model Window. In this Group we have added a field called Photo and a new Group called "Person Details"
• [No: 2] – The Age, DateOfBirth and PalceOfBirth fields are added to the "Person Details" group which is a sub-group of the "Person Image"

Here the following figure shows the complete layout tree of our application screen.


Now the complete design of the Model window has been finished. Just hit the Play button to see the Application live.

Application in Action:



The above figure shows the Model Window button. If you click on the Button, a Model Window that we designed will be shown.


Summary:

In this article, we have seen about how to create and use the Model Window in the LightSwitch Screen.

Thanks for spending your precious time here. Please provide your valuable feedbacks and comments, which enable me to give a better article the next time.
 
Thanks.