xamarin.form 中的弹出消息框 [英] popup message box in xamarin.form
问题描述
我想做的是类似于DisplayAlert,在右上角弹出一个包含图像、内容和一个小的关闭按钮的显示页面.显示页面不应覆盖整个手机,而应覆盖手机 UI 的 80% 左右,背景仍为父页面.
我正在尝试使用 PushModalAsync 和 PopModalAsync,但是没有运气.输出不是我所期望的.
基本上,我有一个列表视图,每当从屏幕中选择项目时,它都会调用 popUpMethod:
list.ItemSelected += MyMethod;
在 MyMethod 中,我将调用 popUpPage
async void MyMethod(object sender, SelectedItemChangedEventArgs e){内容 = 等待 PopUpPage();}
这是我的 PopUpPage 方法
私有异步任务弹出页面(){StackLayout objPopUp = new StackLayout() { HeightRequest = 100, WidthRequest= 100, VerticalOptions = LayoutOptions.CenterAndExpand};标签 lblMessage = 新标签();lblMessage.Text = "欢迎";objPopUp.Children.Add(lblMessage);返回 objPopUp;}
我正在尝试在弹出页面中设置高度和宽度.但是,它仍然覆盖整个屏幕,这不是我想要的.如果需要任何充值信息,请告诉我,谢谢.
P/S : 我是用 xamarin.Form(portable) 设计的
您可以在 Xamarin.Forms 中创建自定义弹出窗口来完成此操作
这是我创建的自定义 ContentView
.它使用 BoxView
来呈现背景淡化的外观,并使用 Frame
为弹出窗口添加阴影.
我还使用动画使自定义弹出窗口看起来好像从屏幕上弹出一样!
示例应用
此示例应用的代码可在 Github 上获得:
代码片段
public class WelcomeView : ContentView{只读 BoxView _backgroundOverlayBoxView;只读帧_overlayFrame;只读 StackLayout _textAndButtonStack;只读相对布局 _relativeLayout;公共欢迎视图(){const string titleText = "欢迎";const string bodyText = "Enjoy InvestmentDataSampleApp";const string okButtonText = "好的,谢谢!";var whiteWith75Opacity = new Color(255, 255, 255, 0.75);_backgroundOverlayBoxView = 新的 BoxView{BackgroundColor = whiteWith75Opacity};_backgroundOverlayBoxView.Opacity = 0;_overlayFrame = 新框架{HasShadow = 真,背景颜色 = 颜色.白色};_overlayFrame.Scale = 0;var titleLabel = 新标签{FontAttributes = FontAttributes.Bold,文字 = 标题文字,HorizontalTextAlignment = TextAlignment.Center};var bodyLabel = 新标签{文字 = 正文,HorizontalTextAlignment = TextAlignment.Center};var blackWith75PercentOpacity = new Color(0, 0, 0, 0.75);var okButton = 新按钮{背景颜色 = blackWith75PercentOpacity,TextColor = Color.White,边框宽度 = 1,BorderColor = blackWith75PercentOpacity,FontAttributes = FontAttributes.Bold,边距 = 新厚度(5),文本 = okButtonText};okButton.Clicked += (sender, e) =>{Device.BeginInvokeOnMainThread(async () =>{等待 this.FadeTo(0);this.IsVisible = false;this.InputTransparent = true;});}_textAndButtonStack = 新的 StackLayout{HorizontalOptions = LayoutOptions.CenterAndExpand,间距 = 20,儿童 = {标题标签,身体标签,确定按钮}};_textAndButtonStack.Scale = 0;_relativeLayout = 新的RelativeLayout();FuncgettextAndButtonStackHeight = (p) =>_textAndButtonStack.Measure(_relativeLayout.Width, _relativeLayout.Height).Request.Height;FuncgettextAndButtonStackWidth = (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;}内容 = _relativeLayout;}公共无效显示视图(){Device.BeginInvokeOnMainThread(async () =>{var animationList = new List{_backgroundOverlayBoxView.FadeTo(1,AnimationConstants.WelcomeViewAnimationTime),_textAndButtonStack.ScaleTo(AnimationConstants.WelcomeViewMaxSize, AnimationConstants.WelcomeViewAnimationTime),_overlayFrame.ScaleTo(AnimationConstants.WelcomeViewMaxSize,AnimationConstants.WelcomeViewAnimationTime)};等待 Task.WhenAll(animationList);动画列表 = 新列表<任务>{_textAndButtonStack.ScaleTo(AnimationConstants.WelcomeViewNormalSize, AnimationConstants.WelcomeViewAnimationTime),_overlayFrame.ScaleTo(AnimationConstants.WelcomeViewNormalSize, AnimationConstants.WelcomeViewAnimationTime)};等待 Task.WhenAll(animationList);});}}
What I am trying to do is similar to DisplayAlert, popup a display page that contains image, content and a small close button at top right. The display page shouldn't cover the whole phone but just around 80% of the phone UI, background remain as parent page.
I am trying to play around with PushModalAsync and PopModalAsync, however with no luck. The output is not what I expected.
Basically, I have a listview, whenever item is selected from screen it will call for popUpMethod:
list.ItemSelected += MyMethod;
inside MyMethod i will call popUpPage
async void MyMethod(object sender, SelectedItemChangedEventArgs e){
Content = await PopUpPage();
}
and this is my PopUpPage method
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;
}
I am trying to set the height and width inside my popup page. However, it is still covering the whole screen which is not what I want. let me know if any top up information is needed, thank you.
P/S : i designed it in xamarin.Form(portable)
You can create a custom pop-up to accomplish this in Xamarin.Forms
Here is a custom ContentView
that I created. It uses a BoxView
to give the appearance of fading the background, and uses a Frame
to add a shadow to the pop-up.
I also use animations to make the custom pop-up appear as if it is springing off of the screen!
Sample App
The code for this sample app is available on Github:
https://github.com/brminnick/InvestmentDataSampleApp
Code Snippet
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);
});
}
}
这篇关于xamarin.form 中的弹出消息框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!