How can I create a Modal popup in a windows store application

Question

I'm trying to create my own modal popup window in a windows store application. I am not using the current modal popup window listed below.

new MessageDialog("test").ShowAsync();

I need more ui elements like text box's and combo box's, not just buttons and text so I cannot use the simple modal solution provided above.

I have created my own "UserControl" and embedded it into a "Popup" element in xaml as provided below:

<Popup x:Name="SaveDialogPopup" IsOpen="True" Loaded="SaveDialogPopup_OnLoaded">
    <controls:SaveDialogControl Width="{Binding ActualWidth, ElementName=Page}"/>
</Popup>

The solution provided above displays a popup how I want it. The popup is not modal so elements behind it can be selected and the background is not dimmed like the MessageDialog to show the user the popup is modal.

I have looked through the properties and methods of the MSDN popup documentation and cannot find any properties that allow my popup to be modal.

As a sub-optimal solution I could create a "Border" or "Grid" element in the background to dim the controls behind it and disable the controls behind it. I would like a built in solution or a more clean solution to do the same task.

Thank you for your time.

score 0 · Answer 1 · answered Apr 13 '15 at 07:53

The only solution I found is (the most easy for me) is creating a Popupbehavior, in the attach behavior:

public async void Attach(DependencyObject associatedObject)
    {
        AssociatedObject = associatedObject;

        var frame = Window.Current.Content as Frame;
        while (frame.Content == null)
            await Task.Delay(100);
        var page = frame.Content as Page;
        var panel = page.Content as Panel;

         Initialize();
  }

Now you have the main panel of the page you can create the logic when it appears, add a dependency property command, event from the associatedobject depending on the type or whatever in that.

when you want to show the modal popup:

    public Task<Grid> AddModalToPanel(Panel panel)
    {
        TaskCompletionSource<Grid> tasksource = new TaskCompletionSource<Grid>();

        var gray = new SolidColorBrush(Color.FromArgb(110, 0, 0, 0));

        Grid grd = new Grid() { Background = gray };
        grd.SetValue(Grid.RowSpanProperty, 10);
        grd.SetValue(Grid.ColumnSpanProperty, 10);

        grd.Opacity = 0.01;

        grd.Loaded += async (s, e) =>
        {
            tasksource.SetResult(grd);
            //animations...
        };
        panel.Children.Add(grd);
        return tasksource.Task;
    }

Now you have the panel, then add the Child dependendy property of the popupbehavior

   Child.SetValue(Grid.HorizontalAlignmentProperty, HorizontalAlignment.Center);
            Child.SetValue(Grid.VerticalAlignmentProperty, VerticalAlignment.Center);
    Child.Visibility = Visibility.Visible;

and of course add what happens when you tap the modalgrid

modalpanel.Tapped += async (s, e) =>
        {
            if (e.OriginalSource == modalpanel)
            {
               //Animations...

                modalpanel.Children.Remove(Child);
                panel.Children.Remove(modalpanel);
                Child.Loaded -= element_Loaded;

                (Child.RenderTransform as CompositeTransform).TranslateX = StartPos.X;
                (Child.RenderTransform as CompositeTransform).TranslateY = StartPos.Y;
            }
        };

That's the best way I found to make it.

How can I create a Modal popup in a windows store application

1 Answers1