728x90
728x170
Nuget Package 관리에서 시험판 포함을 체크하고 'Syncfusion.Maui.ListView' 설치
MauiProgram.cs 에서 아래 처럼 builder.ConfigureSyncfusionListView(); 를 호출해 준다.
using Syncfusion.Maui.ListView.Hosting;
namespace MauiApp1;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("NotoSans-Regular.ttf", "NotoSansRegular");
fonts.AddFont("NanumBrush.ttf", "NanumBrush");
});
builder.ConfigureSyncfusionListView(); // SfListView 사용위함
return builder.Build();
}
}
ListView 에 바인딩할 Model 정의
BookInfo.cs
using System.ComponentModel;
namespace MauiApp1.Model
{
public class BookInfo : INotifyPropertyChanged
{
private string bookName;
private string bookDesc;
public string BookName
{
get { return bookName; }
set
{
bookName = value;
OnPropertyChanged("BookName");
}
}
public string BookDescription
{
get { return bookDesc; }
set
{
bookDesc = value;
OnPropertyChanged("BookDescription");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string name)
{
if (this.PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
}
ViewModel 생성 (ListView 에 바인딩될 데이터 BookInfo)
SfListViewTestViewModel.cs
using MauiApp1.Model;
using System.Collections.ObjectModel;
namespace MauiApp1.ViewModel
{
public class SfListViewTestViewModel
{
private ObservableCollection<BookInfo> bookInfo;
public ObservableCollection<BookInfo> BookInfo
{
get { return bookInfo; }
set { this.bookInfo = value; }
}
public SfListViewTestViewModel()
{
bookInfo = new ObservableCollection<BookInfo>();
bookInfo.Add(new BookInfo() { BookName = "Object-Oriented Programming in C#", BookDescription = "Object-oriented programming is a programming paradigm based on the concept of objects" });
bookInfo.Add(new BookInfo() { BookName = "C# Code Contracts", BookDescription = "Code Contracts provide a way to convey code assumptions" });
bookInfo.Add(new BookInfo() { BookName = "Machine Learning Using C#", BookDescription = "You will learn several different approaches to applying machine learning" });
bookInfo.Add(new BookInfo() { BookName = "Neural Networks Using C#", BookDescription = "Neural networks are an exciting field of software development" });
bookInfo.Add(new BookInfo() { BookName = "Visual Studio Code", BookDescription = "It is a powerful tool for editing code and serves for end-to-end programming" });
bookInfo.Add(new BookInfo() { BookName = "Android Programming", BookDescription = "It provides a useful overview of the Android application life cycle" });
bookInfo.Add(new BookInfo() { BookName = "iOS Succinctly", BookDescription = "It is for developers looking to step into frightening world of iPhone" });
bookInfo.Add(new BookInfo() { BookName = "Visual Studio 2015", BookDescription = "The new version of the widely-used integrated development environment" });
bookInfo.Add(new BookInfo() { BookName = "Xamarin.Forms", BookDescription = "It creates mappings from its C# classes and controls directly" });
bookInfo.Add(new BookInfo() { BookName = "Windows Store Apps", BookDescription = "Windows Store apps present a radical shift in Windows development" });
}
}
}
View 생성
- 검색할 SearchBar 를 상단에 위치
- ListView 는 그 아래에 배치
SfListViewTestView.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="MauiApp1.SfListViewTestView"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
Title="SfListView"
BackgroundColor="White">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<SearchBar x:Name="filterText"
HeightRequest="40"
Placeholder="Search here to filter"
TextChanged="OnFilterTextChanged"/>
<syncfusion:SfListView x:Name="listView" Grid.Row="1"
ItemSize="100"
ItemsSource="{Binding BookInfo}">
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="0.4*" />
<RowDefinition Height="0.6*" />
</Grid.RowDefinitions>
<Label Text="{Binding BookName}" FontAttributes="Bold" TextColor="Blue" FontSize="21" />
<Label Grid.Row="1" Text="{Binding BookDescription}" TextColor="Teal" FontSize="15"/>
</Grid>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
</Grid>
</ContentPage>
SfListViewTestView.xaml.cs
using MauiApp1.Model;
using MauiApp1.ViewModel;
namespace MauiApp1;
public partial class SfListViewTestView : ContentPage
{
SearchBar searchBar = null;
public SfListViewTestView()
{
InitializeComponent();
this.BindingContext = new SfListViewTestViewModel();
}
private void OnFilterTextChanged(object sender, TextChangedEventArgs e)
{
searchBar = (sender as SearchBar);
if (listView.DataSource != null)
{
this.listView.DataSource.Filter = FilterContacts;
this.listView.DataSource.RefreshFilter();
}
}
private bool FilterContacts(object obj)
{
if (searchBar == null || searchBar.Text == null)
return true;
var taskInfo = obj as BookInfo;
if (taskInfo.BookName.ToLower().Contains(searchBar.Text.ToLower())
|| taskInfo.BookDescription.ToLower().Contains(searchBar.Text.ToLower()))
{
return true;
}
else
{
return false;
}
}
}
결과 화면
소스
https://github.com/kei-soft/MauiApp
728x90
그리드형
'C# > Xamarin Maui' 카테고리의 다른 글
[.NET MAUI] 플래폼(Android,iOS)에 따른 code 및 xaml 단 처리 방법 (0) | 2022.03.01 |
---|---|
[.NET MAUI] SfListView 선택 항목 디자인 처리 (0) | 2022.03.01 |
[.NET MAUI] 이미지 , 폰트 추가 (0) | 2022.03.01 |
[.NET MAUI] 참고 사이트 모음 (0) | 2022.02.28 |
[.NET MAUI] MSB4018 "XamlCTask" 작업에서 예기치 않은 오류가 발생했습니다. (0) | 2022.02.28 |