listview - xamarin.forms listview 4列被点击列

Question

我有一个普通的 XAML 页面，其中包含一个具有 4 列的 ListView。首先，我创建一个定义我的列的网格，例如：

<Grid x:Name="gFirst" BackgroundColor="#4682B4">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="10"/>
                    <ColumnDefinition Width="6*"/>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="2*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="60"/>
                </Grid.RowDefinitions>
                <StackLayout x:Name="slImage" Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="0" IsVisible="False">
                    <Label Text="" FontFamily="Trebuchet MS" FontSize="16" TextColor="White"/>
                </StackLayout>
                <StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="0">
                    <Label Text="Mieter / Strasse" FontFamily="Trebuchet MS" FontSize="16" Margin="20,0,0,0" TextColor="White"/>
                </StackLayout>
                <StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Grid.Column="2" Grid.Row="0">
                    <Label Text="Vertragsbeginn" FontFamily="Trebuchet MS" FontSize="16" TextColor="White"/>
                </StackLayout>
                <StackLayout x:Name="sl3" Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Grid.Column="3" Grid.Row="0" IsVisible="False">
                    <Label Text="Vertragsende" FontFamily="Trebuchet MS" FontSize="16" TextColor="White"/>
                </StackLayout>
            </Grid>

然后我有一个 ListView：

<ListView x:Name="lv" RowHeight="70">  
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell Appearing="ViewCell_Appearing">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="{Binding ColumnWidthImg}" />
                                    <ColumnDefinition Width="{Binding ColumnWidth}" />
                                    <ColumnDefinition Width="{Binding ColumnWidthSec}"/>
                                    <ColumnDefinition Width="{Binding ColumnWidthThird}"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="0" IsVisible="{Binding VisibleColumn}">
                                    <Image Source="{Binding ImgSource}" WidthRequest="30" HeightRequest="30">
                                        <Image.GestureRecognizers>
                                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" NumberOfTapsRequired="1" />
                                        </Image.GestureRecognizers>
                                    </Image>
                                </StackLayout>
                                <StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="0" Margin="20,0,0,0">
                                    <Label Text="{Binding Test1}" FontFamily="Trebuchet MS" FontSize="16" TextColor="Black" />
                                    <Label Text="{Binding Test4}" FontFamily="Trebuchet MS" FontSize="16" TextColor="Black" />
                                </StackLayout>
                                <StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Grid.Column="2" Grid.Row="0">
                                    <Label Text="{Binding Test2}" FontFamily="Trebuchet MS" FontSize="16" TextColor="Black" />
                                </StackLayout>
                                <StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Grid.Column="3" Grid.Row="0" IsVisible="{Binding VisibleColumn}">
                                    <Label Text="{Binding Test3}" FontFamily="Trebuchet MS" FontSize="16" TextColor="Black" />
                                </StackLayout>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

我现在的问题是，如何检测列表视图中点击的图像的位置？使用图像中的点击事件，我无法获得位置。

ListView 中的 ItemTapped 事件给了我被点击项目的对象，但不是我点击了哪一列。

我该如何解决这个问题？

谢谢。

标签： listviewxamarin.formsmultiple-columns

Answer 1

您可以做的是，在所有 4 列中使用按钮而不是标签。并将每个按钮的命令绑定到视图模型的 4 个不同命令。并且使用按钮的标签属性，您可以绑定模型的 Id，并且您可以识别用户点击了哪一行。

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:custom="clr-namespace:RoundedCornerViewDemo.ControlsToolkit.Custom"
    x:Class="RoundedCornerViewDemo.RoundedCornerViewPage" x:Name="ThisPage">
    <StackLayout Spacing="20" Padding="20,40,20,20" BackgroundColor="LightGray">
        <Label Text="RoundedCornerView" HorizontalOptions="CenterAndExpand" FontSize="30" TextColor="Blue"/>


            <ListView x:Name="lv" RowHeight="70">  
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell Appearing="ViewCell_Appearing" Tapped="">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="{Binding ColumnWidthImg}" />
                                    <ColumnDefinition Width="{Binding ColumnWidth}" />
                                    <ColumnDefinition Width="{Binding ColumnWidthSec}"/>
                                    <ColumnDefinition Width="{Binding ColumnWidthThird}"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="0" IsVisible="{Binding VisibleColumn}">
                                    <Image Source="{Binding ImgSource}" WidthRequest="30" HeightRequest="30">
                                        <Image.GestureRecognizers>
                                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" NumberOfTapsRequired="1" />
                                        </Image.GestureRecognizers>
                                    </Image>
                                </StackLayout>
                                <StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="0" Margin="20,0,0,0">
                                    <Button Text="{Binding Test1}" FontFamily="Trebuchet MS" FontSize="16" TextColor="Black" Command="{Binding Path=BindingContext.ButtonCommand, Source={x:Reference Name=ThisPage}}" CommandParameter="{Binding Id}"/>
                                    <Label Text="{Binding Test4}" FontFamily="Trebuchet MS" FontSize="16" TextColor="Black" />
                                </StackLayout>
                                <StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Grid.Column="2" Grid.Row="0">
                                    <Label Text="{Binding Test2}" FontFamily="Trebuchet MS" FontSize="16" TextColor="Black" />
                                </StackLayout>
                                <StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Grid.Column="3" Grid.Row="0" IsVisible="{Binding VisibleColumn}">
                                    <Label Text="{Binding Test3}" FontFamily="Trebuchet MS" FontSize="16" TextColor="Black" />
                                </StackLayout>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            <Label Text="RoundedCornerView" HorizontalOptions="CenterAndExpand" FontSize="30" TextColor="Blue"/>
            <Label Text="RoundedCornerView" HorizontalOptions="CenterAndExpand" FontSize="30" TextColor="Blue"/>
            <Label Text="RoundedCornerView" HorizontalOptions="CenterAndExpand" FontSize="30" TextColor="Blue"/>
            <Label Text="RoundedCornerView" HorizontalOptions="CenterAndExpand" FontSize="30" TextColor="Blue"/>
            <Label Text="RoundedCornerView" HorizontalOptions="CenterAndExpand" FontSize="30" TextColor="Blue"/>
            <Label Text="RoundedCornerView" HorizontalOptions="CenterAndExpand" FontSize="30" TextColor="Blue"/>
         </custom:RoundedCornerView>
        </StackLayout>
</ContentPage>