Windows Phone 7 Custom Message Box

October 19, 2010

57 comments

UPDATE: Notification box has been updated: Take a look at http://wpassets.codeplex.com, the new home place for NotificationBox and others.


I’ve wrote a custom message box called NotificationBox for the Windows Phone 7. It gives you an option to pick whatever button you like to have inside the message box. Also It provides a cool feature which is ‘Show this message again’ with isolated settings persistency so you won’t have to create this mechanism by yourself each time you want to give an option to the user suppressing a message.


The usage is similar to the regular message box, except for the fact that you can pass commands with custom actions instead of return values – then switch/ifs.


For example:

NotificationBox.Show(
“Exit”,
“Are you sure?”,
new NotificationBoxCommand(“Yes”, () => { }),
new NotificationBoxCommand(“No”, () => { }));
NotificationBox.Show(
“Erase”,
“You are about to loose your data!”,
new NotificationBoxCommand(“Ok”, () => { }),
new NotificationBoxCommand(“Cancel”, () => { }));
NotificationBox.Show(
“Choose”,
“Choose an option.”,
new NotificationBoxCommand(“Save”, () => { }),
new NotificationBoxCommand(“Load”, () => { }));
NotificationBox.Show(
“Custom”,
“Click on any of the buttons below.”,
new NotificationBoxCommand(“Xxx”, () => { }),
new NotificationBoxCommand(“Xxx”, () => { }),
new NotificationBoxCommand(“Zzz”, () => { }));

Yields:


image image image image


Another version of the Show method called ShowAgain, gives an option to suppress a message:

NotificationBox.ShowAgain(
“Show Again”,
“Uncheck the show again message and this message won’t appear again.”,
“Show this message again”,
false,
suppressed => { },
GetType().ToString(),
new NotificationBoxCommand(“Xxx”, () => { }),
new NotificationBoxCommand(“Xxx”, () => { }),
new NotificationBoxCommand(“Zzz”, () => { }));
NotificationBox.ShowAgain(
“Show Again”,
“Check the show again message so this message will appear again.”,
“Show this message again”,
true,
suppressed => { },
GetType().ToString(),
new NotificationBoxCommand(“Xxx”, () => { }),
new NotificationBoxCommand(“Xxx”, () => { }),
new NotificationBoxCommand(“Zzz”, () => { }));

The first call with false, displays the following message:


image


Now calling the same method again with the same parameters (at least with GetType().ToString()), won’t open the message in case that the user suppressed it by unchecking the check box.


The second snippet (fourth param is true) forces the message to open event if suppressed, but now the same message appears and the checkbox left unchecked. The user have an option to check it again.


I’ll be happy to have inputs, so please – don’t be shy 😉


You can download the source from CodePlex.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

