首页 > 其他分享 >MAUI新生6.6-搜索栏SearchHandler

MAUI新生6.6-搜索栏SearchHandler

时间:2023-01-01 15:01:41浏览次数:42  
标签:控件 Monkey 6.6 UI MAUI new SearchHandler Name

一、搜索栏SearchHandler的基本原理,如下图所示

 

  • 搜索栏主要有两部分组成:UI控件和SearchHandler派生类。其中UI控件负责数据展示,并提供查询搜索和点击选择项的UI交互功能;SearchHandler派生类响应控件的查询和点击事件,并提供数据源、筛选结果和导航跳转功能。
  • SearchHandler派生类有两个重写方法:OnQueryChanged和OnItemSelected。当UI控件输入查询关键词时,触发OnQueryChanged方法,在方法中对数据源进行筛选,并将筛选结果重新渲染到UI控件。当UI控件点击选择后,触发OnItemSelected方法,将方法中进行导航跳转。

 

 

二、搜索栏的使用

1、定义SearchHandler派生类,保存在Controls文件夹下

public class MonkeySearchHandler:SearchHandler
{
    //数据源,本例硬编码写死
    public List<Monkey> Monkeys { get; set; } = new List<Monkey>
    {
        new Monkey { Name="zs",Age=18 },
        new Monkey { Name="ls",Age=28 },
        new Monkey { Name="ww",Age=38 },
        new Monkey { Name="zl",Age=23 },
        new Monkey { Name="qq",Age=29 }
    };
    //根据UI控件查询关键词筛选数据源
    //参数oldValue为旧的查询关键词,newValue为新的查询关键词
    protected override void OnQueryChanged(string oldValue, string newValue)
    {
        base.OnQueryChanged(oldValue, newValue);

        if (string.IsNullOrWhiteSpace(newValue))
        {
            ItemsSource = null;
        }
        else
        {
            ItemsSource = Monkeys
                .Where(m => m.Name.ToLower().Contains(newValue.ToLower()))
                .ToList<Monkey>();
        }

    }
    //根据UI控件选择项进行导航,使用查询参数传递路由参数。导航跳转的MonkeyDetail页面,如何接收参数,详见导航章节
    //参数item为选择项
    protected override async void OnItemSelected(object item)
    {
        base.OnItemSelected(item);
        await Task.Delay(1000);
        await Shell.Current.GoToAsync($"monkeydetail?name={((Monkey)item).Name}&age={((Monkey)item).Age}");
    }
}

 

2、在XAML页面中使用搜索栏,本例中为Monkey页面

<ContentPage
    ......
    xmlns:c="clr-namespace:MauiApp13.Controls">

    <!--c:MonkeySearchHandler类似于一个集合控件,ItemSource由MonkeySerachHandler.cs提供-->
    <!--ItemTemplate提供集合项目的视觉模板-->
    <Shell.SearchHandler>
        <c:MonkeySearchHandler Placeholder="请输入Monkey名称" ShowsResults="True">
            <c:MonkeySearchHandler.ItemTemplate>
                <DataTemplate>
                    <HorizontalStackLayout>
                        <Label Text="{Binding Name}" />
                        <Label Text="{Binding Age}" />
                    </HorizontalStackLayout>
                </DataTemplate>
            </c:MonkeySearchHandler.ItemTemplate>
        </c:MonkeySearchHandler>
    </Shell.SearchHandler>
    ......
</ContentPage>

 

3、UI控件的其它属性设置

 

<!--SearchBoxVisibility,搜索栏是否可见,Hidden/Collapsible/Expanded-->
<!--Keyboard,弹出键盘样式,Default /Chat/Email/Numeric/Plain/Telephone/Text/Url-->
<Shell.SearchHandler>
    <c:MonkeySearchHandler
        Placeholder="请输入Monkey名称"
        SearchBoxVisibility="Hidden"
        Keyboard="Default"
        ShowsResults="True">
        <c:MonkeySearchHandler.ItemTemplate>
            <DataTemplate>
                <HorizontalStackLayout>
                    <Label Text="{Binding Name}" />
                    <Label Text="{Binding Age}" />
                </HorizontalStackLayout>
            </DataTemplate>
        </c:MonkeySearchHandler.ItemTemplate>
    </c:MonkeySearchHandler>
</Shell.SearchHandler>

 

标签:控件,Monkey,6.6,UI,MAUI,new,SearchHandler,Name
From: https://www.cnblogs.com/functionMC/p/17018076.html

相关文章

  • MAUI新生6.5-导航路由Navigation
    MAUI的Shell导航框架,也是以路由方式进行导航,并提供了两套导航方式,一是如前面章节所述的视觉层次结构,会自动建立导航路由,可以进行不同层次页面的导航切换;二是为页面手动注册......
  • MAUI新生6.4-内容页ShellContent
    ShellContent是Shell视觉层次结构中,最终承载内容页的构件,Shell>FlyoutItem或TabBar>Tab>ShellContent-View。 一、按需加载内容页和应用启动时加载内容页1、按需加载内......
  • Visual Studio 2022 MAUI NU1105(NETSDK1005) 处理记录
    故障说明MAUI项目是日常使用的项目,一直都好好的某一天修改了几行代码后,突然项目无法编译了,提示NU1105错误从Git重新拉取一份之前的代码编译也是同样的错误,经过半天......
  • MAUI新生6.3-底部Tab栏导航TabBar/Tab/ShellContent
    一、TabBar的基本使用:如果只需要底部Tab栏导航,则应使用TabBar。TabBar的使用,和FlyoutItem基本相同,如下图所示:    二、底部Tab栏的样式设置Shell.TabBarBackgr......
  • 学习.NET MAUI Blazor(三)、创建.NET MAUI Blazor应用并使用AntDesignBlazor
    大致了解了Blazor和MAUI之后,尝试创建一个.NETMAUIBlazor应用。需要注意的是:虽然都叫MAUI,但.NETMAUI与.NETMAUIBlazor并不相同,MAUI还是以xaml为主,而MAUIBlazor则是......
  • MASA MAUI Plugin (七)应用通知角标(小红点)Android+iOS
    背景MAUI的出现,赋予了广大Net开发者开发多平台应用的能力,MAUI是Xamarin.Forms演变而来,但是相比Xamarin性能更好,可扩展性更强,结构更简单。但是MAUI对于平台相关的实现并不......
  • MAUI新生6.2-浮出控件导航Flyout-FlyoutItem/MenuItem/Header/Footer
    如前章所述,Shell导航框架,在UI层面,有两种导航方式,一是浮出控件导航,二是底部Tab栏导航,本章节将深入学习浮出控件导航。浮出控件提供了非常丰富的定制功能,组成部分如下图所示:......
  • MAUI新生5.6-Form表单类控件难点
     一、表单类控件目录Entry,单行输入框Edit,多行输入框CheckBox,复选框RadioButton,单选框Picker,下拉单选框Switch,开关Slider,滑块Stepper,步进器DataPicker,日期选择框......
  • MAUI-FilePicker选择文件_选择头像
    一、代码:privateasyncvoidBtnPickAndShow_Clicked(objectsender,EventArgse){try{varresult=awaitFilePicker.PickAs......
  • MAUI新生5.2-Page页面类控件难点
    1、Page页面类控件目录ContentPage,普通内容页。NavigationPage,导航页。FlyoutPage,浮出导航页。TabbedPage,底部Tab栏导航页 2、使用经验:如果使用Shell导航框架,则......