弹出窗口包含其他控件，如日期时间选取器，下拉列表

Question

新手在这里。我记得在Win10中，有一个PopUp UI，它可以包含许多控件，如Dropdown Box，DatePciker等。此弹出窗口可以在 Xaml 中构造。

我正在为平板电脑开发一个应用程序。 是否可以在包含下拉列表，日期选择器，时间选择器的Xamarin表单中使用此类弹出窗口？建议做这么复杂的用户界面？它会在安卓和iOS中引起问题吗？

问题 ： 如何在 Xaml
中创建弹出窗口

so ,I can use a button to open or close it.
var button = new Button {Text = "Show Popup"};
button.Clicked += (s, e) => popup.Show();

更新

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.View.PopUpDemo"
Title="PopUp Demo"
Icon="itemIcon3">
<Grid>
<Grid>
<!--Your Page xaml-->
<Button x:Name="btnPopUp"  Click="ShowPopUp"/>
</Grid>
<Grid HorizontalOptions="Fill" BackgroundColor="##60000000" IsVisible="{Binding GridVisibility}">
<Grid VerticalOptions="CenterAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width="9*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Frame Grid.Column="1" Padding="0"  HasShadow="True" OutlineColor="#e6e6e6">
<Grid BackgroundColor="White" RowSpacing="0" ColumnSpacing="0">
<!--content for popup-->
</Grid>
</Frame>
</Grid>
</Grid>
</Grid>
</ContentPage>

我想知道：

我使用的是普通的内容页面。

1)在其中，我放置您的标记<网格>，我删除<内容页面.内容>。这是对的吗？

2)框架将是弹出窗口吗？
3)在btnPopUp中使用什么代码来显示弹出窗口？

谢谢

Answer 1

是的，您可以在没有任何性能问题的情况下实现它。您可以使用叠加层显示弹出窗口，如下所示

<Grid>
<Grid>
<!--Your Page xaml-->
</Grid>
<Grid HorizontalOptions="Fill" BackgroundColor="##60000000" IsVisible="{Binding GridVisibility}">
<Grid VerticalOptions="CenterAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width="9*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Frame Grid.Column="1" Padding="0"  HasShadow="True" OutlineColor="#e6e6e6">
<Grid BackgroundColor="White" RowSpacing="0" ColumnSpacing="0">
<!--content for popup-->
</Grid>
</Frame>
</Grid>
</Grid>
</Grid>

这个很简单。在这里，我添加了网格来实现这一点。您还可以使用其他布局。但是对于性能网格，根据 xamarin 团队来说更好。

对于第二个网格，我添加了可见性属性，以便您可以与任何事件连接。 在这里，我为弹出窗口##60000000添加了背景颜色，以便在弹出窗口出现时，背景将是透明的，具有浅黑色效果。

如果您需要在多个屏幕中弹出相同的弹出窗口，您可以使用 3rd 方插件 https://github.com/rotorgames/Rg.Plugins.Popup 这将使您的工作更轻松。为此，您必须创建一个新的内容页面，将内容页面替换为

<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
x:Class=""
BackgroundColor="##60000000"
InputTransparent="True"
HasSystemPadding="True"
CloseWhenBackgroundIsClicked="False">
<pages:PopupPage.Animation>
<animations:MoveAnimation
PositionIn="Bottom"
PositionOut="Bottom"/>
</pages:PopupPage.Animation>
<Grid>
<!--your xaml code-->
</Grid>

注意：在 youpage.xaml.cs 中将内容页面替换为弹出页面。要获得弹出效果，您的布局应该像我展示的第一个示例一样。在这里，您还可以获得漂亮的动画效果。您可以在他们的网站上看到更多详细信息。

现在，您可以通过调用以下内容来调用弹出窗口：navigation.PushPopupAsync(new YourContentPage());

并通过调用await PopupNavigation.RemovePageAsync(this);删除弹出窗口

希望这对你有用