57 comments

  1. Martin PlanteOctober 21, 2010 ב 15:09

    Awesome work. I like the commands support, though some people will still prefer return values.

    I see that you are ignoring the page’s ApplicationBar. When your notification shows up, the user could still press AppBar buttons or menus.

    In my own popups, I keep a ref on the page’s ApplicationBar and set it to null until the popup is closed. I wonder if it’s the good way to do it.

    Reply
  2. Tomer ShamamOctober 21, 2010 ב 23:08

    Thanks Martin.

    Totally forgot from the app-bar 😉 and I think that hiding the app-bar is simple and good idea.

    Maybe it would be better if we could display a full screen popup. Need to investigate that.

    Thanks.

    Reply
  3. AidenOctober 22, 2010 ב 16:29

    Either I’m missing something or the popup isn’t handling the back button correctly.

    Hitting back should close the popup.

    Reply
  4. Tomer ShamamOctober 22, 2010 ב 19:04

    Hi Aiden,

    Havn’t took care of that, but will.
    Thanks.

    Reply
  5. Kacey GreenOctober 26, 2010 ב 09:21

    Looks good.
    It isn’t handling back button presses correctly, nor does it handle light theming correctly, dark themes are just fine.

    Reply
  6. Tomer ShamamOctober 26, 2010 ב 09:30

    Thanks Kacey.

    I’m planning to fix these issues as soon as I’ll have free time 😉

    Promise to post. Keep watching.

    Reply
  7. OliOctober 27, 2010 ב 23:11

    Thank you, this is good stuff.

    Do you (or somebody else) know, why the standard MessageBox just supports the OK and Cancel button? It seems really strange to me.

    Reply
  8. Tomer ShamamOctober 27, 2010 ב 23:28

    I really don’t know why, but even though they would have given it, still they wouldn’t give custom action support with custom content.

    Reply
  9. PhilNovember 30, 2010 ב 22:30

    Thanks for providing the community with a more flexible message box!

    Any idea why this won’t show over a pivot control? I can use this on other pages in my app, but the pivot page refuses to display it. I get an error if I try and re-create it, so I know the popup IS there. But I don’t see it. Also, if I swap in the stock messagebox, it displays just fine….

    Reply
  10. Tomer ShamamDecember 8, 2010 ב 21:22

    Hi Phil,

    I’ve just checked it on a Pivot page, works just fine.

    Reply
  11. Tomer ShamamDecember 15, 2010 ב 08:39

    Torben, very cool thanks 😉

    Reply
  12. MagnusDecember 28, 2010 ב 21:56

    @Torben / @Tomer: the paste-it link is taken down. Could you please post the theme fix somewhere?
    /M

    Reply
  13. Tomer ShamamDecember 31, 2010 ב 11:26

    Sorry Magnus, somehow I don’t have it.

    Reply
  14. UditJanuary 3, 2011 ב 13:44

    Good work but it does not work well will Landscape orientation.

    Reply
  15. UditJanuary 7, 2011 ב 14:43

    private static void parentPage_BackKeyPress needs to change otherwise we have to press the backbutton twice to go back
    Code should be
    private static void parentPage_BackKeyPress(object sender, CancelEventArgs e)
    {
    CurrentPage.BackKeyPress -= parentPage_BackKeyPress;
    if (_popup != null && _popup.IsOpen)
    {
    ClosePopup();
    e.Cancel = true;
    }
    }

    Reply
  16. Lee ArmstrongJanuary 12, 2011 ב 11:57

    How do I put this into my project? I have never done this sort of thing before?

    I added the project to the solution but it can’t find the Tomers namespace.

    Reply
  17. Tomer ShamamJanuary 12, 2011 ב 19:25

    Hi Lee,

    Basically you should download and extract my file. Open and build the project with VS2010. This should create a .dll under bin\Debug folder.
    In you project add reference to this dll and look at my tester as how to use it. Also you can take a look on my tester to see the usage.

    Tomer

    Reply
  18. Lee ArmstrongJanuary 14, 2011 ב 14:35

    Thanks Tomer,

    In the end I added the project to the solution and built it that way and added that reference. That way I suppose it updates.

    Any idea on the light/dark theming, the link in the posts above is broken. Shame!

    Reply
  19. Tomer ShamamJanuary 14, 2011 ב 17:08

    Don’t have that theme, sorry.
    Hope that Torben will see this and will be kind to add it again.

    Reply
  20. rosiJanuary 29, 2011 ב 23:50

    this message box is not working for multi thread operations. for example, i am running background theread and display multiple messaeg boxes, it throwing error as “Message is already shown.”. not sure how to fix this issue.

    Reply
  21. Nino PadruttMarch 9, 2011 ב 23:12

    Is there a possibility to use it for something like a first-use tutorial?
    If i try do put the code in the constructor of the MainPage there is a NullReferenceException by:
    var currentPage = rootFrame.Content as PhoneApplicationPage;

    PS: And sorry for my bad english ^^

    Reply
  22. Tomer ShamamMarch 10, 2011 ב 08:22

    Yes feel free. As for the exception this operation should be delayed using the dispatcher or else. It just need the root to calculate the size. If remember correctly. Having fixed size based on layout will be just great.

    Reply
  23. RobMarch 24, 2011 ב 20:03

    How do I create a function for the buttons?

    Reply
  24. Tomer ShamamMarch 25, 2011 ב 08:46

    Hi Rob,
    The NotificationBoxCommand has two parameters, the second one is a delegate. You can provide your function in this parameter.

    The function should be something like:
    void YourFuncName();

    So you should have:
    new NotificationBoxCommand(“Cmd Name”, YourFuncName);

    Hope it helps.

    Reply
  25. EnnoMarch 29, 2011 ב 14:17

    Hi,

    how about license? can i use this control for apps, which i deploy in the marketplace? and what is with commercial projects? any suggestions?

    enno

    Reply
  26. Tomer ShamamMarch 29, 2011 ב 14:54

    Hi Enno,
    Feel free to use it in wherever you like to, just be kind and leave some credit 😉

    Reply
  27. Nitro52March 31, 2011 ב 12:09

    Bellow are the fixes i made to support Light Mode.

    in NotificationBox.Show and NotificationBox.ShowAgain

    Change the Height property of _popup from CurrentPage.ActualHeight to 800

    this is because ActualHeight does not update when you hide the application bar

    In the Generic.xaml

    Update the button collor, the xaml should look like this


    Update the Text color, xaml should look like this


    Reply
  28. WaltApril 11, 2011 ב 17:42

    When I try to use this, nothing appears on the screen. But if I click the button again it complains that it’s already shown.

    So I wonder if maybe there is something wrong with the Z-order or something? Any suggestions?

    Reply
  29. ckruhsApril 17, 2011 ב 22:50

    Great work!
    I discovered a strange effect using the control.
    If I show the NotificationBox from at the loaded event handler of the apps first page, the phone’s back button does not work correctly.
    The first push closes the NotificationBox as expected. But the second push has no effect. Maybe because of the removal of the BackKeyPress event?
    The third push closes the app.

    Any ideas how to solve that problem?

    Thanks
    ckruhs

    Reply
  30. Panagiotis KoutsiasMay 12, 2011 ב 13:43

    First of all thanks for the great control!
    I think this is the proper fix for the light theme issue
    In Generic.xaml, change this:

    into this:



    Also remove all the “Foreground=” from Textblocks, Buttons & Checkboxes

    Reply
  31. Tomer ShamamMay 12, 2011 ב 18:04

    hI Panagiotis Koutsias,
    Thanks for sharing.

    Reply
  32. Panagiotis KoutsiasMay 13, 2011 ב 01:43

    @ckruhs

    I used my page’s Loaded event to show the MessageBox and the problem solved for me. I also modified parentPage_BackKeyPress as Udit said in a comment above.
    Hope that helps!

    Reply
  33. JasonBSteeleJuly 3, 2011 ב 20:22

    Many thanks for this control, I will definitely be using it. I do have one suggestion:
    Shouldn’t ShowAgain should call the suppression action even if the message is suppressed?

    This gives a chance for the default action to be performed.

    Thanks,
    Jason

    Reply
  34. SumitJuly 18, 2011 ב 09:30

    There is one issue with the control
    If i write some code in back button then first notificationbox is displayed to user and in background that code is also executed. Is there any way to solve this issue??

    Reply
  35. Tomer ShamamJuly 18, 2011 ב 22:43

    Hi JasonBSteele,

    This is exactly how it works:
    internal void Close()
    {
    if (SuppressionCallback != null)
    {
    SuppressionCallback(!ShowAgainOption);
    }
    ClosePopup();
    }

    Reply
  36. giacoder (giababu2000@yahoo.com)July 21, 2011 ב 14:24

    To make this dialog work when BACK BUTTON is pressed (i.e. inside of OnBackKeyPress function) for example for such “Are you sure you want to loose all changes?” message, you need:
    1. to cancel navigation to previous page ( e.Cancel = true; )
    2. TO PLACE NotificationBox.Show(..) INSIDE THE Dispatcher
    3. to add a function to one of the button (NotificationBoxCommand) to navigate to previous page.

    so the code is

    protected override void OnBackKeyPress(CancelEventArgs e) {
    e.Cancel = true;
    this.Dispatcher.BeginInvoke(() =>
    NotificationBox.Show(“Leaving the page”,
    “Are you sure you want to loose all changes?”,
    new NotificationBoxCommand(“Yes”, () => { this.NavigationService.GoBack(); }),
    new NotificationBoxCommand(“No”, () => { }))
    );
    }

    Reply
  37. giacoder (giababu2000@yahoo.com)July 21, 2011 ב 14:41

    CORRECTION to my today’s message:
    To make this dialog appear when BACK BUTTON is pressed (i.e. inside of OnBackKeyPress function) for example for such “Are you sure you want to loose all changes?” message, you need:
    1. to cancel navigation to previous page ( e.Cancel = true; )
    2. to add IsOpen static function to NotificationBox class. This is needed to allow hiding the dialog when it is open and back button is pressed.
    3. to place NotificationBox.Show(..) inside of Dispatcher
    4. to add a function to one of the button (NotificationBoxCommand) to navigate to previous page.

    so the code is

    NotificationBox class:

    public static bool IsOpen {
    get {
    return _popup != null;
    }
    }

    some page:

    protected override void OnBackKeyPress(CancelEventArgs e) {
    if (!NotificationBox.IsOpen) {
    e.Cancel = true;
    this.Dispatcher.BeginInvoke(() =>
    NotificationBox.Show(“Leaving the page”,
    “Are you sure you want to loose all changes?”,
    new NotificationBoxCommand(“Yes”, () => { this.NavigationService.GoBack(); }),
    new NotificationBoxCommand(“No”, () => { }))
    );
    }
    }

    Reply
  38. Tomer ShamamJuly 26, 2011 ב 13:52

    Hi giacoder,

    Thanks for your solution, though I’ve cleaner one, such you don’t need to change anything in your page for having that. I’ll post my solution later, as part of my efforts loading it to CodePlex 😉

    Reply
  39. MartijnSeptember 11, 2011 ב 21:29

    Hi Tomer, just a quick question: i’d like to make the buttons a bit larger. Doing so in the Generic.xml works fine from within your demo app. But when i reference the rsulting dll form my own project: the buttons keep their old size. Any idea? Thanks!

    Reply
  40. Tomer ShamamSeptember 22, 2011 ב 15:11

    Giacoder, I’ve published a project in CodePlex.
    You can use an updated version of the NotificationBox with a fix to the problem you’ve described.
    Here is the link for the project:
    http://wpassets.codeplex.com

    Reply
  41. Tomer ShamamSeptember 22, 2011 ב 15:32

    Hi Martin,

    You should create a ControlTemplate for the NotificationBox (use Blend, its easy), then set the internal ItemsControl to use your Button data-template:

    I know it’s lame, but it’s a first draft of this control 😉
    Better option is to expose “CommandTemplate” property from the notification box so the user can override it.

    Reply
  42. Mohib ShethNovember 1, 2011 ב 09:21

    @Tomer, i tried creating a custom datatemplate but the buttons are still showing up small. Any working code?

    Reply
  43. Mohib ShethNovember 1, 2011 ב 09:29

    I think its not related to buttons. No matter what changes i make to Generic.xaml (like changing foreground color of textblocks etc.) none of them show up in my app. It works for your Tester app though. Any ideas?

    Reply
  44. Ong Joon KiatNovember 1, 2011 ב 09:30

    Is it possible to cutomise the buttons size and put images on it,How? Also,how do you also put a link inside the buttons,such as by clicking the “Home” Button it will go directly to Home Page.

    Reply
  45. Tomer ShamamNovember 3, 2011 ב 23:18

    Hi Mohib Sheth,
    First I encourage you downloading my new WP7 Assets library from Codeplex:
    http://wpassets.codeplex.com/

    It contains newest version of the Notification Box.

    Now that you have it, look at the demo. It has what you need.

    Reply
  46. zorganDecember 5, 2011 ב 01:52

    hi,

    i ‘ve just update to the new version. i change NotificationBox by NotificationTool.

    How to change the color of buttons, text, title when the theme is set to light or dark ?

    Do you have sample ? (send me: zorgan [at] free dot fr)

    Thanks

    Reply
  47. Tomer ShamamDecember 5, 2011 ב 09:29

    Hi Zorgan,

    Please open a discussion in CodePlex so we can share the solution.
    http://wpassets.codeplex.com/discussions

    Thanks,
    Tomer

    Reply
  48. AlexMay 1, 2012 ב 21:26

    Found one issue that will cause a fatal error.
    > Popup comes up
    > You click “ok” or another button added
    > Code is executed
    > Dialog goes away
    > You press backbutton to go back one view
    > Fatal error

    The error is in the backbutton listener in NotificationTool class. I think it’s either if(IsShown) or ClosePrompt().

    I wasn’t too familiar with this advanced navigation and frame coding, but after scratching my head on this for a while, I realized that the backbutton listener only is stopped on backbutton during the messagebox, not if you click one of the buttons. So I added
    RootFrame.BackKeyPress -= parentPage_BackKeyPress;

    in ClosePrompt()-method which is run after the commands, like you do in the backbutton listener. That way you stop listening for backbuttons after the messagebox is gone.

    Thank you very much for this project, it really helped me out when making a dark theme only app, that needs custom options.

    Reply
  49. Tomer ShamamMay 1, 2012 ב 22:05

    Thanks for sharing Alex.

    Reply
  50. SteveMay 16, 2012 ב 18:33

    Does this NotificationBox support Orientation changes, e.g. if the user is viewing a Landscape orientation on Windows Phone 7 and the NotificationBox is displayed as a Landscape box. Currently it looks to be Portrait mode only.

    Reply
  51. Tomer ShamamMay 16, 2012 ב 20:46

    Hi Steve, It’s portrait only.

    Reply
  52. Cristian WilgenhoffMay 30, 2012 ב 15:03

    Hi Tomer,

    Your set of assets it’s amazing and it really enhances WPSDK but I encountered and issue in order to show two Notification box messages on a row. In few words, after the first is shown a second one must be shown depending on the answer for the first one but I’m just getting just the first one. The call for the second one is being made (debugging I can hit the code) but nothing happens.

    If you prefer so I can leave a copy of this issue on codeplex.

    Much Thanks,
    Cristian

    Reply
  53. ArtemMay 30, 2012 ב 15:52

    Where can i get just dll for it, without compiling it?

    Reply
  54. Tomer ShamamJune 3, 2012 ב 00:34

    Hi Cristian,
    The notification box was not design to support more than one message at a time. Currently it doesn’t support kind of scenario. Maybe I’ll add it in the future.

    Reply
  55. JAckMarch 7, 2013 ב 08:00

    I am trying to your code implement my project but I write NotificationBOx.show() it giives me error. It suggest me only 3 (showagaintext,showagainproperty,showagainoption). What i do?

    Reply
  56. goodbarSeptember 2, 2013 ב 21:57

    Regarding the issue where you pop a NotificationTool box up and then want to pop up another one inside one of the NotificationActions. I think I fixed this in the source code under DeepForest.Phone.Assets –> Tools –> NotificationAction.cs

    I made this changed (original code is commented out)

    void ICommand.Execute(object parameter)
    {
    //_execute();

    //NotificationTool.Close();

    NotificationTool.Close();
    _execute();
    }

    This essentially closes the tool before executing the NotificationAction which allows you to pop a new NotificationTool within the action.

    Reply