WPF Notifications - wpf

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

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...

Related

Lightbox-style popup in WPF -- how?

(I am trying to learn WPF using tutorials and documentation, and trying to develop a user interface for my backend-complete application while I do say. I've heard people say that the learning curve is quite steep. But sometimes I wonder whether what I'm trying to do is actually something that's hard to do in WPF, or if it's simple but I'm thinking in wrong terms, or if it's neither, it's quite simple but I just happen not to know how.)
Here's my current question. I wanted clicking that clicking some part of my UI will bring up a 'popup' where the user can enter more information. I would like a 'lightbox-style' popup, i.e. the popup is modal to the page, it darkens the rest of the page to become the center of attention, etc. These are seen commonly on Web sites.
A bit of searching led me to the WPF Popup control. I added it, put my content in, set the IsOpen property to True, and -- presto! A popup. Then I added an invisible Rectangle that covers my whole window, and set it to Visible as well when I want my popup to open. Great!
So now I wanted to do this dynamically, because sometimes I will be loading a record which will sometimes have a need to open another control (a UserControl) in a popup to edit its information. So I made myself a method called OpenPopup. But I can't seem to find a way to write this method using WPF. In Windows Forms I'd have written: (I use VB.NET)
Sub ShowPopup (form as Form, ctrl as Control)
'Create 'rect' as new dark rectangle control
'Z-order it to the top
'form.Controls.Add 'rect'
'form.Controls.Add ctrl
'Z-order 'ctrl' to the top
'Center 'ctrl'
'Set focus to it
End Sub
But with WPF I run into problems:
1) I can't add it to the WPF window, because it already has a child.
2) If that child is a Canvas, that's not too bad. I can detect that, and add it to the Canvas. I have to find some way to set its Left, Top etc. properties and Width and Height, since those do not seem to be properties of the Rectangle control but rather extended by the Canvas object -- in XAML they're called Cavnas.Top etc. but Intellisense is not showing them when I try to use it in code.
3) But if it's a StackPanel? Then my rectangle will just be stacked below the other controls! And not covering them! Is there a way around this?
4) And if the window contains only one control and no container control at all?
5) I think there were more problems I ran into. But let's start with these.
Thanks in advance for your help.
1) I can't add it to the WPF window, because it already has a child.
Ah, the evils of codebehind. The solution is not to add it to the visual tree, it is to place it in the visual tree, ready and waiting to pounce, but hide it from the user's view.
Here's a sample you can drop in Kaxaml that demonstrates the point. Set the Lightbox Grid's Visibility to Hidden to access the hidden content.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Viewbox>
<TextBox Text="SIMULATING CONTENT" />
</Viewbox>
<Grid x:Name="Lightbox" Visibility="Visible">
<Rectangle Fill="Black" Opacity=".5"/>
<Border
Margin="100"
Background="white"
BorderBrush="CornflowerBlue"
BorderThickness="4"
CornerRadius="20">
<Viewbox Margin="25">
<TextBox Text="SIMULATING LIGHTBOX"/>
</Viewbox>
</Border>
</Grid>
</Grid>
</Page>
2) (snip) Intellisense is not showing them when I try to use it in code.
Canvas.Top etal are Attached Properties. Attached Properties are extremely convenient and easy to use in XAML, but they are very confusing and hard to use from code. Another reason why codebehind is evil.
3) But if it's a StackPanel? Then my rectangle will just be stacked below the other controls! And not covering them! Is there a way around this?
I redirect you back to 1. There are also many other container controls in WPF. You should investigate them and observe how they control layout. For instance, my use of the Grid was not to make use of its ability to block off sections of UI for controls, but for its ability to layer controls ontop of each other and to stretch them out to their maximum available size for the available space (the viewboxes are just there to zoom the controls instead of stretch them).
4) And if the window contains only one control and no container control at all?
The root of a window would almost always be a container control. But you control that, so if you needed to add controls to the visual tree at runtime you could easily ensure the child of the window is a container control you could deal with.
5) I think there were more problems I ran into. But let's start with these.
No kidding. My number one suggestion for people in your situation is to drop what you're doing and learn about MVVM. The Model-View-ViewModel is a very simple way to code WPF applications that takes advantage of many of the features of WPF--databinding, templating, commands, etc. It allows you to code your logic not in codebehind (RETCH) but in easy to create and test classes.

