xamarin 表单：在项目选择上具有重叠弹出视图的列表视图答案

【问题标题】：xamarin forms : List view with overlapping popupview on item selectionxamarin 表单：在项目选择上具有重叠弹出视图的列表视图
【发布时间】：2020-10-26 19:46:41
【问题描述】：

我正在尝试创建一个列表视图，当点击列表中的特定项目时，它会在项目的角落显示一个弹出视图，并且此视图将与列表的其他项目重叠。

假设列表有三个项目活动，非活动，非活动，当我点击第一个项目时，它会显示一个弹出视图/框架，它将在列表的第一个项目和列表中的其他项目下重叠/呈现.

我不确定它是否可以实现，我该怎么做？尝试了绝对布局，但无法获取列表中项目的正确值。

谁能帮助/建议如何实现它？

我在项目点击时尝试了以下代码：

  void TapGestureRecognizer_Tapped(System.Object sender, System.EventArgs e)
            {
                var label1 = new Label { Text = "View" };
                var label2 = new Label { Text = "Edit" };
                var label3 = new Label { Text = "Delete" };
                var sl = new StackLayout { HorizontalOptions = LayoutOptions.End, VerticalOptions= LayoutOptions.FillAndExpand };
                sl.Children.Add(label1);
                sl.Children.Add(label2);
                sl.Children.Add(label3);
                var f = new Frame { HorizontalOptions = LayoutOptions.End, VerticalOptions = LayoutOptions.FillAndExpand };
                f.Content = sl;
                f.BackgroundColor = Color.AliceBlue;
                f.HeightRequest = 150;
                var bv = (sender as StackLayout).Children[1];
                //AbsoluteLayout.SetLayoutBounds(f, new Rectangle(bv.Width - 20, bv.Y, 130, 500));
                //AbsoluteLayout.SetLayoutFlags(f, AbsoluteLayoutFlags.All);
                //(sender as StackLayout).Children.Add(f);
    
                AbsoluteLayout.SetLayoutBounds(f, new Rectangle(0.5, 0.5, 110, 25));
                AbsoluteLayout.SetLayoutFlags(f, AbsoluteLayoutFlags.PositionProportional);
                (sender as StackLayout).Children.Add(f);
        }

它没有工作。视图的高度就像几个像素。 [![在此处输入图片描述][3]][3]

【问题讨论】：

首先，创建一个在点击时起作用的独立模板，然后将该模板添加到列表视图中。或者，在点击时打开一个操作表。
您好，第三张图片看不到。我会建议使用 SfPopupLayout，有一个 Relative positioning 可以很容易地设置在一些视图下方。

标签： xamarin xamarin.forms

【解决方案1】：

如果需要用这种方式实现，可以计算自定义Frame的位置。

例如，如果Xaml代码如下：

<ContentPage.Content>
    <RelativeLayout x:Name="mylayout">
      
        <ListView x:Name="MyListView"
                  HasUnevenRows="True"
                  ItemSelected="MyListView_ItemSelected"
                  ItemsSource="{Binding items}"
                  IsVisible="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                       ...
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </RelativeLayout>
</ContentPage.Content>

然后你可以为这个mylayout添加子视图：

private void MyListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
    //Navigation.PushAsync(new MainPage());

    var label1 = new Label { Text = "View" };
    var label2 = new Label { Text = "Edit" };
    var label3 = new Label { Text = "Delete" };
    var sl = new StackLayout { HorizontalOptions = LayoutOptions.End, VerticalOptions = LayoutOptions.FillAndExpand };
    sl.Children.Add(label1);
    sl.Children.Add(label2);
    sl.Children.Add(label3);
    var f = new Frame { HorizontalOptions = LayoutOptions.End, VerticalOptions = LayoutOptions.FillAndExpand };
    f.Content = sl;
    f.BackgroundColor = Color.AliceBlue;
    f.HeightRequest = 150;
    
    var Yposition = MyListView.Y + MyListView.RowHeight * TapIndex;
    mylayout.Children.Add(f, () => new Rectangle(MyListView.Width-120, Yposition, 110, 110));
}

根据点击索引，我们可以计算出自定义Frame的Yposition。

效果：

【讨论】：