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 는 그 아래에 배치
Xamarin 에서는 폰트나 이미지를 추가할때 각 네이티브 프로젝트에서 처리를해야했다. (공통 프로젝트에서 관리하는 방법도 있긴함)
그런데 MAUI 에서는 단순하게 추가해 주고 쓰면 된다. Resources 폴더 아래에 Fonts, Images 폴더에 원하는 이미지와 폰트를 가져다 놓는다.
이미지는 아래처럼 쓰면 된다.
<Image Grid.Row="4"
Source="kei.png"
SemanticProperties.Description="Cute dot net bot waving hi to you!"
WidthRequest="250"
HeightRequest="310"
HorizontalOptions="Center" />
폰트는 MauiProgram.cs 에 아래 처럼 원하는 폰트파일명과 xaml 단에서 사용할 명칭을 넣어 추가해 준다.
