WPF Notifications

Question

How can I create notifications for my WPF apps, like those on browsers where they show messages via a "toolbar" at the top of the browser or a "MSN" style notification via a popup that slides up/down on the bottom right of the screen. Maybe a panel that fades in/out at the center of the app will do to

Answer 1

Your question is a little vague, in that with WPF, your options here are really only limited by your imagination.

Here are some options:

MessageBox
This is the simplest option - if you want to notify your user with a simple message that he must acknowledge to continue, then just show a message in a MessageBox.

Roll Your Own Dialog
If MessageBox doesn't quite do it, and you want to show more or different kinds of information, then you can simply create a new Window, and open it with the ShowDialog() method, forcing the user to close it (acknowledge it) before proceeding.

StatusBar
If you simply want to convey information, you can just add a StatusBar to the bottom of your dialog. I've linked to a nice example from fellow SO'er Kent Boogaart. Note that you aren't limited to just text in a StatusBar - you can add any UIElement to it, so you could have images, progressbars, whatever.

Some Other Panel
You could also have another panel of some sort (using your example, a StackPanel or something at the top of your application) that has Visibility set to Collapsed unless it is needed. You could also have, for example, a Border with some content in it, that shows up in front of the rest of the UIElements in your dialog. You can use a PopUp control.

If you go the "extra panel" route (which perhaps sounds most in line with what you are asking), then it may be nice to do some tricks with animations to add just a little flash to your app. Stuff like sliding the panel into place, or animating the opacity, etc. If you are putting the information over the rest of your window content, you can also play with the Opacity to make the panel semi-transparent - dark enough to see and read, but also allowing the user to see a little bit of the window behind it.

Here's a very basic example of what I mean. I'll leave it as an exercise for the user to add any formatting, slick animations, handle multiple messages, etc.

<Window ...>
    <Grid x:Name="gridMainLayout">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <StackPanel x:Name="stackNotificationArea"
                    Grid.Row="0"
                    Orientation="Horizontal"
                    Background="LemonChiffon"
                    Visibility="Collapsed">

            <TextBlock x:Name="txtMessage"
                       Text="{Binding NotificationMessage}" />
            <Button x:Name="btnAcknowledge"
                    Content="Acknowledge" />
        </StackPanel>

        <!-- Rest of your window goes here -->
        <Grid x:Name="gridContent"
              Grid.Row="1">

              <!-- Content of window -->

        </Grid>

</Window>

In the above example, I assume that there is a property called NotificationMessage that returns the latest notification message. You could hard-code this in text, or whatever. It would probably be best to bind the Visibility of the StackPanel as well, based on if there were any notifications. In any case, you will have to toggle the StackPanel to Visible as needed. Setting it to Visible will automatically move the content of your window down, as you described.

Be sure to set Visibility to Collapsed when the message is acknowledged. If you set it to Hidden, the StackPanel will not be shown, but the real estate will still be held for it (i.e. there will be a blank space at the top of your application).

Of course, you can be as fancy as you need to be here - you could have a small listbox with all the messages, or a couple of buttons to scroll through messages, or a button to launch a window with all messages, or...