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

相关推荐
△曉風殘月〆2 小时前
WPF MVVM入门系列教程(二、依赖属性)
c#·wpf·mvvm
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
m0_656974747 小时前
C#中的集合类及其使用
开发语言·c#
九鼎科技-Leo7 小时前
了解 .NET 运行时与 .NET 框架:基础概念与相互关系
windows·c#·.net
九鼎科技-Leo10 小时前
什么是 ASP.NET Core?与 ASP.NET MVC 有什么区别?
windows·后端·c#·asp.net·mvc·.net
.net开发10 小时前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf
小乖兽技术10 小时前
C#与C++交互开发系列(二十):跨进程通信之共享内存(Shared Memory)
c++·c#·交互·ipc
幼儿园园霸柒柒10 小时前
第七章: 7.3求一个3*3的整型矩阵对角线元素之和
c语言·c++·算法·矩阵·c#·1024程序员节
平凡シンプル12 小时前
C# EF 使用
c#
丁德双13 小时前
winform 加载 office excel 插入QRCode图片如何设定位置
c#·excel