2.依附弹窗(AttachListPopup)

愿你出走半生,归来仍是少年!

环境:.NET 7

基于基础的Popup对象实现的依附于某个控件的弹窗,弹窗可呈现数组对象,达到较好的选择交互效果。

1.布局

通过Border 实现圆角边框轮廓,然后通过内部的ListView实现列表展示。

XML 复制代码
<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiLib.Utility.Controls.Popups.AttachListPopup"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Name="popup" 
             Color="Transparent" 
              >


    <VerticalStackLayout x:Name="outLyt"     BackgroundColor="Transparent">

        <Border    BackgroundColor="White"  StrokeThickness="0"  StrokeShape="RoundRectangle 10,10,10,10"  HorizontalOptions="Center">
 
        <VerticalStackLayout  >
 
            <ListView    x:Name="lv"    ItemSelected="lv_ItemSelected"  VerticalScrollBarVisibility="Never">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextCell   Text="{Binding}"   TextColor="Black" >
                             
                            
                        </TextCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
  
        </VerticalStackLayout>
    </Border>
    </VerticalStackLayout>

</toolkit:Popup>

2.代码

通过传入要依附的控件对象以及需要进行选择的文本集合,可实现弹窗的构建。在选择后通过CloseAsync方法返回选择的数据序号。

cs 复制代码
/// <summary>
/// 依附列表popup
/// </summary>
public partial class AttachListPopup : CommunityToolkit.Maui.Views.Popup
{

    /// <summary>
    /// 
    /// </summary>
    /// <param name="items">选项</param>
    /// <param name="anchorView">依附的控件</param>
    /// <param name="marginLeft">左侧间隔</param>
    /// <param name="marginBottom">底部间隔</param>
    /// <param name="width">宽度</param>
    public AttachListPopup(List<string> items ,View anchorView,double marginLeft,double marginBottom,double width=140)
    {
        InitializeComponent();

        lv.ItemsSource = items;

        this.Anchor=anchorView;
       
        outLyt.Padding = new Thickness(anchorView.Width+ marginLeft, 0, 0,  marginBottom);
           
        outLyt.WidthRequest = anchorView.Width +marginLeft+ width;
    }
 

    private async void lv_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
		await CloseAsync(e.SelectedItemIndex);
    }
}

3.使用

cs 复制代码
var allBTiles = smv.BasicTiles.Select(p => p.Last().DisplayName).ToList();

var popup = new AttachListPopup(allBTiles, sender as Button, 12, 20);

var result = await this.ShowPopupAsync(popup);

if (result != null)
{
    await smv.ChangedBasicTile((int)result);

    await Toast.Make($"底图已切换为{allBTiles[(int)result]}").Show();
}

4.效果

此处展示是基于Android平台,实现点击功能按钮后展示弹窗并选择信息给出反馈。

相关推荐
YuanlongWang2 小时前
c# 泛型的详细介绍
c#
嵌入式学习和实践4 小时前
C# WinForms 多窗口交互通信的示例-主窗口子窗口交互通信
c#·交互·主窗口-子窗口通信
专注VB编程开发20年4 小时前
C#,VB.NET数组去重复,提取键名和重复键和非重复键
c#·.net·linq·取唯一键·去重复·重复数量
Full Stack Developme4 小时前
java.net 包详解
java·python·.net
YuanlongWang5 小时前
Entity Framework Core和SqlSugar的区别,详细介绍
c#
unicrom_深圳市由你创科技8 小时前
工业上位机,用Python+Qt还是C#+WPF?
python·qt·c#
假装我不帅16 小时前
wsl+vscode开发.net项目
ide·vscode·.net
偶尔的鼠标人18 小时前
Avalonia DataGrid 控件的LostFocus事件会多次触发
开发语言·c#
ytttr87319 小时前
C# 仿QQ聊天功能实现 (SQL Server数据库)
数据库·oracle·c#
future_studio21 小时前
聊聊 Unity(小白专享、C# 小程序 之 图片播放器)
unity·小程序·c#