我创建了一个带有DataTemplateSelector的GroupedListview,以使listview的视单元格上具有不同的边距,现在我需要的是隐藏每个listview的内容,并且当用户点击该组时,该组将展开并显示内容
这是我的项目文件:
<ContentPage.BindingContext>
<viewModels:ProductsViewModel></viewModels:ProductsViewModel>
</ContentPage.BindingContext>
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="evenTemplate">
<ViewCell>
<customRenders1:GridConf Margin="0,0,0,0" HorizontalOptions="FillAndExpand" ColumnSpacing="0" RowSpacing="0" ConfigurationItem ="{Binding .}">
<customRenders1:GridConf.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</customRenders1:GridConf.ColumnDefinitions>
<customRenders1:GridConf.RowDefinitions>
<RowDefinition Height="*"/>
</customRenders1:GridConf.RowDefinitions>
<BoxView VerticalOptions="CenterAndExpand" HeightRequest="50" Grid.ColumnSpan="1" Margin="-30,0,0,0" Grid.Column="1" HorizontalOptions="FillAndExpand" BackgroundColor="LightGray"/>
<Label VerticalOptions="CenterAndExpand" Margin="10,0,0,0" Grid.Column="1" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand" Text="Good books"></Label>
<Image Grid.Column="1" Source="HidePass.png" HeightRequest="30" VerticalOptions="CenterAndExpand" HorizontalOptions="End">
<Image.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" ></TapGestureRecognizer>
</Image.GestureRecognizers>
</Image>
<customRenders1:CachedImageItem Grid.Column="0" ConfigurationItem ="{Binding .}" HorizontalOptions="Start" HeightRequest="80" VerticalOptions="Center" x:Name="Image2" Source="teste.png"/>
<customRenders1:GridConf.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1"></TapGestureRecognizer>
</customRenders1:GridConf.GestureRecognizers>
</customRenders1:GridConf>
</ViewCell>
</DataTemplate>
<DataTemplate x:Key="unevenTemplate">
<ViewCell>
<customRenders1:GridConf Margin="20,0,0,0" HorizontalOptions="FillAndExpand" ColumnSpacing="0" RowSpacing="0" ConfigurationItem ="{Binding .}">
<customRenders1:GridConf.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</customRenders1:GridConf.ColumnDefinitions>
<customRenders1:GridConf.RowDefinitions>
<RowDefinition Height="*"/>
</customRenders1:GridConf.RowDefinitions>
<BoxView VerticalOptions="CenterAndExpand" HeightRequest="50" Margin="-30,0,0,0" Grid.Column="1" HorizontalOptions="FillAndExpand" BackgroundColor="LightGray"/>
<Label VerticalOptions="CenterAndExpand" Margin="10,0,0,0" Grid.Column="1" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand" Text="Good books"></Label>
<Image Grid.Column="1" Source="HidePass.png" HeightRequest="30" VerticalOptions="CenterAndExpand" HorizontalOptions="End">
<Image.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" ></TapGestureRecognizer>
</Image.GestureRecognizers>
</Image>
<customRenders1:CachedImageItem Grid.Column="0" ConfigurationItem ="{Binding .}" HorizontalOptions="Start" HeightRequest="80" VerticalOptions="Center" x:Name="Image2" Source="teste.png"/>
<customRenders1:GridConf.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" ></TapGestureRecognizer>
</customRenders1:GridConf.GestureRecognizers>
</customRenders1:GridConf>
</ViewCell>
</DataTemplate>
<customRenders1:AlternateColorDataTemplateSelector2 x:Key="alternateColorDataTemplateSelector"
EvenTemplate="{StaticResource evenTemplate}"
UnevenTemplate="{StaticResource unevenTemplate}" />
</ResourceDictionary>
</ContentPage.Resources>
<ListView x:Name="lst" IsGroupingEnabled="True" ItemTemplate="{StaticResource alternateColorDataTemplateSelector}" ItemsSource="{Binding Item}" Margin="0,0,0,0" HasUnevenRows="True" SeparatorVisibility="None">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<customRenders:NativeCell>
<customRenders:NativeCell.View>
<!--left, top, right, bottom-->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="1"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Orientation="Horizontal" HeightRequest="60" >
<Label Margin="10,0,0,0" HorizontalTextAlignment="Start" FontSize="Medium" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center" TextColor="#014269" Text="{Binding Key}" VerticalOptions="CenterAndExpand">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="OpenSans-Semibold"/>
<On Platform="Android" Value="calibrib.ttf#Calibri-Bold"/>
</OnPlatform>
</Label.FontFamily>
</Label>
</StackLayout>
<BoxView Grid.Row="1" Color="#91b7df" HeightRequest="1" HorizontalOptions="FillAndExpand"></BoxView>
</Grid>
</customRenders:NativeCell.View>
</customRenders:NativeCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
</ListView>
ViewModel:
public class ProductsViewModel: BindableBase
{
public ObservableCollection<Product> Productitems { get; set; }
public ObservableCollection<Grouping<string, Product>> Item { get; set; }
public ProductsViewModel()
{
Productitems = new ObservableCollection<Product>
{
new Product
{
Img = "Product.png",
Url = "Teste",
Category = "Service",
Title = "sdsadsadsdsdsa"
},
new Product
{
Img = "Product.png",
Url = "Teste3",
Category = "Service",
Title = "sdsadsadsdsdsatest2"
},
new Product
{
Img = "Product.png",
Url = "Teste2",
Category = "School",
Title = "sdsadsadsdsdsar"
},
new Product
{
Img = "Product.png",
Url = "Teste4",
Category = "Farmacy",
Title = "sdsadsadsdsdsa"
},
new Product
{
Img = "Product.png",
Url = "Teste7",
Category = "Farmacy",
Title = "sdsadsadsdsdsa"
},
new Product
{
Img = "Product.png",
Url = "Teste7",
Category = "Farmacy",
Title = "sdsadsadsdsdsaF2"
},
new Product
{
Img = "Product.png",
Url = "Teste9",
Category = "School",
Title = "sdsadsadsdsdsaes2"
}
};
var sorted = from Products in Productitems
group Products by Products.Category into ProductsGroup
select new Grouping<string, Models.Product>(ProductsGroup.Key, ProductsGroup);
Item = new ObservableCollection<Grouping<string, Models.Product>>(sorted);
}
}
DataTemplateSelector:
public class AlternateColorDataTemplateSelector2 : DataTemplateSelector
{
public DataTemplate EvenTemplate { get; set; }
public DataTemplate UnevenTemplate { get; set; }
private List<Product> flatList;
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
// TODO: Maybe some more error handling here
if (flatList == null)
{
var groupedList = (ObservableCollection<Grouping<string, Product>>)((ListView)container).ItemsSource;
flatList = groupedList.SelectMany(group => group).ToList();
}
return flatList.IndexOf(item as Product) % 2 == 0 ? EvenTemplate : UnevenTemplate;
}
}