Xamarin表格创建表

时间：2019-06-19 16:57:25

标签： xamarin xamarin.forms

我需要使用xamarin表单中的列表视图创建一个表。我能够创建具有五列的列表视图。但是我无法为列和行提供标题。如果有人知道如何创建带有标题的表结构，请帮助我。预先感谢。

这是我的表[Header and Listview]的源代码

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

    <StackLayout Grid.Row="0" Padding="40,10,10,40" Spacing="0">
        <BoxView HeightRequest="1" BackgroundColor="Black"></BoxView>
        <StackLayout Orientation="Horizontal" Spacing="40">
            <BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
            <StackLayout Orientation="Horizontal" Spacing="1" HorizontalOptions="StartAndExpand">
                <controls:CheckBox></controls:CheckBox>
                <Label Text="Select All" FontAttributes="Bold" HorizontalOptions="Center" VerticalOptions="Center"></Label>
            </StackLayout>
            <BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
            <StackLayout Orientation="Horizontal" Spacing="1" HorizontalOptions="StartAndExpand">
                <Label Text="Last Name, First Name" HorizontalOptions="Center" VerticalOptions="Center" FontAttributes="Bold"></Label>
                <Button Text=">" HeightRequest="5" WidthRequest="5"></Button>
            </StackLayout>
            <BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
            <Label Text="Child ID" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
            <BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
            <Label Text="Date of Birth" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
            <BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
            <Label Text="Location" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
            <BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
            <Label Text="Enrollment" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
            <BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
            <Label Text="Actions" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
            <BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
        </StackLayout>
        <BoxView HeightRequest="1" BackgroundColor="Black"></BoxView>
    </StackLayout>
    <StackLayout Padding="40,10,10,40" HeightRequest="200" Grid.Row="1" Spacing="0">
    <ListView  ItemsSource="{Binding ChildRecords}" HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.View>
                        <StackLayout>
                                <!-- <BoxView HeightRequest="1" BackgroundColor="Black"></BoxView>-->
                                <StackLayout Orientation="Horizontal">
                                <BoxView WidthRequest="1" HeightRequest="15" BackgroundColor="Black" HorizontalOptions="Start" />
                                <StackLayout Orientation="Horizontal" Spacing="1" HorizontalOptions="StartAndExpand">

                                    <Label Text="Select All" FontAttributes="Bold" HorizontalOptions="Center" VerticalOptions="Center"></Label>
                                </StackLayout>
                                <BoxView WidthRequest="1" HeightRequest="15" BackgroundColor="Black" HorizontalOptions="Start"  />
                                <StackLayout Orientation="Horizontal" Spacing="1" HorizontalOptions="StartAndExpand">
                                    <Label Text="Last Name, First Name" HorizontalOptions="Center" VerticalOptions="Center" FontAttributes="Bold"></Label>
                                    <Button Text=">" HeightRequest="5" WidthRequest="5"></Button>
                                </StackLayout>
                                <BoxView WidthRequest="1"  BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
                                <Label Text="Child ID" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
                                <BoxView WidthRequest="1"  BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
                                <Label Text="Date of Birth" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
                                <BoxView WidthRequest="1"  BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
                                <Label Text="Location" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
                                <BoxView WidthRequest="1"  BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
                                <Label Text="Enrollment" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
                                <BoxView WidthRequest="1"  BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
                                <Label Text="Actions" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
                                <BoxView WidthRequest="1"  BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15"/>
                            </StackLayout>
                            <BoxView HeightRequest="1" BackgroundColor="Black"></BoxView>
                        </StackLayout>
                    </ViewCell.View>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    </StackLayout>
</Grid>

4 个答案:

答案 0 :(得分：1)

如果您想要快速/专业的外观，可以尝试Xamarin的Synfucion DataGrid自定义控件。如果您的公司收入少于一百万，则可以免费使用它们。

答案 1 :(得分：1)

通常，我想做的是在ListView上方为标题创建一个Grid，然后在ListView中创建包含具有相同列宽的Grid的ViewCell。

例如：

