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平台,实现点击功能按钮后展示弹窗并选择信息给出反馈。

相关推荐
唐青枫4 小时前
C#.NET 定时任务与队列利器:Hangfire 完整教程
c#·.net
hez201010 小时前
Runtime Async - 步入高性能异步时代
c#·.net·.net core·clr
追逐时光者1 天前
.NET Fiddle:一个方便易用的在线.NET代码编辑工具
后端·.net
mudtools1 天前
.NET驾驭Word之力:玩转文本与格式
c#·.net
唐青枫1 天前
C#.NET 数据库开发提速秘籍:SqlSugar 实战详解
c#·.net
追逐时光者1 天前
精选 4 款基于 .NET 开源、功能强大的 Windows 系统优化工具
后端·.net
mudtools2 天前
.NET驾驭Word之力:理解Word对象模型核心 (Application, Document, Range)
c#·.net
大飞pkz2 天前
【设计模式】C#反射实现抽象工厂模式
设计模式·c#·抽象工厂模式·c#反射·c#反射实现抽象工厂模式
唐青枫2 天前
从入门到进阶:C#.NET Stopwatch 计时与性能测量全攻略
c#·.net
私人珍藏库2 天前
[Windows] 微软 .Net 运行库离线安装包 | Microsoft .Net Packages AIO_v09.09.25
microsoft·.net·运行库