xamarin.forms listview 4 столбца получить столбец постучал - PullRequest
0 голосов
/ 17 октября 2019

У меня есть обычная страница XAML, которая содержит ListView с 4 столбцами. Сначала я создаю Grid, который определяет мои столбцы, например:

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

Теперь мой вопрос, как я могу определить положениепостукивающее изображение внутри списка? С событием Tapped на изображении я не могу получить позицию.

Событие ItemTapped в ListView дает мне объект выбранного элемента, но не тот столбец, по которому я щелкнул.

Как можноЯ разрешаю это?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 17 октября 2019

Да, вы можете привязать команду каждого столбца к 4 различным командам вашей модели представления. Вот демо из GitHub Акалиаро. Вы можете проверить это здесь .

Хотя это кодируется в c #, а не в xaml, вы можете легко конвертировать его в Xaml.

Основной код:

this.BindingContext = new MyPageViewModel();


TapGestureRecognizer tgrTrash = new TapGestureRecognizer();
            tgrTrash.SetBinding(TapGestureRecognizer.CommandProperty, new 
Binding("BindingContext.TrashCommand", source: this));
            tgrTrash.SetBinding(TapGestureRecognizer.CommandParameterProperty, ".");

класс MyPageViewModel (BindingContext)

[ImplementPropertyChanged]
public class MyPageViewModel
{
    bool _isLabelEmptyVisible { get; set; }
    Model _selectedItem { get; set; }
    bool _isTapped { get; set; }
    int _count { get; set; }

    int Count {
        get { return _count; }
        set { _count = value;
            IsListViewVisible = (_count != 0);
            IsLabelEmptyVisible = (_count == 0); }
    }

    public bool IsLabelEmptyVisible { get; set; }
    public bool IsListViewVisible { get; set; }
    public ObservableCollection<Model> List { get; set; } = new ObservableCollection<Model>();

    public MyPageViewModel()
    {

        addRows();

        this.TrashCommand = new Command(async (object obj) => {

            try
            {
                if (_isTapped)
                    return;

                if (obj != null)
                    System.Diagnostics.Debug.WriteLine("Obj is not null");
                else
                    System.Diagnostics.Debug.WriteLine("Obj IS null");


                _isTapped = true;
                var ret = await Application.Current.MainPage.DisplayAlert("Attention", "Delete this row?", "Yes", "No");

                if (ret)
                {

                    //int idx = List.IndexOf((Model)obj);

                    List.Remove((Model)obj);
                    Count = List.Count;
                }

                _isTapped = false;

            }
            catch (Exception ex) {
                _isTapped = false;
                await Application.Current.MainPage.DisplayAlert("Attention", ex.Message, "Ok");
            }
        });             
    }

    private void addRows() {

        List.Add(new Model { Description = "D1", Cost = 10.0, Qty = 1, BackgroundColor = "#9ac16e", TextColor = "#001833" });

    }

    public Model SelectedItem { 
        get { return _selectedItem; }
        set {
            _selectedItem = value;

            if (_selectedItem != null) {

                //Task.Run(async () =>
                //{
                    Device.BeginInvokeOnMainThread(async() =>
                    {
                        var ret = await Application.Current.MainPage.DisplayActionSheet("Select", "Cancel", "Destruction", new string[] { "Edit", "Delete" });


                        if (ret == "Edit")
                        {

                            PromptConfig promptConfig = new PromptConfig();
                            promptConfig.CancelText = "CANCEL";
                            promptConfig.InputType = InputType.Number;
                            promptConfig.Message = "Modify QTA";
                            promptConfig.OkText = "OK";
                            promptConfig.Title = "UPDATE";
                            PromptResult result = await UserDialogs.Instance.PromptAsync(promptConfig);
                            if (result.Ok)
                                SelectedItem.Qty = int.Parse(result.Value);

                        }
                        else if (ret == "Delete")
                        {
                            List.Remove(SelectedItem);
                            Count = List.Count;
                        }
                        else { }
                    });
                //});
            }
        }
    }

    public ICommand TrashCommand { get; protected set;}

}
0 голосов
/ 17 октября 2019

Что вы можете сделать, это использовать кнопки вместо меток во всех 4 столбцах. И свяжите команду каждой кнопки с 4 различными командами модели вашего представления. А используя свойство тега кнопки, вы можете связать идентификатор модели и определить, какая строка была нажата пользователем.

<?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>
...