Home > Blockchain >  Xamarin Forms: How to add a border around a ListView?
Xamarin Forms: How to add a border around a ListView?

Time:09-17

I'm trying to add a 1px border around the standard ListView component that ships with Xamarin.Forms and BorderColor property does not appear to exist.

How do I achieve this?

CodePudding user response:

You can have the frame act as your border by using padding. Just remember to turn shadows off.

<Frame BackgroundColor="Black" Padding="1" CornerRadius="0" HasShadow="False">
        <!-- Your ListView here... make sure to set a BackgroundColor -->
</Frame>

CodePudding user response:

You could use a BoxView as well. And use the RowHeight property to set the HeightRequest property to remove the empty space in the bottom of listview.

Xaml:

   <Grid Padding="5">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <BoxView BackgroundColor="Green" HeightRequest="5"></BoxView>

        <ListView x:Name="listview" BackgroundColor="White" RowHeight="40" ItemsSource="{Binding Names}" Margin="5" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Label Text="{Binding Name}"></Label>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>

Code behind:

 public partial class Page5 : ContentPage
{
    public ObservableCollection<Info> Names { get; set; }
    public Page5()
    {
        InitializeComponent();
        Names = new ObservableCollection<Info>()
        {
            new Info(){ Name="A"},
            new Info(){ Name="B"},
            new Info(){ Name="C"},
            new Info(){ Name="D"},
            new Info(){ Name="E"},
            new Info(){ Name="F"},
            new Info(){ Name="G"},
        };
        listview.HeightRequest = listview.RowHeight * Names.Count;
        this.BindingContext = this;
    }
}
public class Info
{
    public string Name { get; set; }
}

enter image description here

  • Related