728x90
반응형

Android, iOS 에 따라서 코드 분기가 필요할때가 있다 Xamarin 에서도 기기적 특성으로 인해

사용한적이 많았는데 이부분은 Xamarin 껄 그대로 가져왔다.

xaml  단에서 사용방법은 OnPlatform 태그를 사용
( <OnPlatform> 테그를 쓰거나 직접 값을 지정할때 x:OnPlatform 을 사용하는 방식 )

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.NewPage"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
             Title="NewPage"
             Padding="10,10,10,100"
             BackgroundColor="White">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0, 10, 0, 0" />
            <On Platform="Android" Value="10, 10, 10, 10" />
        </OnPlatform>
    </ContentPage.Padding>
    <StackLayout >
        <StackLayout.Margin>
            <OnPlatform x:TypeArguments="Thickness">
                <On Platform="iOS" Value="0, 10, 0, 0" />
                <On Platform="Android" Value="10, 10, 10, 10" />
            </OnPlatform>
        </StackLayout.Margin>
        <Label Text="Kei Soft 강준 (https://github.com/kei-soft)"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" 
                TextColor="{x:OnPlatform iOS=Black, Android=Blue, UWP=Gray}"/>
        <Button x:Name="sfListViewButton" Text="SfListView" Clicked="sfListViewButton_Clicked"/>
    </StackLayout>
</ContentPage>

 

C# Code 는 Device.RuntimePlatform 으로 구분

        if (Device.RuntimePlatform == Device.Android)
        {
            Padding = new Thickness(0, 10, 0, 0);
        }
        else if (Device.RuntimePlatform == Device.iOS)
        {
            Padding = new Thickness(10, 10, 10, 10);
        }
반응형
728x90
반응형

2022.03.01 - [Xamarin_MAUI] - [.NET MAUI] Syncfusion 의 SfListView 사용하기

 

[.NET MAUI] Syncfusion 의 SfListView 사용하기

Nuget Package 관리에서 시험판 포함을 체크하고 'Syncfusion.Maui.ListView' 설치 MauiProgram.cs 에서 아래 처럼 builder.ConfigureSyncfusionListView(); 를 호출해 준다. using Syncfusion.Maui.ListView.Hos..

kjun.kr

위 SfListView 내용에이어 item 을 선택한 경우 선택한 아이템에 대한 디자인 처리 방법

SelectionBackground="Skyblue" 를 이용하여 선택한 항목의 배경색 변경

<?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
            Grid.Row="1" 
            x:Name="listView"
            ItemSize="100" 
            ItemsSource="{Binding BookInfo}"
            SelectionBackground="Skyblue">
            <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>

SelectedItemTemplate 을 이용해 커스텀하게 배경색과 글자색 글자 크기등을 변경

<?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
            Grid.Row="1" 
            x:Name="listView"
            ItemSize="100" 
            ItemsSource="{Binding BookInfo}"
            SelectionBackground="Skyblue">
            <syncfusion:SfListView.SelectedItemTemplate>
                <DataTemplate>
                    <Grid x:Name="grid" BackgroundColor="RoyalBlue">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.4*" />
                            <RowDefinition Height="0.6*" />
                        </Grid.RowDefinitions>
                        <Label Text="{Binding BookName}"  FontAttributes="Bold" TextColor="Black" FontSize="25"  />
                        <Label Grid.Row="1" Text="{Binding BookDescription}"  TextColor="White" FontSize="16"/>
                    </Grid>
                </DataTemplate>
            </syncfusion:SfListView.SelectedItemTemplate>
            <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>

https://github.com/kei-soft/MauiApp

반응형
728x90
반응형

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
반응형

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 단에서 사용할 명칭을 넣어 추가해 준다.

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");
    });

    return builder.Build();
}

xaml 단에서는 FontFamily 에 정의한 명칭을 넣어주면 된다.

