ListView 에서 선택한 셀에 대한 색상을 변경하는 방법입니다.

아래는 기본 적인 ListView 코드입니다.

        <ListView x:Name="originalListView"
                  RowHeight="30"
                  SeparatorVisibility ="Default"
                  SeparatorColor="Black"
                  Margin="10"                  >
            <ListView.Header>
                <StackLayout Orientation="Horizontal"
                             VerticalOptions="CenterAndExpand"
                             Padding="0"
                             Spacing="0"
                             BackgroundColor="Gray"
                             HeightRequest="30">
                    <Label  Text="항목"
                            HorizontalOptions="CenterAndExpand"
                            VerticalOptions="Center"
                            TextColor="Black"
                            HorizontalTextAlignment="Center"
                            FontSize="12"
                            WidthRequest="80"/>
                    <Label  Text="데이터1"
                            HorizontalOptions="CenterAndExpand"
                            VerticalOptions="Center"
                            TextColor="Black"
                            HorizontalTextAlignment="Center"
                            WidthRequest="80"
                            FontSize="12"/>
                    <Label  Text="데이터2"
                            HorizontalOptions="CenterAndExpand"
                            VerticalOptions="Center"
                            TextColor="Black"
                            HorizontalTextAlignment="Center"
                            WidthRequest="80"
                            FontSize="12"/>
                </StackLayout>
            </ListView.Header>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ViewCell.View>
                            <StackLayout>
                                <StackLayout VerticalOptions="CenterAndExpand"
                                             Orientation="Horizontal"
                                             Padding="0"
                                             Spacing="0">
                                    <Label  Text="{Binding Content}"
                                            HorizontalOptions="CenterAndExpand"
                                            VerticalOptions="Center"
                                            TextColor="Black"
                                            HorizontalTextAlignment="Center"
                                            WidthRequest="80"
                                            FontSize="12"/>
                                    <Label  Text="{Binding Data1}"
                                            HorizontalOptions="CenterAndExpand"
                                            VerticalOptions="Center"
                                            TextColor="Black"
                                            HorizontalTextAlignment="Center"
                                            WidthRequest="80"
                                            FontSize="12"/>
                                    <Label  Text="{Binding Data2}"
                                            HorizontalOptions="CenterAndExpand"
                                            VerticalOptions="Center"
                                            TextColor="Black"
                                            HorizontalTextAlignment="Center"
                                            WidthRequest="80"
                                            FontSize="12"/>
                                </StackLayout>
                            </StackLayout>
                        </ViewCell.View>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

위처럼 Page 에 위치 시킨 후 구동하면 아래와 같이 선택한 컬럼에 대해서 아래와 같이 나타납니다.

(선택 색상이 전혀 어울리지 않습니다.^^; - 안드로이드 버젼별로 색이 다름)

 

이상한 자주색이 맘에 들지 않습니다.; 선택한 컬럼에 대해 색상을 변경해봅시다.

먼저 .Net Standard 프로젝트에 ExtendedViewCell 클래스를 추가합니다.

using Xamarin.Forms;

namespace Test.Extended
{
    public class ExtendedViewCell : ViewCell
    {
        public static readonly BindableProperty SelectedBackgroundColorProperty =
            BindableProperty.Create("SelectedBackgroundColor",
                                    typeof(Color),
                                    typeof(ExtendedViewCell),
                                    Color.Default);

        public Color SelectedBackgroundColor
        {
            get { return (Color)GetValue(SelectedBackgroundColorProperty); }
            set { SetValue(SelectedBackgroundColorProperty, value); }
        }
    }
}

여기선 단순히 SelectedBackgroundColor 속성을 선언만 할 뿐입니다.

실질적인 동작은 각 장치별 렌더러에서 맡아서 처리하게됩니다.

 

Android 프로젝트로 가서 ExtendedViewCellRenderer 클래스를 추가합니다.

using Android.Content;
using Android.Graphics.Drawables;
using Android.Views;
using Test.Droid.ExtendedRenderer;
using Test.Extended;
using System.ComponentModel;
 
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(ExtendedViewCell), typeof(ExtendedViewCellRenderer))]
namespace Test.Droid.ExtendedRenderer
{
    public class ExtendedViewCellRenderer : ViewCellRenderer
    {
        private Android.Views.View cellCoreView;
        private Drawable unSelectedBackground;
        private bool isSelected;