WP7: Rotating a popup + content?

I've been googling this issue for some time now, but havent been able to find a solution that worked for me.
The thing is I have a popup control with a user control, in which the user can enter a new value for a listpicker. This all works fine in portrait mode, but if the phone is rotated (emulator), the popup remains in portrait mode. Opening the popup when phone is already in landscape, has no effect either.
Is there any way to correct this issue? I've seen some people suggesting using Rotatetransform, but if I do this on a textbox etc., it disappears completely :/
I think this is potentially a bug in the Popup control; I've certainly heard the question asked before. However, I've also heard that the performance of the Popup controls is not that great, so I think you'd be better off just using a regular framework element (such as a Grid) to contain your popup content and show/hide it (with animation if appropriate) accordingly. At least that way it will get rotated properly when the page orientation changes.
Do not rorate the popup but place a border inside the popup and load the content in the border.
I got it to work like this:
//In .xaml
<Popup x:Name="myPopup">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="480" />
</Grid.RowDefinitions>
<Border x:Name="popupBorder"/>
</Grid>
</Popup>
//In .xaml.cs
popupBorder.Child = new MyPopupPage(); //MyPopupPage is the "Windows Phone Landscape Page"
myPopup.IsOpen = true;

WPF - Animated User Control

Greetings
I'm currently making an application in WPF as I'm fairly new to WPF I'm running into some difficulties. I have Googled my question but with no great success. This is the current situation, XAML of main window below:
<Grid Height="279" HorizontalAlignment="Left" Margin="166,0,0,0" Name="gridScoreboard" VerticalAlignment="Top" Width="808">
<!--Scoreboard Image-->
<Image Source="pack://application:,,,/Images/Style/Scoreboard.png" Width="517" Height="91" HorizontalAlignment="Left" Margin="138,1,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" />
<Canvas Name="canvasRacePlayer1" Width="14" Height="14" Canvas.Left="33" Canvas.Top="66" Background="Transparent" MouseLeftButtonDown="canvasRacePlayer1_MouseLeftButtonDown" Margin="171,70,623,195" />
<local:ucRaces HorizontalAlignment="Center" Margin="93,62,632,187" Width="78" Visibility="Hidden" x:Name="ucRacesP1" Height="33" />
</Grid>
The user control is hidden from the start (ucRaces), once the little canvas (canvasRacePLayer1) is clicked the user control will be shown. However I would like this user control to 'slide' from right to left from a certain point. As if it would become visible in small steps. I have found information for animations for rectangles and buttons but no success really for User Controls.
Thank you in advance
If you are going to create animations for your WPF project, I suggest that you use Expression Blend. You can design your program using EB and implement the functionality of it using Visual Studio. It will be hard to make animations, writing XAML syntax or C# code.
How would you be able to animate your user controls using EB? Well, it is actually very simple. You need to open your existing WPF project first. Then, go to File -> New Item -> User Control, and create the user control. Then, if you want to add it to your project, switch back to the WPF project currently open in EB and click the right arrows (>>) on the toolbar placed on the left-hand side of the screen and go to Project -> [Your User Control Here]. Now you have added it to your project.
If you want to animate the user control, you have to add a StoryBoard to your timeline. When you are on your WPF project in EB, under Objects and Timeline, click the plus (+) sign and add a new StoryBoard. Now, you have a timeline that you need to use to animate your user control. You can place KeyTime attributes on the timeline and define the path the user control is supposed to follow from location A to location B and also the level of opacity if you want the user control to gradually become visible.
You can add one more user control and implement its logic for the second user. Expression Blend will make your life easier.
Animating your UserControl shouldn't be much different from animating any other WPF object: You can either animate the margin (using a ThicknessAnimation), or drop your user control into a canvas of its own, then animate the Canvas.Left property of your user control. In the latter case, take care to put the property name in parenthesis: Storyboard.TargetProperty="(Canvas.Left)".

