xamarin.formsbox-view-api

How to separate two elements within a grid, with a BoxView?


I have a ListView that contains a grid with some Labels, I want to put a separating line between two labales, but in doing so I have to indicate to the BoxView in what row of the grid it should go, and in doing so, the BoxView covers the entire size of the grid. line, is there any way that only a thin line is drawn and not the thick blue line?

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:abstractions="clr-namespace:RoundedBoxView.Forms.Plugin.Abstractions;assembly=RoundedBoxView.Forms.Plugin.Abstractions"
             x:Class="FortiaApp.Views.frmMovimientos">
    <ContentPage.Content>
        <StackLayout
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand">
            <Image x:Name="imgFortia" Source="fortia" HeightRequest="40"></Image>
            <AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" Source="Fondo1" Aspect="AspectFill"></Image>
                <ScrollView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
                    <ListView 
                            BackgroundColor="Transparent"
                            HasUnevenRows="True"
                            x:Name="lsvTabla"
                            SeparatorVisibility="None"
                                  >
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <Frame Padding="2" Margin="7,10,7,10" HeightRequest="100">
                                        <StackLayout>
                                            <Grid
                                                BackgroundColor="Transparent"
                                                >
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="*"/>
                                                    <ColumnDefinition Width="Auto"/>
                                                </Grid.ColumnDefinitions>

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

                                                <Label
                                                    Grid.Row="0"
                                                    Grid.Column="0"
                                                    TextColor="#969696"
                                                    FontAttributes="Bold"
                                                    HorizontalOptions="Center"
                                                    Text="{Binding Comercio}"
                                                    />

                                                <Label
                                                    Grid.Row="1"
                                                    Grid.Column="0"
                                                    Grid.ColumnSpan="2"
                                                    Grid.RowSpan="3"
                                                    TextColor="#969696"
                                                    FontAttributes="Bold"
                                                    HorizontalOptions="Center"
                                                    Text="{Binding DescripcionImporte}"
                                                    />

                                                <Label
                                                    Grid.Row="0"
                                                    Grid.Column="1"
                                                    TextColor="#969696"
                                                    FontAttributes="Bold"
                                                    HorizontalOptions="Center"
                                                    Text="{Binding CodigoAutorizacion}"
                                                    />

                                                <Label
                                                    Grid.Row="1"
                                                    Grid.Column="1"
                                                    TextColor="#969696"
                                                    FontSize="Large"
                                                    HorizontalOptions="Center"
                                                    Text="{Binding Importe}"
                                                    />

                                                <BoxView BackgroundColor="blue"  HorizontalOptions="Fill" Grid.Row="3" Grid.ColumnSpan="2" HeightRequest="1"/>

                                                <Label
                                                    Grid.Row="4"
                                                    Grid.Column="1"
                                                    TextColor="#005a9f"
                                                    FontSize="Small"
                                                    HorizontalOptions="Center"
                                                    Text="{Binding Fecha}"
                                                    />

                                            </Grid>
                                        </StackLayout>
                                    </Frame>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </ScrollView>
            </AbsoluteLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

enter image description here

I need it to be a very thin line, but a rectangle is too wide, please, I hope someone can help me


Solution

  • <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
    
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="5"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
    
        <Label Grid.Row="0" Grid.Column="0" />
        <Label Grid.Row="0" Grid.Column="1" />
        <Label Grid.Row="1" Grid.Column="1" />      
        <BoxView Grid.Row="2" Grid.Columnspan="2" 
            HorizontalOptions="FillAndExpand" VerticallOptions="FillAndExpand" />
        <Label Grid.Row="3" Grid.Column="1" />
    </Grid>