        protected override Android.Views.View GetCellCore(
            Cell item, Android.Views.View convertView, ViewGroup parent, Context context)
        {
            this.cellCoreView = base.GetCellCore(item, convertView, parent, context);

            this.isSelected = false;
            this.unSelectedBackground = cellCoreView.Background;

            return cellCoreView;
        }

        protected override void OnCellPropertyChanged(object sender, PropertyChangedEventArgs args)
        {
            base.OnCellPropertyChanged(sender, args);

            if (args.PropertyName == "IsSelected")
            {
                this.isSelected = !this.isSelected;

                if (this.isSelected)
                {
                    var extendedViewCell = sender as ExtendedViewCell;
                    this.cellCoreView.SetBackgroundColor(extendedViewCell.SelectedBackgroundColor.ToAndroid());
                }
                else
                {
                    this.cellCoreView.SetBackground(this.unSelectedBackground);
                }
            }
        }
    }
}

 

iOS 프로젝트로 가서 ExtendedViewCellRenderer 클래스를 추가합니다.

using Test.Extended;
using Test.iOS.ExtendedRenderer;
using UIKit;

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(ExtendedViewCell), typeof(ExtendedViewCellRenderer))]
namespace Test.iOS.ExtendedRenderer
{
    public class ExtendedViewCellRenderer : ViewCellRenderer
    {
        public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
        {
            var cell = base.GetCell(item, reusableCell, tv);
            var view = item as ExtendedViewCell;
            cell.SelectedBackgroundView = new UIView
            {
                BackgroundColor = view.SelectedBackgroundColor.ToUIColor(),
            };

            return cell;
        }
    }
}

사전 작업은 완료되었습니다.

 

이제 기본 코드에서 ExtendedViewCell 을 사용하도록 변경합니다. (굵게표시된부분)

        <ListView x:Name="extendedListView"
                  RowHeight="30"
                  SeparatorVisibility ="Default"
                  SeparatorColor="Black"
                  Margin="10"                  >
            <ListView.Header>
                <StackLayout Orientation="Horizontal"
                             VerticalOptions="CenterAndExpand"
                             Padding="0"
                             Spacing="0"
                             BackgroundColor="Gray"
                             HeightRequest="30">
                    <Label  Text="항목"
                            HorizontalOptions="CenterAndExpand"
                            VerticalOptions="Center"
                            TextColor="Black"
                            HorizontalTextAlignment="Center"
                            FontSize="12"
                            WidthRequest="80"/>
                    <Label  Text="데이터1"
                            HorizontalOptions="CenterAndExpand"
                            VerticalOptions="Center"
                            TextColor="Black"
                            HorizontalTextAlignment="Center"
                            WidthRequest="80"
                            FontSize="12"/>
                    <Label  Text="데이터2"
                            HorizontalOptions="CenterAndExpand"
                            VerticalOptions="Center"
                            TextColor="Black"
                            HorizontalTextAlignment="Center"
                            WidthRequest="80"
                            FontSize="12"/>
                </StackLayout>
            </ListView.Header>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <extended:ExtendedViewCell SelectedBackgroundColor="LightGray">
                        <ViewCell.View>
                            <StackLayout>
                                <StackLayout VerticalOptions="CenterAndExpand"
                                             Orientation="Horizontal"
                                             Padding="0"
                                             Spacing="0">
                                    <Label  Text="{Binding Content}"
                                            HorizontalOptions="CenterAndExpand"
                                            VerticalOptions="Center"
                                            TextColor="Black"
                                            HorizontalTextAlignment="Center"
                                            WidthRequest="80"
                                            FontSize="12"/>
                                    <Label  Text="{Binding Data1}"
                                            HorizontalOptions="CenterAndExpand"
                                            VerticalOptions="Center"
                                            TextColor="Black"
                                            HorizontalTextAlignment="Center"
                                            WidthRequest="80"
                                            FontSize="12"/>
                                    <Label  Text="{Binding Data2}"
                                            HorizontalOptions="CenterAndExpand"
                                            VerticalOptions="Center"
                                            TextColor="Black"
                                            HorizontalTextAlignment="Center"
                                            WidthRequest="80"
                                            FontSize="12"/>
                                </StackLayout>
                            </StackLayout>
                        </ViewCell.View>
                    </extended:ExtendedViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Selected Color 로 LightGray 를 설정한 결과는 아래과 같습니다.

완료!

