web-dev-qa-db-ja.com

Windows Phone8.1でフルスクリーンのモーダルContentDialogを表示する方法

ユーザーがアプリにログインしようとすると、いくつかのTextBlockとProgressBarを含むContentDialogが表示されます。

ContentDialogを選択したのは、それがモーダルであり、アプリケーションが必要な情報を収集して次のページに移動する準備ができるまでユーザーをブロックするためです。

次の リンク は、Windows Phone 8.1（ユニバーサルアプリ）で使用できるコンテンツダイアログクラスを示しています。

次のコードは、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();

これは次のように表示されます enter image description here 上では、背景の一部しかカバーしていないことがわかります

次のように表示したい enter image description here

フルスクリーンをモーダルにすることによって。

高さやその他のプロパティを変更しようとしましたが、機能しませんでした。

誰かが私を正しい方向に向けてくれたら嬉しいです。

c#windows-phone-8.1win-universal-app
12
HelpMatters

私は背後にあるコードを排除する解決策を見つけました。これが回避策であるかどうかはわかりません。ただし、Bindingを使用して、このモーダルダイアログを表示するタイミングと非表示にするタイミングを簡単に決定できます。

これは私の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>

Bindingを使用してCanvas.ZIndex = "1"を持つグリッドの可視性を試して、モーダルウィンドウをいつ表示するかを決定します。

17
HelpMatters

たとえば、グリッドをContentDialogのコンテンツとして配置し、その高さ/幅を現在のウィンドウまたは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();

PopUp を使用することも考えられます。

12
Romasz

Windows Phone 8.1では、ContentDialogにFullSizeDesired booleanプロパティがあり、trueに設定すると、ダイアログがフルサイズモードで開きます。 （ MSDNリンク ）。必要に応じて、Backgroundを透明色の値に設定する必要があります。

5
Sumant