자마린(Xamarin)

(자마린교육,자마린학원,자마린아카데미)ListView 심플 데이터 바인딩,ListView에서 클릭시 새창 띄우면서 데이터 넘기…

(자마린교육,자마린학원,자마린아카데미)ListView 심플 데이터 바인딩,ListView에서 클릭시 새창 띄우면서 데이터 넘기기_Xamarin학원,자마린출강,Xamrin학원,Xamarin교육,Xamarin출강 

 

 

4.7.3 ListView 심플 데이터 바인딩, 컬렉션 바인딩(Collection Binding), ListView에서 클릭시 새창 띄우면서 데이터 넘기기

n  Xamarin.FormsListView IEnumerable 형식의 ItemsSource 속성을 가지며 컬렉션의 항목들을 표시한다. 이 항목은 모든 유형의 개체가 될 수 있는데 기본적으로 ListView는 각 항목의 ToString() 메서드를 사용하여 해당 항목을 표시하도록 설계 되어 있다.

n  ListView 컬렉션의 항목(Item)은 셀(Cell)에서 파생되는 클래스가 포함 된 템플릿을 통해 원하는 방식으로 표시 할 수 있는데 템플릿은 ListView의 모든 항목에 대해서 복제된다.

n  ViewCell 클래스를 사용하여 이러한 항목에 대한 사용자 정의 셀을 생성할 때 C# 코드에서는 다소 복잡하지만 XAML에서는 매우 간단하다.

n  예제 프로젝트에는 Emp라는 클래스가 있고 int 타입의 사번(Empno), string 타입의 이름(Ename) 속성을 가진다. 또한 Emp 클래스에는 여러 사원을 컬렉션 형태로 담을 수 있는 Emps 속성을 가지며 static 생성자에서 Emps 속성을 초기화 했다.

n  static 속성인 Emp.EmpsListView ItemsSource로 설정하는 방법은 XAML에서는 x : Static 태그 확장을 사용하면 되고, C# 코드에서는 리스트뷰의 ItemSource 속성에 컬렉션을 할당하면 된다.

XAML : <ListView ItemsSource="{x:Static local:Emp.Emps}" />

C#코드 : listView.ItemSource = Emp.Emps;

n  Xamarin.Forms, PCL(이식 가능한 클래스 라이브러리) 프로젝트를 생성하고 프로젝트명을 “App6”으로 입력하자.

n  [MainWindow.xaml]

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:local="clr-namespace:App6"

             x:Class="App6.MainPage">

    <ListView ItemsSource="{x:Static local:Emp.Emps}" />

</ContentPage>

 

n  [Emp.cs]

using System;

using System.Collections.Generic;

namespace App6

{

    public class Emp

    {

        public int Empno { get; set; }

        public string Ename { get; set; }

 

        public static IEnumerable<Emp> Emps { get; set; }

 

        static Emp()

        {

            Emps = new List<Emp>

            {

                new Emp() { Empno = 1, Ename = "홍길동" },

                new Emp() { Empno = 2, Ename = "박길동" },

                new Emp() { Empno = 3, Ename = "정길동" },

new Emp() { Empno = 4, Ename = "나길동" },

new Emp() { Empno = 5, Ename = "김길동" }

 

            };

        }

 

        public override string ToString()

        {

            return string.Format("Empno : {0}, Ename : {1}", Empno, Ename);

        }

    }

}

 

n  [실행화면] : Emp 클래스의 ToString() 메소드가 실행됨을 알 수 있다.

n  이번에는 ListView의 항목(Item)에 대한 템플릿을 정의해서 데이터를 출력해 보자.

n  프로퍼티 엘리먼트로 ItemTemplate 속성을 분리하여 DataTemplate으로 설정 한 다음 ViewCell을 참조해야 하는데 ViewCell View 속성에 각 항목을 표시 할 하나 이상의 레이아웃을 정의 할 수 있다.

n  아래 예문에서는 Grid 요소가 ViewCellView 프로퍼티 안에 정의되고 그 안에 Label 요소를 들어하고 데이터 바인딩을 통해 EmpEmpno, Ename 속성값들이 출력된다.

