ListView 에서 선택한 셀에 대한 색상을 변경하는 방법입니다.
아래는 기본 적인 ListView 코드입니다.
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 클래스를 추가합니다.
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.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.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 을 사용하도록 변경합니다. (굵게표시된부분)
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 를 설정한 결과는 아래과 같습니다.
완료!