What is the best approach to create MDI pop-up windows in WPF?

Question

I need to create a prototype to test the ability of WPF to do the following:

• one base window as the application's base
• within this window user can click (e.g. on "add customer") and a new window pops up
  • the pop-up window is bright
  • the main window in the background is dimmed
• if the user clicks on the main window
  • main window becomes bright
  • pop-up window is dimmed and goes into the background
• any changes in one window we need to take immediate effect in all windows, bright or dimmed

Questions:

1. should the child windows be user controls or windows?
2. is there any kind of "MDI framework" I can take advantage of
3. is there anything special I have to consider to make sure all windows are constantly updated, e.g. use ObservableCollections, etc.?
4. should I store all global variables as properties in the main window so that the child windows can access them?
5. how would you go about "dimming a window" or "blurring a window" in WPF?

Any advice welcome.

Answer 1

1. The child windows should derive from Window, then call Show() on an instance of your class to show the modeless dialog.
2. Not that I know of.
3. Use WPF databinding to keep everything up to date - your data classes should implement INotifyPropertyChanged and expose collections through ObservableCollection like you stated. The main window and popup window should have the same object for a DataContext, that way if one screen changes a property on the object the other will be automatically updated.
4. Use the model view - view model pattern to keep data and UI cleanly separated. Try this toolkit: http://blogs.msdn.com/ivo_manolov/archive/2009/05/03/9584900.aspx
5. There's no real "dim" function, but you can do something like this:

code:

<Window>
  <Grid x:Name="dimElement">
    <Grid Background="Gray" Opacity="0.5" Visibility="Collapsed"/>
    <Grid>
      main content goes here
    </Grid>
   </Grid>
</Window>

When you want to dim a window set Visibility on dimElement to "Visible" and set it to "Collapsed" to un-dim as appropriate.

Hope that helps!