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

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 2

I have a project on github which is a custom FrameworkElement that allows you to display modal content over the primary content.

The control can be used like this:

<c:ModalContentPresenter IsModal="{Binding DialogIsVisible}">     <TabControl Margin="5">             <Button Margin="55"                     Padding="10"                     Command="{Binding ShowModalContentCommand}">                 This is the primary Content             </Button>         </TabItem>     </TabControl>      <c:ModalContentPresenter.ModalContent>         <Button Margin="75"                 Padding="50"                 Command="{Binding HideModalContentCommand}">             This is the modal content         </Button>     </c:ModalContentPresenter.ModalContent>  </c:ModalContentPresenter> 

Features:

• Displays arbitrary content.
• Does not disable the primary content whilst the modal content is being displayed.
• Disables mouse and keyboard access to the primary content whilst the modal content is displayed.
• Is only modal to the content it is covering, not the entire application.
• can be used in an MVVM friendly way by binding to the IsModal property.