Как динамически изменить свойство ребенка Грид?

Question

У меня есть динамически генерируемая сетка, которая заполняется данными из базы данных.

foreach (Models.Credito c in tabelaVigente.creditos)
{
    Credits_Grid.RowDefinitions.Add(new RowDefinition() { Height = 35 });

    var RowIndex = tabelaVigente.creditos.IndexOf(c);
    c.Quantidade = 0;

    Image Remove_Button = new Image {
                AutomationId = "Remove_" + RowIndex.ToString(),
                BackgroundColor = Color.Transparent,
                VerticalOptions = LayoutOptions.Center,
                HorizontalOptions = LayoutOptions.Center,
                Source = "ButtonRemove.png"
            };

    var Number = new Label() {
                AutomationId = "counter_" + RowIndex.ToString(),
                VerticalOptions = LayoutOptions.Center,
                HorizontalOptions = LayoutOptions.Center,
                Text = c.Quantidade.ToString()
            };

    var bem_label = new Label() {
                AutomationId = "bem_" + RowIndex.ToString(),
                VerticalOptions = LayoutOptions.Center,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                Text = c.bem,
                TextColor = Color.Black,
                HorizontalTextAlignment = TextAlignment.Center,
                FontAttributes = FontAttributes.Bold
            };

    var credito_label = new Label() {
                AutomationId = "credito_" + RowIndex.ToString(),
                VerticalOptions = LayoutOptions.Center,
                HorizontalOptions = LayoutOptions.Center,
                Text = _.GetString("Currency") + c.credito.ToString(),
                TextColor = Color.Black,
                HorizontalTextAlignment = TextAlignment.Center,
                FontAttributes = FontAttributes.Bold
            };

    var parcela_label = new Label() {
                AutomationId = "parcela_" + RowIndex.ToString(),
                VerticalOptions = LayoutOptions.Center,
                HorizontalOptions = LayoutOptions.Center,
                Text = _.GetString("Currency") + c.parcela_100.ToString(),
                TextColor = Color.Black,
                HorizontalTextAlignment = TextAlignment.Center,
                FontAttributes = FontAttributes.Bold
            };

    Image Add_Button = new Image {
                AutomationId = "Add_" + RowIndex.ToString(),
                BackgroundColor = Color.Transparent,
                VerticalOptions = LayoutOptions.Center,
                HorizontalOptions = LayoutOptions.Center,
                Source = "ButtonAdd.png"
            };

    // Adiciona os elementos ao Grid
    Credits_Grid.Children.Add(Remove_Button, 0, RowIndex);
    Credits_Grid.Children.Add(Number, 1, RowIndex);
    Credits_Grid.Children.Add(bem_label, 2, RowIndex);
    Credits_Grid.Children.Add(credito_label, 3, RowIndex);
    Credits_Grid.Children.Add(parcela_label, 4, RowIndex);
    Credits_Grid.Children.Add(Add_Button, 5, RowIndex);

    // Adds c to a List
    creditosList.Add(c);

    // Events
    Add_Button.GestureRecognizers.Add(new TapGestureRecognizer(Add_Tapped));
    Remove_Button.GestureRecognizers.Add(new TapGestureRecognizer(Remove_Tapped));
}

При касании изображения «удалить» сумма уменьшается.

    private void Remove_Tapped(View arg1, object arg2)
    {
        //Gets the Image ID, 
        var nameButton = arg1.AutomationId;

        //converts into a string
        string[] nameSplit = nameButton.Split("_");

        //and gets the index to be updated
        int indexList = Convert.ToInt32(nameSplit[1]);

        //If amount > 0, 
        if(creditosList[indexList].Quantidade > 0)
            //decrements the amount
            creditosList[indexList].Quantidade--;
    }

При касании изображения «Добавить» сумма увеличивается.

 private void Add_Tapped(View arg1, object arg2)
    {
        //Gets the Image ID, 
        var nameButton = arg1.AutomationId;

        //converts into a string
        string[] nameSplit = nameButton.Split("_");

        //and gets the index to be updated
        int indexList = Convert.ToInt32(nameSplit[1]);

        //Gets the index of the label I want to change
        int IndexNumber = 0;
        if (indexList == 0)
            IndexNumber = 1;
        else
            IndexNumber = 1 + (indexList - 1) * 6;

        //Increments the amount
        creditosList[indexList].Quantidade++;
    }

Мне нужно обновить метку, отображающую сумму при каждом касании одного из этих изображений.

Я попытался получить доступ к данным метки через событие касания, используя Credits_Grid.Children[IndexNumber], но не могу изменить свойство Text метки.

Answer 1

Вы можете использовать Привязка данных с ViewModel для реализации этого.

Привязки данных позволяют связывать свойства двух объектов, так что изменение одного вызывает изменение в другом. Это очень ценный инструмент, и, хотя привязки данных могут быть полностью определены в коде, XAML предоставляет ярлыки и удобство.

Здесь я создал образец ViewModel TapCountModel для записи количества нажатий. Здесь необходимо добавить INotifyPropertyChanged для ViewModel, измененные данные приведут к обновлению Xaml во время выполнения.

public class TapCountModel : INotifyPropertyChanged
{
    int tapcount = 0;
    public int TapCount
    {
        set
        {
            if (tapcount != value)
            {
                tapcount = value;
                OnPropertyChanged("TapCount");
            }
        }
        get
        {
            return tapcount;
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Xaml содержит четыре Image и одну Label.

<StackLayout>
    <!-- Place new controls here -->
    <Label Text="Welcome to Xamarin.Forms!" 
       HorizontalOptions="Center"
       VerticalOptions="Center" />
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Image Grid.Row="0"
               Grid.Column="0"
               BackgroundColor="Accent"
               WidthRequest="100"
               HeightRequest="100">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
            </Image.GestureRecognizers>
        </Image>
        <Image Grid.Row="0"
               Grid.Column="1"
               BackgroundColor="Bisque"
               WidthRequest="100"
               HeightRequest="100">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
            </Image.GestureRecognizers>
        </Image>
        <Image Grid.Row="1"
               Grid.Column="0"
               BackgroundColor="Aqua"
               WidthRequest="100"
               HeightRequest="100">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
            </Image.GestureRecognizers>
        </Image>
        <Image Grid.Row="1"
               Grid.Column="1"
               BackgroundColor="Salmon"
               WidthRequest="100"
               HeightRequest="100">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
            </Image.GestureRecognizers>
        </Image>
        <Label Grid.Row="2"
               Grid.ColumnSpan="2"
               FontSize="Large"
               Text="{Binding TapCount}"
               BackgroundColor="Gray"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center"/>

    </Grid>
</StackLayout>

In ContentPage , Bind TapCountModel и реализация метода TapGestureRecognizer_Tapped.

public partial class MainPage : ContentPage
{
    TapCountModel tapCountModel;
    public MainPage()
    {
        InitializeComponent();

        tapCountModel = new TapCountModel();
        BindingContext = tapCountModel;
    }

    private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
    {
        tapCountModel.TapCount++;
    }
}

Теперь эффект будет выглядеть следующим образом :