Shifting after deleting

Eduardo Gomez 3,426 Reputation points
2022-09-15T21:43:40.177+00:00

I have a listview with a swipe item to delete

     <ListView  
            x:Name="CarsList"  
            Grid.Row="1"  
            HasUnevenRows="True"  
            ItemsSource="{Binding Cars}"  
            SelectionMode="None"  
            SeparatorVisibility="Default">  
            <ListView.ItemTemplate>  
                <DataTemplate>  
                    <ViewCell>  
                        <SwipeView>  
                            <SwipeView.RightItems>  
                                <SwipeItems Mode="Execute">  
                                    <SwipeItem BackgroundColor="Red"  
                                               Command="{Binding Source={x:Reference ListPage}, Path=BindingContext.DeleteCommand}"  
                                               CommandParameter="{Binding .}"  
                                               Text="Delete" />  
                                </SwipeItems>  
                            </SwipeView.RightItems>  
                            <local:CarView  
                                Padding="0,10,0,0"  
                                xct:TouchEffect.Command="{Binding Source={x:Reference ListPage}, Path=BindingContext.PressedCommand}"  
                                xct:TouchEffect.CommandParameter="{Binding .}"  
                                xct:TouchEffect.LongPressCommand="{Binding Source={x:Reference ListPage}, Path=BindingContext.LongPressedCommand}"  
                                xct:TouchEffect.LongPressCommandParameter="{Binding .}" />  
                        </SwipeView>  
                    </ViewCell>  
                </DataTemplate>  
            </ListView.ItemTemplate>  
        </ListView>  
    </ContentPage.Content>  

public SampleViewModel()  
    {  
        DeleteCommand = new Command<Car>(DeleteAction);  
        LongPressedCommand = new Command<Car>(LongPressedAction);  
        PressedCommand = new Command<Car>(PressAction);  
        GridSpan = Device.Idiom == TargetIdiom.Phone ? 1 : 2;  
        BuildCars();  
    }  
  
    private void DeleteAction(Car obj)  
    {  
        Cars.Remove(obj);  
    }  
  
    private void PressAction(Car obj)  
    {  
        if (obj != null && obj.Make == CarMake.Mercedes)  
        {  
            Debug.WriteLine("Mercedes");  
        }  
    }  
  
    private void LongPressedAction(Car obj)  
    {  
        Application.Current.MainPage.DisplayAlert("Warning", "do you want to delete?", "OK");  
    }  
  
  
    private int _gridSpan;  
  
    public int GridSpan  
    {  
        get => _gridSpan;  
        set => SetProperty(ref _gridSpan, value);  
    }  
  
    private void BuildCars()  
    {  
        Cars = new ObservableCollection<Car>  
        {  
            new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Notes = "test car", Description = "Some description", Color = Color.Black },  
            new Car { Abbreviation = "BMW", Make=CarMake.BMW, Name = "X5", Description = string.Concat(Enumerable.Repeat($"Some description {Environment.NewLine}", 10)), Color = Color.Purple },  
            new Car { Abbreviation = "M", Make=CarMake.Mercedes, Name = "AMG C Class", Description = string.Concat(Enumerable.Repeat($"Some description {Environment.NewLine}", 5)), Color = Color.CornflowerBlue},  
            new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = "Some description", Color = Color.Brown },  
            new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = string.Concat(Enumerable.Repeat($"Some description {Environment.NewLine}", 3)), Color = Color.Orange },  
            new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = "Some description", Color = Color.DarkBlue },  
            new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = string.Concat(Enumerable.Repeat($"Some description {Environment.NewLine}", 7)), Color = Color.DarkOrange },  
            new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = "Some description", Color = Color.OrangeRed },  
            new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = string.Concat(Enumerable.Repeat($"Some description {Environment.NewLine}", 4)), Color = Color.Violet},  
            new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = string.Concat(Enumerable.Repeat($"Some description {Environment.NewLine}", 2)), Color = Color.DarkSalmon },  
            new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = "Some description", Color = Color.Green },  
            new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = string.Concat(Enumerable.Repeat($"Some description {Environment.NewLine}", 6)), Color = Color.GreenYellow},  
            new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = string.Concat(Enumerable.Repeat($"Some description {Environment.NewLine}", 3)), Color = Color.LawnGreen},  
            new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = "Some description", Color = Color.SkyBlue },  
            new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = string.Concat(Enumerable.Repeat($"Some description {Environment.NewLine}", 5)), Color = Color.LightCyan },  
            new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = "Some description", Color = Color.PaleTurquoise },  
            new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = "Some description", Color = Color.Purple },  
  
        };  
    }  
  
    private ObservableCollection<Car> _cars;  
  
    public ObservableCollection<Car> Cars  
    {  
        get  
        {  
            return _cars;  
        }  
        set  
        {  
            SetProperty(ref _cars, value);  
        }  
    }  

This is my carView

	<ContentView.Content>  
		<Grid>  
			<Frame Margin="5,15,5,5"  
			       BorderColor="LightGray"  
			       CornerRadius="5"  
			       HasShadow="False">  
				<Grid>  
					<Grid.RowDefinitions>  
						<RowDefinition Height="Auto" />  
					</Grid.RowDefinitions>  
					<Grid IsVisible="{Binding IsExpanded, Source={x:Reference _carView}}">  
						<Grid.RowDefinitions>  
							<RowDefinition Height="Auto" />  
							<RowDefinition Height="*" />  
						</Grid.RowDefinitions>  
						<Label HorizontalOptions="End"  
						       Text="{Binding Notes}"  
						       TextColor="Gray" />  
						<Label Grid.Row="1" Text="{Binding Description}" />  
					</Grid>  
				</Grid>  
			</Frame>  
			<StackLayout Margin="20,0,0,0"  
			             BackgroundColor="White"  
			             HorizontalOptions="Start"  
			             Orientation="Horizontal"  
			             VerticalOptions="Start">  
				<local:CarCircleView Margin="7,0,0,0"  
				                     Command="{Binding ToggleCollapseCommand, Source={x:Reference _carView}}"  
				                     HeightRequest="30"  
				                     HorizontalOptions="Start"  
				                     VerticalOptions="Start"  
				                     WidthRequest="30" />  
				<Label Margin="0,0,7,0"  
				       FontAttributes="Bold"  
				       Text="{Binding Name}"  
				       VerticalTextAlignment="Center" />  
			</StackLayout>  
  
  
		</Grid>  
	</ContentView.Content>  
</ContentView>  

241575-image.png

the problem is that when I delete, I can see a huge gap in the elements

241612-image.png

How can I get rid of the gap?

241587-image.png

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,336 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.