Wpf – How to make modal dialog for a Page in the WPF-application

modal-dialogwpf

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.

Best Answer

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!

Related Solutions

C# – How to get a TextBox to only accept numeric input in WPF

Add a preview text input event. Like so: <TextBox PreviewTextInput="PreviewTextInput" />.

Then inside that set the e.Handled if the text isn't allowed. e.Handled = !IsTextAllowed(e.Text);

I use a simple regex in IsTextAllowed method to see if I should allow what they've typed. In my case I only want to allow numbers, dots and dashes.

private static readonly Regex _regex = new Regex("[^0-9.-]+"); //regex that matches disallowed text
private static bool IsTextAllowed(string text)
{
    return !_regex.IsMatch(text);
}

If you want to prevent pasting of incorrect data hook up the DataObject.Pasting event DataObject.Pasting="TextBoxPasting" as shown here (code excerpted):

// Use the DataObject.Pasting Handler 
private void TextBoxPasting(object sender, DataObjectPastingEventArgs e)
{
    if (e.DataObject.GetDataPresent(typeof(String)))
    {
        String text = (String)e.DataObject.GetData(typeof(String));
        if (!IsTextAllowed(text))
        {
            e.CancelCommand();
        }
    }
    else
    {
        e.CancelCommand();
    }
}

C# – How to correctly implement a modal dialog on top a non-modal dialog

Microsoft confirms this as a bug in WPF:

This isn't a regression from previous releases so it doesn't make the bar to be fixed for this version of the product. We'll look into this for a future release.

In the meantime, this can be worked around by activating the owner window when the child window is closing.

Sample code:

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
    }

    private void NonModalButtonClick(object sender, RoutedEventArgs e)
    {
        new Window1 { Owner = this }.Show();
    }

    private void ModalButtonClick(object sender, RoutedEventArgs e)
    {
        new Window1 { Owner = this }.ShowDialog();
    }

    protected override void OnClosing(System.ComponentModel.CancelEventArgs e)
    {
        if (this.Owner != null)
        {
            this.Owner.Activate();
        }
    }
}

(Note that the workaround will always bring the main window into foreground which might be different than the expected behavior)

Best Answer

Related Solutions

C# – How to get a TextBox to only accept numeric input in WPF

C# – How to correctly implement a modal dialog on top a non-modal dialog

Related Topic