How do I make modal dialog for a Page in my WPF-application?

Question

I have a WPF Window which has a among other controls hosts a Frame. In that frame I display different pages. Is there way to make a dialog modal to only a page? When I'm showing the dialog it should not be possible to click on any control on the page but it should be possible to click on a control on the same window that is not on the page.

Answer 1

You are not looking for a modal dialog here. You need a function that will disable the "page" control, show a dialog, and re-enable it when the dialog closes.

I'm not too sure whether you understand what a modal dialog is meant to do though?

Answer 2

If I am correct in interpreting your message, you want something that works similar to what Billy Hollis demonstrates in his StaffLynx application.

I recently built a similar control and it turns out that this sort of idea is relatively simple to implement in WPF. I created a custom control called DialogPresenter. In the control template for the custom control, I added markup similar to the following:

<ControlTemplate TargetType="{x:Type local=DialogPresenter}">
  <Grid>
    <ContentControl>
      <ContentPresenter />
    </ContentControl>
    <!-- The Rectangle is what simulates the modality -->
    <Rectangle x:Name="Overlay" Visibility="Collapsed" Opacity="0.4" Fill="LightGrey" />
    <Grid x:Name="Dialog" Visibility="Collapsed">
      <!-- The template for the dialog goes here (borders and such...) -->
      <ContentPresenter x:Name="PART_DialogView" />
    </Grid>
  </Grid>
  <ControlTemplate.Triggers>
    <!-- Triggers to change the visibility of the PART_DialogView and Overlay -->
  </ControlTemplate.Triggers>
</ControlTemplate>

I also added a Show(Control view) method, which finds the the 'PART_DialogView', and adds the passed in view to the Content property.

This then allows me to use the DialogPresenter as follows:

<controls:DialogPresenter x:Name="DialogPresenter">
  <!-- Normal parent view content here -->
  <TextBlock>Hello World</TextBlock>
  <Button>Click Me!</Button>
</controls:DialogPresenter>

To the buttons event handler (or bound command), I simply call the Show() method of the DialogPresenter.

You can also easily add ScaleTransform markup to the DialogPresenter template to get scaling effects shown in the video. This solution has neat and tidy custom control code, and a very simple interface for your UI programming team.

Hope this helps!

Answer 3

@Brad: I downloaded the code you posted in your blog, added some textboxes to the parent view, and tabbed my way out of the "modal" dialog. Any idea of how to circumvent that?