<Grid HorizontalOptions="FillAndExpand" VerticalOptions="Start" RowSpacing="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="20" />
        </Grid.RowDefinitions>
        <Label Grid.Column="0" Text="Heading 1" />
        <Label Grid.Column="1" Text="Heading 2" />
        <Label Grid.Column="2" Text="Heading 3" />
    </Grid>
    <ListView ItemsSource="{}" HasUnevenRows="true" HeightRequest="200" SeparatorVisibility="None">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.View>
                        <Grid Margin="0" Padding="0" RowSpacing="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0" Margin="0" Text="{Binding data1}" />
                            <Label Grid.Column="1" Margin="0" Text="{Binding data2}" />
                            <Label Grid.Column="2" Margin="0" Text="{Binding data3}" />
                        </Grid>
                    </ViewCell.View>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

还请注意，ListView带有标头，如果您希望标头与ListView中的项目一起滚动，则这很有用。请查看以下文档：Customizing ListView Appearance

答案 2 :(得分：0)

您可以使用Grid来使网格的第一行作为标题，您可以轻松地仅更改标题的样式。这是您创建3行两列的示例

<Grid>  
<Grid.RowDefinitions>  
    <RowDefinition Height="*" />  
    <RowDefinition Height="*" />  
    <RowDefinition Height="*" /> 
</Grid.RowDefinitions>  
<Grid.ColumnDefinitions>  
    <ColumnDefinition Width="*" />  
    <ColumnDefinition Width="*" /> 
</Grid.ColumnDefinitions>  
</Grid>

答案 3 :(得分：0)

<ContentPage.Content>
    <ScrollView VerticalOptions="Fill" HorizontalOptions="Fill">
    <Grid HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" RowSpacing="0" >

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="20" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Label Grid.Column="0" Text="Entry Name" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold"/>
        <Label Grid.Column="1" Text="Entry Date" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
        <Label Grid.Column="2" Text="Enty Type" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
        <Label Grid.Column="3" Text="Transaction Type"  BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold"/>
        <Label Grid.Column="4" Text="Cashflow " BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
        <Label Grid.Column="5" Text="Particular" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
        <Label Grid.Column="6" Text="VoucherNumber" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
        <Label Grid.Column="7" Text="LedgerFolio" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
        <Label Grid.Column="8" Text="Amount" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
        <Label Grid.Column="9" Text="PurchaseInvoice" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
        <Label Grid.Column="10" Text="Credit Or Debit" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold"/>



        <ListView x:Name="ContentListview" HasUnevenRows="true" HeightRequest="200" SeparatorVisibility="None" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="11" HorizontalScrollBarVisibility="Default" VerticalScrollBarVisibility="Default">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ViewCell.View>
                            <Grid Margin="0" Padding="0" RowSpacing="0">

                                <Label Grid.Column="0" Text="{Binding EntryName}"  TextColor="Black" />
                                <Label Grid.Column="1" Text="{Binding EntryDate}"  TextColor="Black"  />
                                <Label Grid.Column="2" Text="{Binding EntyType}"  TextColor="Black"  />
                                <Label Grid.Column="3" Text="{Binding TransactionType}"   TextColor="Black" />
                                <Label Grid.Column="4" Text="{Binding Cashflow}"  TextColor="Black"  />
                                <Label Grid.Column="5" Text="{Binding Particular}"  TextColor="Black"  />
                                <Label Grid.Column="6" Text="{Binding VoucherNumber}"  TextColor="Black"  />
                                <Label Grid.Column="7" Text="{Binding LedgerFolio}"  TextColor="Black"  />
                                <Label Grid.Column="8" Text="{Binding Amount}"  TextColor="Black"  />
                                <Label Grid.Column="9" Text="{Binding PurchaseInvoice}"  TextColor="Black"  />
                                <Label Grid.Column="10" Text="{Binding CreditOrDebit}"  TextColor="Black" />
                            </Grid>
                        </ViewCell.View>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>


    </Grid>
    </ScrollView>
</ContentPage.Content>

这就是我所做的，下图是其结果。Xamarin form result。抱歉，无法在后面显示我的代码。

相关问题
最新问题