Question

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

我正在为平板电脑开发一款应用。可以在Xamarin表单中使用包含Dropdown List，DatePicker，Time Picker的PopUp吗？建议做这么复杂的用户界面？它会在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）在其中，我放置你的MarkUp＆lt; Grid＆gt; ，我删除＆lt; ContentPage.Content＆gt;。这是正确的吗？

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

由于

Answer 1

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

navigationController

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

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

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

替换内容页面

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

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

现在您可以致电：<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>  </Grid>

来拨打弹出窗口

通过调用navigation.PushPopupAsync(new YourContentPage());

删除弹出窗口

希望这对你有用

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

1 个答案: