Click here to Skip to main content
15,072,348 members
Articles / Programming Languages / C# 4.0
Article
Posted 7 Dec 2011

Stats

113.2K views
97 bookmarked

An Advanced Visual Studio LightSwitch Application

Rate me:
Please Sign up or sign in to vote.
4.93/5 (45 votes)
14 Dec 2011Ms-PL4 min read
An Advanced Visual Studio LightSwitch Application

Image 1

Yes, This is a LightSwitch Application

LightSwitch is a powerful application creator. However, at times, you may need to have full control over the user interface, the program flow, and functionality. I have created a sample LightSwitch application that has the following advanced features:

  • The user interface is entirely composed of custom Silverlight controls
  • A Silverlight Theme is used
  • Custom Search is implemented
  • Custom Paging is implemented
  • File Management
    • Files can be uploaded and attached to Help Desk Ticket Comments
    • Files can be retrieved and displayed
    • When a Help Desk Ticket is deleted, any associated files are deleted

However, let me first answer the questions required of the LightSwitch Star Contest:

What does your application/extension do? What business problem does it solve?

This application allows a company to create and track Help Desk Tickets.

How many screens and entities does this application have?

Two screens and two entities.

Would this application still be built if you didn’t have LightSwitch? If yes, with what?

I started to build this in normal Silverlight part-time using MVVM. I ran out of time, because it was taking more time than I had for the project.

How long did this application take to actually build using LightSwitch?

About 4 hours. The pure LightSwitch parts only took about an hour.

Does this application use any LightSwitch extensions? If so, which ones? Did you write any of these extensions yourself? If so, is it available to the public? Where?

This project uses the Minimum Shell Extension.

How did LightSwitch make your developer life better? Was it faster to build compared to other options you considered?

Massively faster!

You Can Do Anything In LightSwitch That You Can Do In Silverlight

Image 2

LightSwitch creates Silverlight applications. It also allows you to use your own Silverlight controls.

Image 3

LightSwitch uses MVVM, so you must use bindings to provide data and communicate with your Silverlight controls.

Image 4

The image above shows how the binding in the Silverlight datagrid is bound to the LightSwitch Screen that it is placed on.

You can read more about using Silverlight Custom Controls with LightSwitch here: http://lightswitchhelpwebsite.com/Blog/tabid/61/tagid/2/Custom-Controls.aspx

Silverlight Themes

The look of the application is primarily achieved by using normal Silverlight Themes. In this example, I used the JetPack Theme.

Image 5

The Theme consists of the .xaml files in the Assets directory of the Silverlight project, and two additional background images.

Image 6

If we comment out that code, we see that the UI is simply composed of normal Silverlight controls.

Custom Search

Image 7

The custom search is composed of a TextBox bound to the SearchText property (that is bound to the Query Parameter in the HelpDeskTickets collection) and a Search button to trigger the search.

Image 8

The filter on the HelpDeskTickets collection defines the search.

When the Search button is pressed, the following code is run:

C#
private void btnSearch_Click(object sender, RoutedEventArgs e)
{
    // Get a reference to the LightSwitch DataContext
    var objDataContext = (IContentItem)this.DataContext;

    // Get a reference to the LightSwitch Screen
    var Screen =
        (Microsoft.LightSwitch.Client.IScreenObject)objDataContext.Screen;

    // Call the Method on the LightSwitch screen
    Screen.Details.Dispatcher.BeginInvoke(() =>
    {
        Screen.Details.Methods["SearchTickets"]
            .CreateInvocation(null).Execute();
    });
}

This calls the SearchTickets method that simply refreshes the HelpDeskTickets collection, which executes and applies the search filter.

Custom Paging

Image 9

To enable custom paging, the Silverlight control contains buttons that raise the NextRecord and PreviousRecord methods.

The paging code is very simple:

C#
 partial void PreviousRecord_Execute()
{
    if (HelpDeskTickets.Details.PageNumber > 1)
    {
        HelpDeskTickets.Details.PageNumber--;
    }
}

partial void NextRecord_Execute()
{
    if (HelpDeskTickets.Details.PageNumber < HelpDeskTickets.Details.PageCount)
    {
        HelpDeskTickets.Details.PageNumber++;
    }
}

File Management

Image 10

File Management is implemented using a combination of ASP.NET pages and WCF RIA Services.

Image 11

The File Management code allows you to upload a file and attach it to a comment, view the file by clicking on it in the datagrid, and deleting the files if the associated comment is deleted.

Image 12

In the Visual Studio Solution Explorer, we can switch to File View...

Image 13

Then select Show All Files to display the ServerGenerated project.

Image 14

We place a FileUpload.ashx file handler to upload files, and we use a Download.aspx file to display uploaded files.

We now need to add the files to the build file, so that LightSwitch will include them in the build.

Image 15

We right-click on the LightSwitch project and select Unload Project.

Image 16

We edit the .lsproj file.

Image 17

We add entries to the file (the code behind will automatically be compiled and deployed so we only need to add the .aspx and .ashx files).

Image 18

We then Reload Project.

The following code is used by LightSwitch to call the Download.aspx file to download a file:

C#
public void DownloadFile(string strFileName)
{
    Dispatchers.Main.Invoke(() =>
    {
        HtmlPage.Window.Navigate(new Uri(string.Format("{0}",
            String.Format(@"DownloadFile.aspx?FileName={0}",
            strFileName)), UriKind.Relative), "_new");
    });
}

When a file is deleted, the following method in the custom WCF RIA Service deletes the file:

