SfListView作为SelectedItemTemplate和HeaderTemplate属性,您可以使用您需要为所选项目单独的模板,并且需要上面的标题SfListView。
但是,如果您需要在 Tap 上更改颜色并为第一个项目单独模板。
对于第一个项目模板
- 在列表项的模型中添加索引属性。
- 使用模板选择器中的 index 属性来决定模板
Xaml
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:FirstItem"
mc:Ignorable="d" x:Class="FirstItem.MainPage">
<ContentPage.Resources>
<local:ColorConverter x:Key="colorConverter"/>
<DataTemplate x:Key="defaultTemplate">
<ViewCell>
<Frame x:Name="frame"
BackgroundColor="{Binding IsActive, Converter={StaticResource colorConverter}, ConverterParameter=Frame}"
BorderColor="#D9DADB">
<Frame.GestureRecognizers>
<TapGestureRecognizer
Tapped="TapGestureRecognizer_Tapped"/>
</Frame.GestureRecognizers>
<StackLayout>
<Label
Text="{Binding Name}"
BackgroundColor="{Binding IsActive, Converter={StaticResource colorConverter}, ConverterParameter=Label}"/>
</StackLayout>
</Frame>
</ViewCell>
</DataTemplate>
<DataTemplate x:Key="firstTemplate">
<ViewCell>
<Label
FontSize="32"
Text="I'm Header"/>
</ViewCell>
</DataTemplate>
</ContentPage.Resources>
<StackLayout>
<ListView
x:Name="listView">
<ListView.ItemTemplate>
<local:ListTemplateSelector
DefaultTemplate="{StaticResource defaultTemplate}"
FirstTemplate="{StaticResource firstTemplate}"/>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
模板选择器
public class ListTemplateSelector : DataTemplateSelector
{
public DataTemplate FirstTemplate { get; set; }
public DataTemplate DefaultTemplate { get; set; }
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
if(item != null)
{
ListItem listItem = (item as ListItem);
if (listItem.Index == 0)
{
return FirstTemplate;
}
}
return DefaultTemplate;
}
}
填充 ListView
listView.ItemsSource = new List<ListItem>()
{
new ListItem(){Index=0, Name="Zero"},
new ListItem(){Index=1, Name="One"},
new ListItem(){Index=2, Name="Two"},
new ListItem(){Index=3, Name="Three"},
new ListItem(){Index=4, Name="Four"},
new ListItem(){Index=5, Name="Five"},
new ListItem(){Index=6, Name="Six"},
new ListItem(){Index=7, Name="Seven"}
};
ListView 项目模型 (ListItem.cs)
public class ListItem : INotifyPropertyChanged
{
private bool isActive;
public bool IsActive
{
get
{
return isActive;
}
set
{
isActive = value;
OnPropertyChanged();
}
}
private int index;
public int Index
{
get
{
return index;
}
set
{
index = value;
OnPropertyChanged();
}
}
private string name;
public string Name
{
get
{
return name;
}
set
{
name = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
用于在水龙头上更改颜色
- 为项目布局设置点击手势
- 将 Item 的 IsActive 属性设置为 true
- 使用转换器中的 IsActive 属性更改为所需的颜色。
点击手势:
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
((sender as Frame).BindingContext as ListItem).IsActive = !(((sender as Frame).BindingContext as ListItem).IsActive);
}
颜色转换器:
public class ColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
string sender = (string)parameter;
if ((bool)value)
{
return sender == "Frame" ? Color.Lime : Color.Red;
}
return Color.White;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}