PopUp 包含其他控件，如 DateTime Picker、dropdownlist

Question

这里是新手。我记得在Win10中，有一个PopUp UI，其中可以包含许多控件，例如Dropdown box，DatePciker等。这个 PopUp 可以在 Xaml 中构建。

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

问题：如何在 Xaml 中创建 PopUp

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>

我想知道：

我使用的是普通的 ContentPage。

1) 在其中，我放置了您的标记 ，我删除了 。这是正确的吗？

2) Frame 会是 PopUp 吗？
3) 在 btnPopUp 中使用什么代码来显示 PopUp？

谢谢

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 团队来说，性能网格更好。

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

如果您需要在多个屏幕中显示相同的弹出窗口，您可以使用第 3 方插件 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 中的 contentPage 替换为 PopupPage。要获得弹出效果，您的布局应该像我展示的第一个示例。在这里您还可以获得漂亮的动画效果。您可以在他们的网站上查看更多详细信息。

现在您可以通过以下方式调用弹出窗口：navigation.PushPopupAsync(new YourContentPage());

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

希望对你有用