我正在尝试向ListView中的图像添加点按手势
以下图像在没有 Image.GestureRecognizers 部分的ListView中正确呈现,但是使用它,ListView根本不呈现任何内容(没有错误消息)。 为了澄清这一点,ListView中还有一个Label,它也不会呈现。
<Image x:Name="newsImage" VerticalOptions="End" HeightRequest="200" WidthRequest="200" Aspect="AspectFill" Source="{Binding Imageurllarge}">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnTapGestureRecognizerTapped"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
我从 - http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/gestures/获取此信息(假设此示例不是列表视图图像,但假设它应该在列表视图中工作)。
另外(根据评论建议)
<Image.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding TapCommand}"
CommandParameter="newsImage" />
似乎没有更好的公平。
如果有人有一个如何在后面的代码中添加它的示例(没有viewmodel就好了)那么就可以了。
答案 0 :(得分:3)
您可以在ListView中使用DataTemplate,在DataTemplate内部有一个Grid,然后添加UI元素。在给定的示例中,我显示了名称,联系人号码和图像,我在图像上使用了GestureRecognizers。试试这个:
<ListView x:Name="myListView" ItemsSource="{Binding Contacts}" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="75">
<Grid Padding="5">
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="80"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="user_img.png" Grid.Column="0" Grid.RowSpan="2" VerticalOptions="CenterAndExpand"/>
<Label Grid.Row="0" Grid.Column="1" Font="16" Text="{Binding DisplayName}" LineBreakMode="TailTruncation"></Label>
<Label Grid.Row="1" Grid.Column="1" Font="12" Text="{Binding Number}" LineBreakMode="TailTruncation"></Label>
<Image Grid.Row="0" Grid.RowSpan="3" Grid.Column="2" Source="add.png" Aspect="AspectFill">
<Image.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding AddCommand}"
CommandParameter="{Binding Number}" />
</Image.GestureRecognizers>
</Image>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
答案 1 :(得分:1)
通过在XAML中使用自己的TapGestureRecognizer
属性指定它,然后在代码中添加点击处理程序,我在x:Name
这样的用途中取得了成功。
示例标记:
<Image.GestureRecognizers>
<TapGestureRecognizer x:Name="tapImage" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
然后在代码中:
this.tapImage.Tapped += async (object sender, EventArgs e) => {
... // Do whatever is wanted here
}
处理程序不一定需要标记为async
,在我的用途中常见的是异步发生在那里,如确认对话框或扫描条形码。
答案 2 :(得分:0)
您还可以将手势识别器附加到列表视图中的图像。手势识别器可以绑定到视图模型中的命令
<ListView x:Name="ExampleList" SeparatorVisibility="None" VerticalOptions="Start" HeightRequest="{Binding HeightRequest}"
HasUnevenRows="True"
CachingStrategy="RecycleElement"
ItemsSource="{Binding FeedItems}"
IsPullToRefreshEnabled="True"
RefreshCommand="{Binding LoadItemsCommand}"
IsRefreshing="{Binding IsBusy, Mode=OneWay}">
<ListView.ItemTemplate >
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<StackLayout Orientation="Vertical">
<Label Text="{Binding TimeAgo}" FontSize="8"></Label>
<StackLayout Orientation="Horizontal">
<Image Source="Accept.png" HeightRequest="30" WidthRequest="45" IsVisible="{Binding IsAccepted, Converter={StaticResource inverse}}">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={StaticResource sampleViewModel}, Path=AcceptCommand}" CommandParameter="{Binding RequestID}" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>