XAML 如何使我的内容视图在屏幕的中心,在我的网格之上?

lo8azlld  于 2022-12-07  发布在  其他
关注(0)|答案(1)|浏览(146)

现在,我的ContentView(就像一个弹出窗口)堆叠在我的网格上,见下面的代码:

<StackLayout>
    <ContentView>...</>
    <StackLayout>
        <Grid>...</>
    </StackLayout>
</StackLayout>

网格是一个表单,所以当我按下表单中的一个按钮时,我希望一个新的弹出窗口(contentview)出现在网格的上方,位于屏幕的中心。这样做的目的是,您仍然可以看到contentview后面的一些表单。
如何将contentview放在前面,而不是堆叠在网格的顶部?

<ContentView x:Name="popupAddDetails" AbsoluteLayout.LayoutBounds="0,0,1,1"
                         VerticalOptions="Center" HorizontalOptions="Center">

PS:我是新来的,还在学习中,非常感谢你的帮助
我试着在我的第一个stacklayout上面做一个stacklayout,把我的网格放在里面,然后在我的contentview中设置垂直和水平属性,但是它只是堆叠在我的内部stacklayout上面。

qgzx9mmu

qgzx9mmu1#

您可以简单地使用Xamarin社区工具包弹出窗口来创建它。
首先,向您的项目添加一个名为Xamarin.CommunityToolkit的新Nuget。
然后,创建一个弹出页面,当你点击一个按钮时就会显示出来。这与创建一个ContentPage非常相似。

<?xml version="1.0" encoding="UTF-8" ?>
<xct:Popup
        xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        x:Class="ContentDemo.CommunityPopupPage"
        xmlns:xct="clr- namespace:Xamarin.CommunityToolkit.UI.Views;assembly=Xamarin.CommunityToolkit">
    
     <StackLayout WidthRequest="200" HeightRequest="200"BackgroundColor="Red"HorizontalOptions="Center" VerticalOptions="Center">
        <Label Text="hello"/>
    </StackLayout>
</xct:Popup>

.cs可能如下所示:

using Xamarin.CommunityToolkit.UI.Views;
namespace ContentDemo
{
    public partial class CommunityPopupPage : Popup
    {
        public CommunityPopupPage()
        {
            this.Size = new Size(300, 300); //you could change the size of the popup
            InitializeComponent();
        }
    }
}

最后,您可能希望通过按钮单击事件打开此弹出页面。不要忘记添加以下行:

using Xamarin.CommunityToolkit.Extensions;

void Button_Clicked(System.Object sender, System.EventArgs e)
{
    App.Current.MainPage.Navigation.ShowPopup(new CommunityPopupPage());
}

我创建了这个演示,它运行得很好。你可以参考Xamarin Community Toolkit PopupGetting Started with the Xamarin Community Toolkit了解更多信息。
==================更新=====

2.使用外部布局作为Grid而不是StackLayout**可能是一种替代方法。**类似如下:

<Grid x:Name="outerGrid"  VerticalOptions="Center" > //this grid includes the grid and the contentview to be shown
    <Grid x:Name="innerGrid">   
        <Grid.RowDefinitions>
           ...
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            ...
        </Grid.ColumnDefinitions>
    </Grid>
    <ContentView>
    ...     // design the content
    <ContentView />
</Grid>

通过这种方式,ContentView将被放置在innerGrid之上。
希望对你有用。

相关问题