如何在Windows应用商店应用中创建模态弹出窗口

时间:2015-04-13 04:35:19

标签: c# xaml popup windows-store windows-rt

我试图在Windows商店应用程序中创建自己的模态弹出窗口。 我没有使用下面列出的当前模式弹出窗口。

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

我需要更多的ui元素,如文本框和组合框,而不仅仅是按钮和文字,所以我不能使用上面提供的简单模态解决方案。

我创建了自己的" UserControl"并将其嵌入到弹出式播放器中#34; xaml中的元素如下所示:

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

上面提供的解决方案显示了我想要的弹出窗口。弹出窗口不是模态的,因此可以选择背后的元素,并且背景不会像MessageDialog那样变暗,以向用户显示弹出窗口是模态的。

我查看了MSDN popup documentation的属性和方法,但找不到任何允许弹出窗口为模态的属性。

作为次优解决方案,我可以创建一个&#34; Border&#34;或者&#34;网格&#34;在后台调整元素背后的控件并禁用其后面的控件。我想要一个内置的解决方案或更干净的解决方案来完成相同的任务。

感谢您的时间。

1 个答案:

答案 0 :(得分:0)

我找到的唯一解决方案(对我来说最容易)就是在附加行为中创建一个Popupbehavior:

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

现在你有了页面的主面板,你可以在它出现时创建逻辑,添加依赖属性命令,来自关联对象的事件,具体取决于类型或其中的任何内容。

当你想要显示模态弹出窗口时:

    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;
    }

现在你有了面板,然后添加了popupbehavior的Child dependendy属性

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

当然会添加点击模态网格时发生的事情

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;
            }
        };

这是我找到的最佳方式。