How to style WPF menu so that the second level navigation is displayed horizontally instead of vertically?

I am building a WPF application using C# 3.5
I have a WPF menu on the top of the application.
When clicking on a top level menu item, i need the second level of the menu to show horizontally instead of vertically "and" remain opened ( not disappear like a normal menu).
What I need to have is something similar to the following screen shot
alt text http://img341.imageshack.us/img341/1694/navigationecopy.jpg
How can I style the WPF menu to change its behavior as above?
Ok after trying this out, I don't think re-templating the Menu is a good idea. Menu is a very complex control. A better idea would be to avoid using a menu entirely and use a control with behavior similar to what you've described (selected items remain open, can display their children horizontally, etc.). The TabControl is a very good fit so I would simply use that instead. Here is some sample XAML to show you how this could work:
<TabControl VerticalAlignment="Top">
<TabItem Header="MAIN ACTIONS"/>
<TabItem Header="GOALS" IsSelected="True">
<StackPanel Orientation="Horizontal">
<ToggleButton Margin="5">Enter Goals</ToggleButton>
<ToggleButton Margin="5">Edit Goals</ToggleButton>
<ToggleButton IsChecked="True" Margin="5">View Work Plan</ToggleButton>
</StackPanel>
</TabItem>
<TabItem Header="ACTIVITIES"/>
</TabControl>
Obviously, you will need to restyle the TabControl with fonts and colors to get the appearance you want. And for the submenus, I would actually use radio-buttons instead of toggle buttons, to ensure that only one can be selected at a time (you will need to re-template the radio-button as well). But looking at even this simple result, you can see that this control is quite well suited for your scenario:
alt text http://img94.imageshack.us/img94/2358/tabcontrolmenu.png

Non-Modal floating dialog in WPF

I want to create a UI sequence where the user clicks a button and it pops up a small panel below it with a button and a textbox and maybe a small list of items.
The dialog is non-modal and more importantly, it just goes away when you click somewhere else in the main window.
For example, when you click the 'Favorites' Star icon in Internet Explorer 7 or you click the Star in the location bar in Firefox twice and it brings up the bookmark editor dialog.
What's the cleanest way to achieve this?
Should I use a UserControl and absolutely fix the location of it when a button is clicked?
If so, how do I hide it when the user clicks somewhere else?
I'd say the cleanest way to do what you are looking for is to use a Popup. The Popup class displays an element that floats above the rest of the elements on the screen, but is non-modal and can be configured to disappear when the user clicks away from it - perfect for your non-modal dialog. The Popup class has properties that allow you to control where it shows up relative to another control (in your case, the button you want the user to press to open the popup).
Here's an all-XAML example:
<Grid>
<ToggleButton HorizontalAlignment="Center" VerticalAlignment="Top"
x:Name="PopButton" Content="Pop"/>
<Popup Placement="Bottom" PlacementTarget="{Binding ElementName=PopButton}" StaysOpen="False"
IsOpen="{Binding ElementName=PopButton, Path=IsChecked, Mode=TwoWay}">
<Rectangle Height="100" Width="200" Fill="Blue"/>
</Popup>
</Grid>
You can also use commands or event handlers to open/close the popup from code.
The Placement and PlacementTarget properties set where the popup will appear, and which control it will appear relative to (there are other options that allow you to have it appear relative to its current position and relative to the mouse, too). Setting StaysOpen to False will have WPF automatically close the popup when the user clicks outside of it.
By default, a Popup has no style of it's own - it's just a container for floating content - so you'll have to style it to look like your window chrome/toolbar/etc. as appropriate.

Resources