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

相关推荐
simonkimi33 分钟前
解决无法在Cursor中使用C# Dev Kit的问题
c#·cursor
步、步、为营4 小时前
.net微服务框架dapr保存和获取状态
微服务·架构·.net
枯萎穿心攻击6 小时前
ECS由浅入深第三节:进阶?System 的行为与复杂交互模式
开发语言·unity·c#·游戏引擎
小码编匠7 小时前
WPF 自定义TextBox带水印控件,可设置圆角
后端·c#·.net
水果里面有苹果7 小时前
17-C#的socket通信TCP-1
开发语言·tcp/ip·c#
阿蒙Amon15 小时前
C# Linq to SQL:数据库编程的解决方案
数据库·c#·linq
iCxhust17 小时前
c# U盘映像生成工具
开发语言·单片机·c#
SEO-狼术18 小时前
Highcharts Dashboards provides crack
.net
emplace_back19 小时前
C# 集合表达式和展开运算符 (..) 详解
开发语言·windows·c#