<Label 
    Text="Hello, World!"
    Grid.Row="0"
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" 
    FontFamily="NanumBrush"/>

반응형
728x90
반응형

* MS 공식문서
https://docs.microsoft.com/ko-kr/dotnet/maui/

 

.NET 다중 플랫폼 앱 UI 설명서 - .NET MAUI

.NET 다중 플랫폼 앱 UI(.NET MAUI)를 사용하면 Android, iOS, macOS, Windows 및 Tizen의 모바일 및 데스크톱 폼 팩터를 대상으로 하는 .NET 플랫폼 간 UI 도구 키트를 사용하여 네이티브 앱을 빌드할 수 있습니

docs.microsoft.com

 


* NET MAUI 소개
https://subscribe.packtpub.com/getting-started-with-microsoft-net-maui/

 

Getting started with Microsoft .NET MAUI | Packt

.NET Multi-platform App UI (.NET MAUI) is an evolution of the Xamarin.Forms toolkit. With developer productivity in mind, MAUI simplifies the project structure into a single project to target multiple platforms (Android, iOS, macOS, and Windows). In this a

subscribe.packtpub.com


* 사용하기 편한 상용 컨트롤
https://www.syncfusion.com/maui-controls

 

.NET MAUI Controls to Build Mobile and Desktop Apps | Syncfusion

The Syncfusion .NET Multi-platform App UI (.NET MAUI) library offers a set of controls for creating beautiful cross-platform, native mobile & desktop apps.

www.syncfusion.com

https://help.syncfusion.com/maui

 

Syncfusion Essential Studio Resources and Documentation

 

help.syncfusion.com




* Hander 사용 방법 - Xamarin 의 Renderer 대체
https://www.codemag.com/Article/2111082/An-Introduction-to-.NET-MAUI

 

An Introduction to .NET MAUI

You’ve been using Xamarin for years. Steven shows how the .NET Multi-platform App UI (.NET MAUI) hasn't just kept up with everything, but how it compare...

www.codemag.com

 

반응형
728x90
반응형

아 MAUI 에서도 시작하자마자 이 에러를 만날줄이야;;

심각도 코드 설명 프로젝트 파일 줄 비표시 오류(Suppression) 상태
오류 MSB4018 "XamlCTask" 작업에서 예기치 않은 오류가 발생했습니다.
System.Xml.XmlException: 지정한 인코딩에 잘못된 문자가 있습니다. 줄 18, 위치 61

원인은 XAML 단에 있는 한글이 문제 였다

구글링해보니 영어가 아니면 에러가 나는듯하다.;;

https://developercommunity.visualstudio.com/t/net-maui-the-xamlctask-task-failed-unexpectedly-wh/1589236

영어만 인식되나 보다ㅎ;

C# 코드 쪽에 한글은 문제 없다 xaml 단에 직접적으로 넣으면 에러가 발생되었다.

그런데 페이지를 하나 추가하고 xaml 단에 한글을 넣으면 에러가 발생되지 않는다;;;

<?xml version="1.0" encoding="utf-8" ?> 이부분이 MainPage 에 없어 넣어보았지만 여전히 에러;

기본으로 생성되있는 MainPage.xaml 에 한글이 있으면 에러가 발생되는듯;;

App.xaml.cs 에서 MainPage 를 바라보게 하지 않고 신규 생성한 NewPage 를 바라보게 했다

잘된다.... ㅎ;; 처음 있던 MainPage 는 사용하지 말도록 하자

 

 

반응형
728x90
반응형

https://docs.microsoft.com/en-us/dotnet/maui/get-started/installation

 

.NET MAUI installation - .NET MAUI

Installation instructions for .NET MAUI.

docs.microsoft.com

위 링크에서 preview 버전을 다운받고 하면 아래처럼 MAUI 가 보인다
실행해 보니 빌드에서 배포까지 시간이 상당히 빨라진거 같다.

반응형

+ Recent posts