如何在Windows Phone 8.1中显示全屏模态ContentDialog

Question

当用户尝试登录我的应用程序时，我会显示一个包含几个文本块和进度条的ContentDialog。

我选择ContentDialog，因为它是模态的，并阻止用户操作，直到应用程序收集所需信息并准备好导航到下一页。

以下link显示了适用于Windows Phone 8.1（通用应用程序）的Content Dialog类。

以下代码显示了我编写的后台代码以显示ContentDialog（我暂时将其放在OnNavigatedTo中进行测试，稍后将其移动到适当的通知功能中）。

//Progress Bar
ProgressBar bar = new ProgressBar();
bar.IsIndeterminate = true;

//Downloading Data text
TextBlock txt = new TextBlock();
txt.Text = "Downloading data...";
txt.FontSize = 17;
txt.Foreground = new SolidColorBrush(Colors.White);
txt.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center;

//This could take a few seconds
TextBlock txt2 = new TextBlock();
txt2.Text = "This could take a few seconds.";
txt2.FontSize = 17;
txt2.Foreground = new SolidColorBrush(Colors.White);
txt2.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center;

//Please do not close the application.
TextBlock txt3 = new TextBlock();
txt3.Text = "Please do not close the application.";
txt3.FontSize = 17;
txt3.Foreground = new SolidColorBrush(Colors.White);
txt3.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center;

StackPanel stk = new StackPanel();
stk.Children.Add(bar);
stk.Children.Add(txt);
stk.Children.Add(txt2);
stk.Children.Add(txt3);


ContentDialog dlg = new ContentDialog();
dlg.Content = stk;
SolidColorBrush color = new SolidColorBrush(Colors.Black);
color.Opacity = 0.7;
dlg.Background = color;
dlg.Margin = new Thickness(0, 250, 0, 0);
dlg.ShowAsync();

这将显示为 如上所示，它仅覆盖了部分背景

我希望它能够以全屏模式显示 我尝试过更改高度和其他属性，但无法使其正常工作。

如果有人能指点我方向，我会非常感激。

- HelpMatters

Answer 1

我找到了一种解决方案，可以消除后端代码。不确定这是否更多是一个变通方法。但它允许我轻松地使用绑定来决定何时显示这个模态对话框以及何时隐藏它。

这是我的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>

我使用绑定来控制具有 Canvas.ZIndex="1" 的网格的可见性，并决定何时显示模态窗口。

- HelpMatters

---

玩弄UI元素的可见性也是一个不错的解决方案。只需记得处理手机的“返回键”，因为它不会自动处理。 - Romasz

只是一句话提醒：不要忘记将“IsIndeterminate”绑定到可见性。如果可见性被折叠，但“IsIndeterminate”仍为真，则它仍将在后台运行。 - Vitalii Vasylenko

Answer 2

例如，您可以将Grid放置在ContentDialog中，并将其高度/宽度设置为当前窗口或LayoutGrid的Bounds：

// 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();

你也可以考虑使用一个弹出窗口。

- Romasz

---

弹出窗口不是一个选项，因为它不是模态的。 - HelpMatters

你上面提供的解决方案完美地运作了。谢谢。但是我正在使用MVVM模式，它几乎不鼓励使用code-behind。你能想到任何将其移出code-behind的方法吗？我在下面有一个答案，使用Canvas.ZIndex并调整可见性。但我不确定这是否更像是一种变通方法而不是正确的方法。 - HelpMatters

mvvm模式并不是一个“无代码后台”模式。它是一种模式，其中您的应用程序逻辑不应意识到您的接口。这是完全不同的。 是的，您应该避免代码后台，以使您的xaml尽可能易于维护，但是如果代码后台可以解决您的问题，请不要犹豫。 - Miiite

Answer 3

在Windows Phone 8.1中，ContentDialog具有FullSizeDesired布尔属性，当设置为true时，将以全尺寸模式打开对话框。 (MSDN链接)。如果需要，您需要将Background设置为透明颜色值。

- Sumant