分组的Listview可展开

时间:2018-08-03 10:13:39

标签: c# listview xamarin.forms expandablelistview

我创建了一个带有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;
}

}

0 个答案:

没有答案