我正在使用自定义视图单元格和渲染器实现滑动以删除要素。我有一个像这样的列表视图:
https://i.stack.imgur.com/AzBQk.png
当滑动时,会显示一个按钮,如下所示
https://i.stack.imgur.com/S87uj.png
但是,单击删除按钮(成功从列表中删除项目)后,移动到删除单元格位置的视图单元格仍然显示删除按钮:
https://i.stack.imgur.com/aMwux.png
任何人都知道如何阻止这种情况发生?我的自定义渲染器只是公开OnFling()和OnScroll()事件。
我也尝试使用Xamarin形式Pan Gesture Recogniser进行类似的事情并遇到同样的问题。
编辑1:添加了代码段
自定义视图单元格xaml
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="SwipeViewCell" xmlns:local="CustomControls">
<Grid x:Name="SwipeViewCellGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70*"/>
<ColumnDefinition Width="30*"/>
</Grid.ColumnDefinitions>
<StackLayout x:Name="HiddenContainer" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Column="1"/>
<local:GestureStackLayout x:Name="SwipeContainer" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.ColumnSpan="2" Grid.Column="0"/>
</Grid>
自定义查看单元格.cs:
public partial class SwipeViewCell : ViewCell
{
private View _swipeContent;
private View _hiddenContent;
public SwipeViewCell()
{
InitializeComponent();
SwipeContainer.SwipeLeft += SwipeContainer_SwipeLeft;
SwipeContainer.SwipeRight += SwipeContainer_SwipeRight;
}
public View SwipeContent
{
get
{
return _swipeContent;
}
set
{
_swipeContent = value;
SwipeContainer.Children.Add(SwipeContent);
OnPropertyChanged();
}
}
public View HiddenContent
{
get
{
return _hiddenContent;
}
set
{
_hiddenContent = value;
HiddenContainer.Children.Add(HiddenContent);
OnPropertyChanged();
}
}
private void SwipeContainer_SwipeRight(object sender, EventArgs e)
{
SwipeContainer.TranslateTo(SwipeContainer.X, 0, 250, Easing.Linear);
}
private void SwipeContainer_SwipeLeft(object sender, EventArgs e)
{
SwipeContainer.TranslateTo(SwipeContainer.X - HiddenContainer.Width, 0, 250, Easing.Linear);
}
}
查看型号:
public class ViewModel
{
private ObservableCollection<string> _data;
public ViewModel()
{
Data = new ObservableCollection<string>();
Data.Add("a");
Data.Add("c");
Data.Add("b");
}
public ObservableCollection<string> Data
{
get { return _data; }
set
{
_data= value;
OnPropertyChanged();
}
}
public ICommand Delete
{
get
{
return new Command((e) =>
{
_data.Remove(e as string);
Data = _data
});
}
}
}
XAML:
<ListView ItemsSource="{Binding Data}" x:Name="Model" HorizontalOptions="FillAndExpand" IsVisible="True" VerticalOptions="FillAndExpand" SeparatorVisibility="Default" SeparatorColor="Black">
<CustomControls:MultiListView.ItemTemplate>
<DataTemplate>
<CustomControls:SwipeViewCell x:Name="Item">
<CustomControls:SwipeViewCell.SwipeContent>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="White">
<Label Text="{Binding }"/>
</StackLayout>
</CustomControls:SwipeViewCell.SwipeContent>
<CustomControls:SwipeViewCell.HiddenContent>
<Button Text="Delete" Command="{Binding Delete}" BindingContext="{Binding Source={x:Reference Model}, Path=BindingContext}" CommandParameter="{Binding Source={x:Reference Item}, Path=BindingContext}" BackgroundColor="Red"></Button>
</CustomControls:SwipeViewCell.HiddenContent>
</CustomControls:SwipeViewCell>
</DataTemplate>
<ListView.ItemTemplate>
<ListView>
答案 0 :(得分:-1)
在下面的完整示例中,如何做到这一点,它对我来说很好:
1-添加一个包含已在列表视图中显示的数字的类
public class NumberClass
{
public string Number{ get; set; }
}
2 - 尝试将ObservableCollection
用于NumberClass
,如下所示:
public class NumberClassList : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public System.Collections.ObjectModel.ObservableCollection<NumberClass> _items;
public ObservableCollection<NumberClass> Items
{
get { return _items; }
set { _items = value; OnPropertyChanged("Items"); }
}
protected virtual void OnPropertyChanged(string propertyName)
{
if (PropertyChanged == null)
return;
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
public SerialClassList(List<NumberClass> itemList)
{
Items = new ObservableCollection<NumberClass>();
foreach (NumberClassitm in itemList)
{
Items.Add(itm);
}
}
}
3 - 将您的号码列表放在List<NumberClass>
public List<NumberClass> allItems;
4 - 使用NumberClassList如下:
NumberClassList items;
items = new NumberClassList(allItems);
为您的ListView
设置项目来源,如下所示:
ItemsSource = items.Items;
6 - 为您的DataTemplate
创建ListView
,如下所示:
注意:删除按钮和数字具有相同的绑定
DataTemplate dt = new DataTemplate(() =>
{
var Number = new Label
{
TextColor=Color.Black,
FontAttributes=FontAttributes.Bold,
HorizontalOptions = LayoutOptions.StartAndExpand
};
Number.SetBinding(Label.TextProperty, new Binding("Number"));
var Deletebutton = new Button { Text = "Delete", HorizontalOptions = LayoutOptions.StartAndExpand };
Deletebutton.SetBinding(Button.CommandParameterProperty, new Binding("Number"));
Deletebutton.Clicked += DeleteSerial;
return new ViewCell
{
View = new StackLayout
{
Orientation = StackOrientation.Horizontal,
VerticalOptions = LayoutOptions.FillAndExpand,
Children =
{
Number,
Deletebutton
}
}
};
});
YourListView.ItemTemplate = dt;
7 - 这是删除按钮的实现:
public void DeleteSerial(object sender,EventArgs e)
{
var item = (Xamarin.Forms.Button)sender;
SerialClass listitem = (from itm in items.Items
where itm.Number == item.CommandParameter.ToString()
select itm)
.FirstOrDefault<SerialClass>();
items.Items.Remove(listitem);
}