n  [MainWindow.xaml]을 수정하자.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:local="clr-namespace:App6"

             x:Class="App6.MainPage">

 

    <ListView ItemsSource="{x:Static local:Emp.Emps}">

        <ListView.ItemTemplate>

            <DataTemplate>

                <ViewCell>

                    <ViewCell.View>

                        <Grid>

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="1*"/>

                                <ColumnDefinition Width="1*"/>

                            </Grid.ColumnDefinitions>

                            <Label Grid.Column="0" Text="{Binding Empno}" HorizontalOptions="Center"/>

                            <Label Grid.Column="1" Text="{Binding Ename}" HorizontalOptions="Center"/>

                        </Grid>

                    </ViewCell.View>

                </ViewCell>

            </DataTemplate>

        </ListView.ItemTemplate>

    </ListView>

</ContentPage>

 

n  [실행결과]

 

n  이번에는 ListView에서 사용자가 항목을 클릭했을 때 새창을 띄우고 사번과 이름을 새로운 화면에 출력해 보자.

n  새창을 띄우기 위해서는 Navigation.PushAsync()를 사용해야 하는데 App.xaml.cs의 생성자 부분을 아래와 같이 수정하자.

n  [App.xaml.cs]

public App()

        {

            InitializeComponent();

 

            //MainPage = new App6.MainPage();

            //PushAsync is not supported globally on Android, please use a NavigationPage 오류 발생을 방지하기 위해 NavigationPage를 사용

            MainPage = new NavigationPage(new MainPage());

        }

 

n  [MainWindow.xaml]에서는 ListView를 코드 비하인드에서 사용해야 하므로 ListView에 이름속성(x:Name)이 추가되었다.

 

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:local="clr-namespace:App6"

             x:Class="App6.MainPage">

 

    <ListView x:Name="listView" ItemsSource="{x:Static local:Emp.Emps}">

        <ListView.ItemTemplate>

            <DataTemplate>

                <ViewCell>

                    <ViewCell.View>

                        <Grid>

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="1*"/>

                                <ColumnDefinition Width="1*"/>

                            </Grid.ColumnDefinitions>

                            <Label Grid.Column="0" Text="{Binding Empno}" HorizontalOptions="Center"/>

                            <Label Grid.Column="1" Text="{Binding Ename}" HorizontalOptions="Center"/>

                        </Grid>

                    </ViewCell.View>

                </ViewCell>

            </DataTemplate>

        </ListView.ItemTemplate>

    </ListView>

</ContentPage>

 

n  [MainWindow.xaml.cs] 파일에서는 ListViewItemSelected 이벤트 처리용 코드가 추가되었다.

 

using Xamarin.Forms;

 

namespace App6

{

    public partial class MainPage : ContentPage

    {

        public MainPage()

        {

            InitializeComponent();

 

            listView.ItemSelected += async (sender, e) => {

                if (e.SelectedItem == null) return;

 

                var emp = e.SelectedItem as Emp;               

               

                //await DisplayAlert("Tapped!", e.SelectedItem + " was tapped.", "OK");

                var nextPage =new NextPage();

                nextPage.BindingContext = emp;

                await Navigation.PushAsync(nextPage);

            };

        }

    }

}

 

n  추가 >> 새항목추강[Xamarin.Forms ContentPage 템플릿 형식으로 NextPage.xaml을 추가하자.

n  [NextPage.xaml]

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="App6.NextPage">

    <ContentPage.Content>

        <StackLayout>

            <Label Text="{Binding Empno}" />

            <Label Text="{Binding Ename}" />

        </StackLayout>

    </ContentPage.Content>

</ContentPage>

 

n  [NextPage.xaml.cs] 파일은 수정할 필요 없다.

n  [Emp.cs] 파일은 이전과 동일하다.

using System;

using System.Collections.Generic;

namespace App6

{

    public class Emp

    {

        public int Empno { get; set; }

        public string Ename { get; set; }

 

        public static IEnumerable<Emp> Emps { get; set; }

 

        static Emp()

        {

            Emps = new List<Emp>

            {

                new Emp() { Empno = 1, Ename = "홍길동" },

                new Emp() { Empno = 2, Ename = "박길동" },

                new Emp() { Empno = 3, Ename = "정길동" },

                new Emp() { Empno = 4, Ename = "나길동" },

                new Emp() { Empno = 5, Ename = "김길동" }

            };

        }

 

        public override string ToString()

        {

            return string.Format("Empno : {0}, Ename : {1}", Empno, Ename);

        }

    }

}

n  [실행결과]

 

 

Comments