C#
public void DeleteFile(FileRecord objFileRecord)
{
    // Look for the file
    var objFile = (from LocalFiles in _LocalFiles
                   where LocalFiles.FileName == objFileRecord.FileName
                   select LocalFiles).FirstOrDefault();

    if (objFile != null)
    {
        string strFileDirectory = GetFileDirectory();
        File.Delete(Path.Combine(strFileDirectory, objFile.FileName));
    }
}

Custom Shell

Image 19

Microsoft has a Walkthrough: Creating a Shell Extension that will show you how to make a simple Shell Extension. I used that to create the Minimal Shell Extension.

The purpose of the Shell Extension, is to allow me to fully control the look of the application and to remove the LightSwitch menu. The features are:

Image 20

It allows a 200x50 logo to be displayed in upper right corner of Shell.

Image 21

The Default tab cannot be closed.

I have a full walk-through covering the Shell Extension here:

LightSwitch Extras Theme

LSHelpDesk/image_thumb1.png

When we use the LightSwitch Extras JetPack Theme, it formats the tabs and the background properly.

 

LightSwitch Is Up To The Task

I hope this project demonstrates that LightSwitch is capable of handling any of your projects with a 90%+ savings in code and time.

There are a ton of tutorials, tips, blogs, and forums at:

Image 23

History

  • 14th December, 2011: Initial version

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)

Share

About the Author

defwebserver
Software Developer (Senior) http://ADefWebserver.com
United States United States
Michael Washington is a Microsoft MVP. He is a ASP.NET and
C# programmer.
He is the founder of
AiHelpWebsite.com,
LightSwitchHelpWebsite.com, and
HoloLensHelpWebsite.com.

He has a son, Zachary and resides in Los Angeles with his wife Valerie.

He is the Author of:

Comments and Discussions

 
QuestionTheme not applied Pin
ReginaldMoleko26-Feb-14 19:08
MemberReginaldMoleko26-Feb-14 19:08 
AnswerRe: Theme not applied Pin
defwebserver26-Feb-14 19:20
Memberdefwebserver26-Feb-14 19:20 
GeneralRe: Theme not applied Pin
ReginaldMoleko26-Feb-14 21:45
MemberReginaldMoleko26-Feb-14 21:45 
GeneralRe: Theme not applied Pin
defwebserver27-Feb-14 1:47
Memberdefwebserver27-Feb-14 1:47 
GeneralMy vote of 5 Pin
Renju Vinod16-Dec-13 19:31
professionalRenju Vinod16-Dec-13 19:31 
GeneralRe: My vote of 5 Pin
defwebserver17-Dec-13 1:59
Memberdefwebserver17-Dec-13 1:59 
GeneralMy vote of 5 Pin
Amir Mohammad Nasrollahi15-Aug-13 9:57
professionalAmir Mohammad Nasrollahi15-Aug-13 9:57 
GeneralRe: My vote of 5 Pin
defwebserver15-Aug-13 12:00
Memberdefwebserver15-Aug-13 12:00 
GeneralMy vote of 4 Pin
k_rey26-Oct-12 4:26
Memberk_rey26-Oct-12 4:26 
GeneralMy vote of 5 Pin
jownby22-Aug-12 6:26
professionaljownby22-Aug-12 6:26 
Questionawesome Pin
ehanp31-Mar-12 0:54
Memberehanp31-Mar-12 0:54 
AnswerRe: awesome Pin
defwebserver31-Mar-12 5:00
Memberdefwebserver31-Mar-12 5:00 
GeneralMy vote of 5 Pin
Ștefan-Mihai MOGA13-Jan-12 19:54
professionalȘtefan-Mihai MOGA13-Jan-12 19:54 
GeneralRe: My vote of 5 Pin
defwebserver24-Jan-12 14:03
Memberdefwebserver24-Jan-12 14:03 
GeneralMy vote of 5 Pin
Abinash Bishoyi20-Dec-11 23:49
MemberAbinash Bishoyi20-Dec-11 23:49 
GeneralRe: My vote of 5 Pin
defwebserver24-Dec-11 7:15
Memberdefwebserver24-Dec-11 7:15 
QuestionGets my vote of 5. Pin
Delordson Kallon20-Dec-11 8:29
MemberDelordson Kallon20-Dec-11 8:29 
As usual, another article that we can all learn from. Great!
AnswerRe: Gets my vote of 5. Pin
defwebserver20-Dec-11 9:47
Memberdefwebserver20-Dec-11 9:47 
GeneralGood article Pin
Wonde Tadesse18-Dec-11 12:32
professionalWonde Tadesse18-Dec-11 12:32 
GeneralRe: Good article Pin
defwebserver18-Dec-11 12:35
Memberdefwebserver18-Dec-11 12:35 
GeneralMy 5 Pin
Shahriar Iqbal Chowdhury/Galib16-Dec-11 23:02
professionalShahriar Iqbal Chowdhury/Galib16-Dec-11 23:02 
GeneralRe: My 5 Pin
defwebserver17-Dec-11 3:53
Memberdefwebserver17-Dec-11 3:53 
GeneralMy vote of 5 Pin
Kunal Chowdhury «IN»14-Dec-11 20:31
professionalKunal Chowdhury «IN»14-Dec-11 20:31 
GeneralRe: My vote of 5 Pin
defwebserver15-Dec-11 3:21
Memberdefwebserver15-Dec-11 3:21 
GeneralNicely written with example Pin
sudhansu_k12314-Dec-11 19:15
Membersudhansu_k12314-Dec-11 19:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.