示例应用

Question

我想要做的是与DisplayAlert类似，弹出一个显示页面，其中包含图像，内容和右上角的小关闭按钮。显示页面不应覆盖整个手机，但仅占手机用户界面的80％左右，背景仍为父页面。

我正在尝试使用PushModalAsync和PopModalAsync，但没有运气。输出不是我的预期。

基本上，我有一个列表视图，无论何时从屏幕中选择项目，它都会调用popUpMethod：

 list.ItemSelected += MyMethod;

在MyMethod中我将调用popUpPage

async void MyMethod(object sender, SelectedItemChangedEventArgs e){
Content = await PopUpPage();
}

这是我的PopUpPage方法

private async Task<StackLayout> PopUpPage()
{
     StackLayout objPopUp = new StackLayout() { HeightRequest = 100, WidthRequest= 100, VerticalOptions = LayoutOptions.CenterAndExpand};

     Label lblMessage = new Label();
     lblMessage.Text = "Welcome";

     objPopUp.Children.Add(lblMessage);

     return objPopUp;
}

我正在尝试在弹出页面中设置高度和宽度。然而，它仍然覆盖整个屏幕，这不是我想要的。如果需要任何充值信息，请告诉我，谢谢。

P / S：我用xamarin.Form（便携式）

设计了它

Answer 1

您可以在Xamarin.Forms

中创建自定义弹出窗口来完成此操作

这是我创建的自定义ContentView。它使用BoxView来显示淡化背景的外观，并使用Frame为弹出窗口添加阴影。

我还使用动画来使自定义弹出窗口显示为弹出屏幕！

示例应用

此示例应用程序的代码可在Github上找到：

https://github.com/brminnick/InvestmentDataSampleApp

代码段

public class WelcomeView : ContentView
{
    readonly BoxView _backgroundOverlayBoxView;
    readonly Frame _overlayFrame;
    readonly StackLayout _textAndButtonStack;

    readonly RelativeLayout _relativeLayout;

    public WelcomeView()
    {
        const string titleText = "Welcome";
        const string bodyText = "Enjoy InvestmentDataSampleApp";
        const string okButtonText = "Ok, thanks!";

        var whiteWith75Opacity = new Color(255, 255, 255, 0.75);
        _backgroundOverlayBoxView = new BoxView
        {
            BackgroundColor = whiteWith75Opacity
        };
        _backgroundOverlayBoxView.Opacity = 0;

        _overlayFrame = new Frame
        {
            HasShadow = true,
            BackgroundColor = Color.White
        };
        _overlayFrame.Scale = 0;

        var titleLabel = new Label
        {
            FontAttributes = FontAttributes.Bold,
            Text = titleText,
            HorizontalTextAlignment = TextAlignment.Center
        };

        var bodyLabel = new Label
        {
            Text = bodyText,
            HorizontalTextAlignment = TextAlignment.Center
        };

        var blackWith75PercentOpacity = new Color(0, 0, 0, 0.75);
        var okButton = new Button
        {
            BackgroundColor = blackWith75PercentOpacity,
            TextColor = Color.White,
            BorderWidth = 1,
            BorderColor = blackWith75PercentOpacity,
            FontAttributes = FontAttributes.Bold,
            Margin = new Thickness(5),
            Text = okButtonText
        };
        okButton.Clicked += (sender, e) => 
        {
            Device.BeginInvokeOnMainThread(async () =>
            {
                await this.FadeTo(0);
                this.IsVisible = false;
                this.InputTransparent = true;
            });
        }

        _textAndButtonStack = new StackLayout
        {
            HorizontalOptions = LayoutOptions.CenterAndExpand,
            Spacing = 20,
            Children = {
                titleLabel,
                bodyLabel,
                okButton
            }
        };
        _textAndButtonStack.Scale = 0;

        _relativeLayout = new RelativeLayout();
        Func<RelativeLayout, double> gettextAndButtonStackHeight = (p) => _textAndButtonStack.Measure(_relativeLayout.Width, _relativeLayout.Height).Request.Height;
        Func<RelativeLayout, double> gettextAndButtonStackWidth = (p) => _textAndButtonStack.Measure(_relativeLayout.Width, _relativeLayout.Height).Request.Width;


        _relativeLayout.Children.Add(_backgroundOverlayBoxView,
            Constraint.Constant(-10),
            Constraint.Constant(0),
            Constraint.RelativeToParent(parent => parent.Width + 20),
            Constraint.RelativeToParent(parent => parent.Height)
        );
        _relativeLayout.Children.Add(_overlayFrame,
            Constraint.RelativeToParent(parent => parent.Width / 2 - gettextAndButtonStackWidth(parent) / 2 - 20),
            Constraint.RelativeToParent(parent => parent.Height / 2 - gettextAndButtonStackHeight(parent) / 2 - 10),
            Constraint.RelativeToParent(parent => gettextAndButtonStackWidth(parent) + 30),
            Constraint.RelativeToParent(parent => gettextAndButtonStackHeight(parent) + 30)
        );

        _relativeLayout.Children.Add(_textAndButtonStack,
             Constraint.RelativeToView(_overlayFrame, (parent, view) => view.X + 15),
             Constraint.RelativeToView(_overlayFrame, (parent, view) => view.Y + 15)
        );

        if (Device.OS == TargetPlatform.Android)
        {
            _overlayFrame.IsVisible = false;
            _textAndButtonStack.BackgroundColor = whiteWith90Opacity;
        }

        Content = _relativeLayout;
    }

    public void DisplayView()
    {
        Device.BeginInvokeOnMainThread(async () =>
        {
            var animationList = new List<Task>
            {
                _backgroundOverlayBoxView.FadeTo(1,AnimationConstants.WelcomeViewAnimationTime),
                _textAndButtonStack.ScaleTo(AnimationConstants.WelcomeViewMaxSize, AnimationConstants.WelcomeViewAnimationTime),
                _overlayFrame.ScaleTo(AnimationConstants.WelcomeViewMaxSize,AnimationConstants.WelcomeViewAnimationTime)
            };
            await Task.WhenAll(animationList);

            animationList = new List<Task>
            {
                _textAndButtonStack.ScaleTo(AnimationConstants.WelcomeViewNormalSize, AnimationConstants.WelcomeViewAnimationTime),
                _overlayFrame.ScaleTo(AnimationConstants.WelcomeViewNormalSize, AnimationConstants.WelcomeViewAnimationTime)
            };
            await Task.WhenAll(animationList);
        });
    }
}

Answer 2

PushModalAsync会将页面推送到当前页面。而是使用相同的页面添加一个帧。使用您想要的任何控件配置框架。 1.将框架可见性设置为false，并将ItemSelected的make框架设置为可见。要么 2.在ItemSelected上动态添加框架（没有尝试过第二种方法。）。

Answer 3

更改您的代码，如下所示。

private async Task<StackLayout> PopUpPage () { 
    StackLayout objPopUp = new StackLayout () {HeightRequest = 0, WidthRequest = 0, VerticalOptions = LayoutOptions.Center, Padding = 10 }; 
    Label lblMessage = new Label (); 
    lblMessage.Text = "Welcome"; 
    objPopUp.Children.Add (lblMessage); 
    return objPopUp; 
}

Answer 4

您可以使用XLabs-PopUp-Control。使用该控件，您可以从您的页面显示一个PopUp，您可以在其中定义大小而不会出现问题。我在各种页面上使用它。 Link how to use it

Link how to install and setup XLabs

xamarin.form中的弹出消息框

4 个答案:

示例应用

代码段