사진 대지 보드판 기능 강화 버전입니다.

문의사항은 여기로 => https://cafe.naver.com/keisoft

 

메일을 보내주시면 구매하는 방법을 알려드리고 구매 후 등록 키를 보내드립니다.

아래 화면에서 ID 와 비밀번호를 입력합니다.

아래는 처음 실행화면입니다.

 

* 사용방법

1. 사진열기 버튼을 클릭하여 사진을 선택합니다.

2. 표만들기 버튼을 클릭하여 표를 작성합니다.

기본 5행 2열로 되어있습니다.

2-1. 오른쪽 + , - 버튼을 클릭하면 행을 늘리거나 줄일수 있습니다. (아래는 늘린 화면)

2-2. 내용입력시 Shift+Enter 를 동시에 누르면 줄이 나누어저 여러줄로 내용을 입력할 수 있습니다.

2-3. SAVE 버튼을 누르면 표데이터가 저장되어 다음에 표작성 시 저장된 데이터가 보여지게 됩니다.

 

3. 표작성화면에서 OK 버튼을 클릭하면 아래 처럼 사진과 합쳐질 표이미지가 우측에 표시됩니다.

   만들기 버튼을 클릭하면 사진과 표가 합성되고 파일이 만들어집니다.

   만들어진 파일은 아래 처럼 화면에 나타납니다.

 

4. 만약 표가 너무 작다면 숫자를 입력하여 만들기하면 표가 배수만큼 커집니다.

 

5. 아래는 만들기가 완료된 사진입니다.

6. 표 위치는 죄상, 좌하, 우상, 우하 위치로 옮길수 있습니다.

기능 강화 버전은 추후 기능이 더 추가될 예정입니다.

 - 폴더의 사진에 모두 일괄 적용 기능 추가 예정

 

프로그램 문의 junijuniya@naver.com

  1. 2018.11.23 20:56

    비밀댓글입니다

  2. Favicon of https://iotvrar.tistory.com PolarisEcho 2019.01.28 02:29 신고

    나는 공짜로 안될까

xaml 을 디자인 하기란 어려운게 사실입니다.

특히나 힘든건 디자인한 화면을 꼭 빌드해서 봐야 할때입니다.

비쥬얼스튜디오 내에서 제공해 주는 디자인(Forms Previewer)은 정말 오류가 많이 납니다.

거의 보여주는걸 본적이 별로 없는...;

(도대체 언제 보여줄꺼니 ㅜㅠ 10분이 지남;;)

하지만 좋은점은 CustomRenderer 를 적용한 디자인도 무리없이 보여줍니다. (보여줄때는..)

고릴라 플레이어를 사용하는 사람들이 있어 써보았는데

코딩하는데로  빠르게 표현을 잘해서 이걸써야겠다 생각했는데....

CustomRenderer 가 있으면 표현을 하지 못합니다. ㅜㅠ

 

그런데 자마린 카페에서 LiveXAML  을 알게 되었고 깔아서 해봤는데

정말 신세계네요^^ (단, 유료입니다. ㅜㅠ)

 

경험한 신세계를 소개합니다.

1. 사이트로 가서 다운 설치파일을 다운로드 받고 설치합니다.

   웹사이트 : http://www.livexaml.com/

   다운로드 링크 : https://marketplace.visualstudio.com/items?itemName=ionoy.XamarinFormsLive-18843

   설치 완료후 비쥬얼 스튜디오를 실행하면 아래와 같은 화면이 뜹니다. (15일은 경험할수 있군요^^;)

 

2. 솔루션을 열고 솔루션 NuGet Package 관리에서 LiveXAML 을 검색 후 설치합니다.

 

3. Debug 모드로 핸드폰이나 애뮬레이터로 실행합니다.

  이 상태에서 xaml 파일을 열어서 수정을 하면 바로 고쳐져서 보이는걸 확인 할수 있습니다.

  정말 좋은건 애뮬에선 괜찮아서 막상 폰에 배포하면 먼가 안맞을 때가 많은데

  디자인을 보면서 수정을 할수 있어서 기기에 어떻게 표현되는지 바로 확인이 가능한 것입니다.

  

가격정책.. 일단 구독을 해봐야할까요.ㅜㅠ 아.. 정말 편하네요^^

MS 야 이것도 어떻게 안되겠니...ㅋ

 

 

+ Recent posts

티스토리 툴바