user8564782
user8564782

Reputation:

set border to listview Xamarin form

I made a table with xamarin forms, but I would like the headers not to have blank spaces and also put borders, use table-striped, have the basic characteristics of a bootstrap table for example. Could you help me?. Thank you for you help.

enter image description here

Here my code.

 <StackLayout BindingContext="{Binding OpportunityListViewModel}" Padding="8">
        <ListView x:Name="ProposalListProduct"
                ItemsSource="{Binding ProposalView}"
                IsRefreshing="{Binding IsRefreshing}"
                CachingStrategy="RecycleElement"
                HasUnevenRows="True"
                 Margin="0">
            <ListView.Header>
                <Grid Margin="0" Padding="0" RowSpacing="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50*" />
                        <ColumnDefinition Width="10*" />
                        <ColumnDefinition Width="20*" />
                        <ColumnDefinition Width="20*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="20" />
                    </Grid.RowDefinitions>
                    <Label Grid.Row="0" Grid.Column="0" Margin="0" Text="Item" FontSize="8" TextColor="Black" BackgroundColor="LightGray" HorizontalTextAlignment="Center" HorizontalOptions="Fill" />
                    <Label Grid.Row="0" Grid.Column="1" Margin="0" Text="Cant."  FontSize="8" TextColor="Black" BackgroundColor="LightGray" HorizontalTextAlignment="Center" HorizontalOptions="Fill" />
                    <Label Grid.Row="0" Grid.Column="2" Margin="0" Text="Precio"  FontSize="8" TextColor="Black" BackgroundColor="LightGray" HorizontalTextAlignment="Center" HorizontalOptions="Fill" />
                    <Label Grid.Row="0" Grid.Column="3" Margin="0" Text="Total"  FontSize="8" TextColor="Black" BackgroundColor="LightGray" HorizontalTextAlignment="Center" HorizontalOptions="Fill" />

                </Grid>
            </ListView.Header>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ViewCell.View>
                            <Grid Margin="0" Padding="0" RowSpacing="0" ColumnSpacing="0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="50*" />
                                    <ColumnDefinition Width="10*" />
                                    <ColumnDefinition Width="20*" />
                                    <ColumnDefinition Width="20*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="20"  />
                                </Grid.RowDefinitions>
                                <Label Grid.Column="0" Margin="0" x:Name="Nombre" Text="{Binding Nombre}" FontSize="8" TextColor="Black" VerticalTextAlignment="End" HorizontalTextAlignment="Start" />
                                <Label Grid.Column="1" Margin="0" x:Name="Cantidad" Text="{Binding Cantidad}" FontSize="8" TextColor="Black" VerticalTextAlignment="End" HorizontalTextAlignment="End"/>
                                <Label Grid.Column="2" Margin="0" x:Name="Precio" Text="{Binding Precio,StringFormat='{0:C2}'}" FontSize="8" TextColor="Black" VerticalTextAlignment="End" HorizontalTextAlignment="End"/>
                                <Label Grid.Column="3" Margin="0" x:Name="Total" Text="{Binding Total,StringFormat='{0:C2}'}" FontSize="8" TextColor="Black" VerticalTextAlignment="End" HorizontalTextAlignment="End"/>
                            </Grid>
                        </ViewCell.View>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

Upvotes: 2

Views: 6302

Answers (1)

Dom
Dom

Reputation: 569

you can do it like this:

<ListView ItemsSource="{Binding People}"
              HasUnevenRows="True"
              SeparatorVisibility="None">

        <ListView.Header>
            <Frame>
                <Grid>

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

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>

                    <Label Text="Name"
                           HorizontalOptions="Center"
                           FontSize="Large"/>
                    <Label Grid.Column="1"
                       Text="Description"
                           HorizontalOptions="Center"
                           FontSize="Large"/>

                    <BoxView Grid.Row="1"
                             Grid.ColumnSpan="2"
                             HeightRequest="1"
                             BackgroundColor="LightGray"/>
                </Grid>
            </Frame>
        </ListView.Header>

        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Margin="20,10">

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

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>

                        <Label Text="{Binding Name}"
                               HorizontalOptions="Center"
                               VerticalOptions="Center"/>
                        <Label Grid.Column="1"
                               Text="{Binding Description}"
                               HorizontalOptions="Center"
                               VerticalOptions="Center"/>

                        <BoxView Grid.Row="1"
                             Grid.ColumnSpan="2"
                             HeightRequest="1"
                             BackgroundColor="LightGray"/>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

enter image description here

Upvotes: 2

Related Questions