CODEWITHSUNDEEP
c#windows-8windows-store-appswinrt-xamlwindows-8.1
Mayur Laniya
Mayur Laniya

Reputation: 49

How to disable background GUI interaction when popup dialog opens

Is there any way to disable background GUI interaction when popup dialog open? My popup dialog is a UserControl so cannot manually set the content of that page using isEnabled to false property as my popup dismiss login is on that usercontrol page.

Thanks in advance.

Upvotes: 2

Views: 4493

Answers (4)

Sandeep T D S
Sandeep T D S

Reputation: 527

In your event handler (Button) that opens the popup, write the following piece of code.

 private void PopupButton_Click(object sender, RoutedEventArgs e)
 {
    this.IsHitTestVisible = false;
    this.Opacity = 0.5;
    MyPopup.IsOpen = true;
 }

And when your popup closes, you may catch the event and write the following code. 

private void MyPopup_Closed(object sender, object e)
{
    this.IsHitTestVisible = true;
    this.Opacity = 1;
}

This would give the same visual effect that you get when once opens a Dialog.

Upvotes: 2

Pablo Corso
Pablo Corso

Reputation: 139

A workaround to disable the space that your popup control is not taking could be actually taking that space, and making the "unused" space transparent or partially transparent to get that nice message dialog effect.

For example, if your popup looks like a classic winrt message dialog (full width and vertically centered), make your popup control have the same width and height as your background and make the popup's content a grid with 3 row definitions. Place the actual content in the middle row, so it will be vertically centered. Then place a grid in the first row with black background color and opacity of 0.4, and with a rowspan of 3 so it will take all the space. Once you Open the popup, it will take focus over the whole background so the user cannot interact with it but still being able to see the background that the actual content doesn't overlap.

Here a simple example of what i say:

<UserControl ...>
    <Popup x:Name="PopupControl"
           IsLightDismissEnabled="False"
           Loaded="PopupControl_Loaded">

        <!-- The content of the Popup, a grid with 3 rows. The second row takes half of the space from the popup -->
        <Grid x:Name="PopupGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="2*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <!-- Place a grid on the first row with black background, a rowspan of 3 will take all the rows so the user cannot interct with the actual background. -->
            <Grid Grid.RowSpan="3"
                  Background="Black"
                  Opacity="0.4" />

            <!-- Here place the actual content of your popup. -->
            <Grid Grid.Row="1" Background="White">
                [Acutal content of the popup]
            </Grid>

        </Grid>
    </Popup>
</UserControl>

In the code behind of the user control:

// Finally make the popup control full screen.
private void PopupControl_Loaded(object sender, RoutedEventArgs e)
{
   this.PopupGrid.Height = Window.Current.CoreWindow.Bounds.Height;
   this.PopupGrid.Width = Window.Current.CoreWindow.Bounds.Width;
}

Upvotes: 1

Boobalan
Boobalan

Reputation: 823

I have used SwapChainPanel to disable parent view content user interaction. Also I have added gray overlay while my custom popup is shown.

  <SwapChainPanel x:Name="DirectXPanel"  Visibility="{Binding IsOpen, Converter={StaticResource BooleanToVisibilityConverter}}" >
        <Border  CornerRadius="5" Opacity="0.60"  Background="#000000" ></Border>
    </SwapChainPanel>

   <UserControls:CustomLoginPanel x:Name="CustomLoginPanel" Height="220" Width="400"
               HorizontalAlignment="Center" 
                VerticalAlignment="Center"
                Grid.Row="0"
                IsOpen="{Binding IsOpen, Mode=TwoWay}"
                Margin="0,70,0,0"/>

Here ProgressDialog is my custom popover which I want to show while user is login.

SwapChainPanel is going to cover entire window while custom popover is shown. By default it is hidden.

IsOpen is property exist in my view. This property is used to Show/Hide the Popover.

"BooleanToVisibilityConverter" is a converter used to convert boolean to Visibility

BooleanToVisibilityConverter.cs:

public sealed class BooleanToVisibilityConverter:IValueConverter
{

    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return (value is bool && (bool)value) ? Visibility.Visible : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return value is Visibility && (Visibility)value == Visibility.Visible;
    }
}

Upvotes: 1

Bryan Stump
Bryan Stump

Reputation: 1439

You can set a background grid on your user control and on the background grid set IsHitTestVisible="False" Your popover will be defined after the grid so it's placed on top and can receive user input.

To disable the app bar, you can disable that when the popup opens. If there is a different app bar on every page then it's possible you could write a method which would find any app bar in the UI and disable it until the popup window is closed.

WinRTXAMLToolkit has a visual tree helper class, which could be used to find the app bars.

var AppBars = Window.Current.Content.GetDescendentsOfType<type of app bar>();
foreach(var appBar in AppBars)
{
    appBar.IsEnabled=false;
}

When the popup window is hidden, re-enable the app bars.

Upvotes: 2

Related Questions