How to show a full screen Modal ContentDialog in Windows Phone 8.1

Question

When a user is trying to login to my app, I am displaying a ContentDialog containing a few TextBlocks and a ProgressBar.

I choose ContentDialog because it is modal a

Answer 1

You can for example put a Grid as a content of your ContentDialog and set its Height/Width as Bounds of Current Window or your LayoutGrid:

// your code
stk.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Center;
Grid contentGrid = new Grid();
contentGrid.Height = Window.Current.Bounds.Height;
contentGrid.Width = Window.Current.Bounds.Width;
// or from LayoutGrid
//contentGrid.Height = LayoutRoot.ActualHeight;
//contentGrid.Width = LayoutRoot.ActualWidth;
contentGrid.Width -= 40; // it seems that ContentDialog has some defaul margin
contentGrid.Children.Add(stk);

ContentDialog dlg = new ContentDialog();
dlg.Content = contentGrid;
SolidColorBrush color = new SolidColorBrush(Colors.Black);
color.Opacity = 0.7;
dlg.Background = color;
await dlg.ShowAsync();

You can also think of using a PopUp.

Answer 2

In Windows Phone 8.1, ContentDialog has FullSizeDesired boolean property which, when set to true, will open the dialog in full size mode. (MSDN link).You'd need to set Background to a transparent color value if desired.

Answer 3

I found a solution which eliminates the code behind. Not sure if this is more of a work around. But it allows me to easily use Binding to decide when to display this modal dialog and when to hide it.

This is my XAML

<Grid>
<Grid Visibility="{Binding IsDownloadingData}" Canvas.ZIndex="1" Background="{StaticResource PartiallyTransparentBlackColor}" HorizontalAlignment="Stretch">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <ProgressBar Grid.Row="1" IsIndeterminate="True"/>
    <TextBlock Grid.Row="2" Text="Downloading Data..." FontSize="17" Foreground="White" HorizontalAlignment="Center"/>
    <TextBlock Grid.Row="3" Text="This could take a few seconds." FontSize="17" Foreground="White" HorizontalAlignment="Center"/>
    <TextBlock Grid.Row="4" Text="Please do not close the application." FontSize="17" Foreground="White" HorizontalAlignment="Center"/>
</Grid>
<ScrollViewer Canvas.ZIndex="0" VerticalAlignment="Stretch" Margin="0,10,0,10">
    <!-- The XAML that should be hidden goes here (In my case LOGIN PAGE XAML) -->
</ScrollViewer>

I play around with the visibility of the Grid that has Canvas.ZIndex="1" using Binding and decide when to display the modal window.