Showing a modal dialog with custom content in LightSwitch.

There’s probably nothing easier than creating a modal dialog in LightSwitch.

(Note to self: bad intro… Perhaps 99% of the LightSwitch framework is even easier. It’s just such an easy to use framework as a whole, and most of it doesn’t even require writing code!!)

Still, to save you some time if you want to create a modal dialog, here’s the 1.2.3:

1. In your client project, switch to content view, and add a new Silverlight UserControl (mine is called “ViewNewMessageWindow).

2. Instead of inheriting UserControl, change the declaration so that your class inherits: “Microsoft.LightSwitch.Runtime.Shell.Framework.ScreenChildWindow.

 public partial class ViewNewMessageWindow : Microsoft.LightSwitch.Runtime.Shell.Framework.ScreenChildWindow
    {
        public ViewNewMessageWindow()
        {
            this.InitializeComponent();
        }

        private void OKButton_Click(object sender, RoutedEventArgs e)
        {
            this.DialogResult = true;
        }
    }
Don’t forget to change the XAML declarations as well…
<shellUtils:ScreenChildWindow x:Class="MessagesExtension.Client.ViewNewMessageWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:shellUtils ="clr-namespace:Microsoft.LightSwitch.Runtime.Shell.Framework;assembly=Microsoft.LightSwitch.Client" >
And the last step:  anywhere in your client code, create a new instance of your class and call the Show method:
            (new ViewNewMessageWindow()).Show(null, null);
Showing a modal popup in my application.

Showing a modal popup in my application.


See how the LightSwitch framework nicely disables the entire application (it’s slightly grayed out), so that you have to respond to my modal dialog first?  You can pass null as a first argument, or an IScreenObject.  The first should make your window modal to your entire application, the second only to the actual IScreenObject.  (Emphasis on the “should”, the documentation says it will, but during my tests that wasn’t always the case…)

By the way, have a look at the screenshot above.  Notice the custom command group (Messages) in the ribbonbar?  That will be my next post, but to avoid making that post too bloaty, I extracted the part about modal dialogs here… Forgive me if this post was way too easy on your eyes, I won’t do it again.

About these ads

19 thoughts on “Showing a modal dialog with custom content in LightSwitch.

  1. hi! im trying to follow your example, but im not sure where do i need to add custom control, is it in my lightswitch application client project, or to extension client project (like that used for ie. shell debugging)?
    cheers!

    • Hey Kivito!

      For this post, and the next one about adding command groups, the code can be in your LightSwitchApplication.Client project, some ExtensionProject.client or even a new silverlight user control library project (and then add a reference to it from your LightSwitchApplication.client project).

      Kind regards

      Jan

      • thanks Jan!
        But first i must find a way to convert it to vb.. (looking @ your message example getting problems with c# yield return in myCommandGroupProvider and export attribute)..
        cheers!

      • Hey Kivito.
        Sorry about that, I only know C#… :(

        The export attribute in VB.NET should look like: Export ( GetType ( IShellCommandGroupProvider ) )
        For the yield return: it’s a c# quickhack, you can just create a new generic list and call .ToIEnumerable() or something on it.

        Sorry I can’t help you out more!

  2. Hi Jan,
    Did you do a post on how to add that Messages button you show in that screenshot? This is exactly what I need in my app.

    Or is that one of your Easy Commands, with something clever updating the Message Count?

    If you have a sample/demo code that would be awesome, else I will try to figure out how to build it using your already-awesome EasyCommands extension!

    Cheers,
    Richard

  3. Pingback: Creating reusable modal screens « Jan Van der Haegen's blog

  4. Hi Jan,
    I am trying to create a “New Shift Change” functionality in my application. I would like to present a modal window like above for the user to enter login details during shift change. The application should be disabled till the login details are filled in the modal window. I am new to Lightswitch and would like to know if you have a more detailed sample…

    Thanks for any help you can provide me..

    • Hey Gayathri,
      thanks for posting back! I’m terribly overbooked at the moment, but I’ll have a more detailed sample up in about two weeks, sorry for the wait! Meanwhile, you could post on the msdn forums and see if there’s someone with a bit of time to help you out!
      Thanks for your patience!

      Jan

  5. I’m using Visual Studio 2012 and following the example, but it never seems to work? It would be really handy to have a small download to see how its working

  6. I believe the tabtech tablet is highly underated, we have used it
    for several months and i adore it, it was, at the time, the very best priced tablet pc on
    the market and it is still, it’s pleasant that you also found it and are talking about it.

  7. Hello,

    tried this. But the call to Show(null, null) will cause a exception in VS2012 regarding an invalide crossing of Thread boundaries. This way it does not work in VS 2012 any more.

  8. Excellent article. Keep posting such kind of info on youir page.

    Im really imptessed by it.
    Hey there, You’ve performed an excellent job.
    I will definitely digg it and personally suggest to my friends.

    I’m confident they will be benefited from this web
    site.

  9. I read a lot of interesting articles here. Probably you spend a lot of
    time writing, i know how to save you a lot of time, there is an online tool that creates unique, SEO friendly articles
    in seconds, just search in google – laranitas free content source

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s