Shifting after deleting
Eduardo Gomez
3,426
Reputation points
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>
the problem is that when I delete, I can see a huge gap in the elements
How can I get rid of the gap?
Sign in to answer