Xamarin.Forms Добавление GestureRecognizer к изображению в ListView

Я пытаюсь добавить жест касания к изображению в ListView.

Следующее Image правильно отображается в ListView без раздела Image.GestureRecognizers, но с ним ListView вообще ничего не отображает (нет сообщения об ошибке). Чтобы уточнить это, в ListView также есть метка, которая также не отображается.

<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" />

Кажется, не лучше.

Если у кого-то есть пример того, как добавить это в код (без модели просмотра все в порядке), то это подойдет.


xamarin xamarin.forms
person WickedW    schedule 18.07.2014    source источник
comment
обратите внимание, что TappedCallback устарело, используйте Command   -  person Sten Petrov    schedule 18.07.2014
comment
Пробовал командный вариант, тот же результат.   -  person WickedW    schedule 18.07.2014
comment
Это конкретно изображение нужно тапнуть? Событие изменения выбора ListView не сокращает его?   -  person Sten Petrov    schedule 18.07.2014
comment
Я могу переделать вещи, чтобы избежать этого, но должен ли я это делать? Я спрашиваю что-то необычное, то есть вы никогда не должны использовать ListView и иметь отдельные интерактивные изображения?   -  person WickedW    schedule 18.07.2014
comment
WickedW, ты когда-нибудь решал эту проблему?   -  person Eoin Campbell    schedule 07.11.2014
comment
@EoinCampbell Кэмпбелл, извините, я давно не смотрел на это, рассмотрю ответ ниже, когда представится возможность ...   -  person WickedW    schedule 28.11.2014

Ответы (3)


arrow_upward
3
arrow_downward

Вы можете использовать DataTemplate в ListView, а внутри DataTemplate есть Grid, а затем добавить элементы пользовательского интерфейса. В данном примере я показываю имя, контактный номер и изображение, я использовал 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>
person KirtiSagar    schedule 19.11.2014

arrow_upward
1
arrow_downward

Я добился успеха с TapGestureRecognizer в подобных случаях, указав его в XAML с собственным атрибутом 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, просто для моего использования обычно происходит что-то асинхронное, например, диалоговое окно подтверждения или сканирование штрих-кода.

person Mark Larter    schedule 08.06.2015

arrow_upward
0
arrow_downward

Вы также можете прикрепить распознаватель жестов к изображению внутри списка. Распознаватель жестов может привязываться к команде в модели представления.

     <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>
person Patrick Goode    schedule 08.06.2016