首页 > 解决方案 > Xamarin Forms ListView Header Sticky for non-grouping

问题描述

我搜索并发现 ListView 的 Sticky Header 带有分组。是否有用于非分组列表视图的带有粘性标题的示例列表视图?有人可以给我建议吗?目前我已经完成如下所示。

<ListView.Header>
<Grid BackgroundColor="Gray" ColumnSpacing="0" RowSpacing="0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"></ColumnDefinition>
        <ColumnDefinition Width="1*"></ColumnDefinition>
        <ColumnDefinition Width="1*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Label Text="Column 1" Grid.Column="0" Grid.Row="0" />
    <Label Text="Column 2" Grid.Column="1" Grid.Row="0"/>
    <Label Text="Column 3" Grid.Column="2" Grid.Row="0"/>
</Grid> </ListView.Header>

<ListView.ItemTemplate>
<DataTemplate>
    <ViewCell>
        <Grid >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="1*"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <StackLayout Grid.Column="0" Orientation="Vertical" HorizontalOptions="StartAndExpand" VerticalOptions="Center">
                <Label Text ="{Binding Item1}" ></Label>
                <Label Text ="{Binding Item2}" ></Label>
                <Label Text ="{Binding Item3}" ></Label>
            </StackLayout>
            <Label Grid.Column="1" Text ="{Binding Item4}" ></Label>
            <Label Grid.Column="2" Text ="{Binding Item5}" ></Label>

        </Grid>
    </ViewCell>
</DataTemplate>

标签: listviewxamarin.forms

解决方案


你想在不使用分组的情况下实现标题吗?只需将鼠标悬停在这样的 GIF 列表视图上?

在此处输入图像描述

如果是这样,您可以将 ListView.Header 中的代码移动到列表视图之外,就像这段代码一样

<StackLayout>

    <Grid BackgroundColor="Gray" ColumnSpacing="0" RowSpacing="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Label Text="Column 1" Grid.Column="0" Grid.Row="0" />
        <Label Text="Column 2" Grid.Column="1" Grid.Row="0"/>
        <Label Text="Column 3" Grid.Column="2" Grid.Row="0"/>
    </Grid>

    <ListView  ItemsSource="{Binding DataList}">
       <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*"></ColumnDefinition>
                            <ColumnDefinition Width="1*"></ColumnDefinition>
                            <ColumnDefinition Width="1*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>

                        <StackLayout Grid.Column="0" Orientation="Vertical" HorizontalOptions="StartAndExpand" VerticalOptions="Center">
                            <Label Text ="{Binding Data.Name}" ></Label>
                            <Label Text ="{Binding Data.Name}" ></Label>
                            <Label Text ="{Binding Data.Name}" ></Label>
                        </StackLayout>
                        <Label Grid.Column="1" Text ="{Binding Data.Description}" ></Label>
                        <Label Grid.Column="2" Text ="{Binding Data.Description}" ></Label>

                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>


推荐阅读