Кнопки ViewCell для обновления свойства ViewModel - PullRequest
Новая
       14

Кнопки ViewCell для обновления свойства ViewModel

0 голосов
/ 15 марта 2019

У меня есть пользовательский ViewCell класс.Я хочу добавить в этот класс кнопки увеличения / уменьшения, которые настраивают целочисленное свойство связанной модели представления.

Я новичок в Xamarin и пытаюсь определить, как реализовать это и как работает привязка данных в целом.в Xamarin.

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

1 Ответ

1 голос
/ 18 марта 2019

1. Создать собственный ViewCell

MyViewCell.xaml 

<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" 
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="xxx.MyViewCell">
 <ViewCell.View>       
        <StackLayout
                    HorizontalOptions="CenterAndExpand"
                    VerticalOptions="CenterAndExpand"
                    Orientation="Horizontal"
                    >
            <Button
                    VerticalOptions="Center"
                    HeightRequest="30"
                    WidthRequest="30"
                    Clicked="BtnMinus_Clicked"
                    Text="-"
                    x:Name="btnMinus"
                    FontSize="10"
                    BackgroundColor="White"
                    TextColor="Green"
                    BorderColor="Green"/>
            <Entry

                        x:Name="myEntry"
                        HorizontalTextAlignment="Center"
                        Text="{Binding value}"
                        TextColor="Black"
                        FontSize="10"
                        Keyboard="Numeric"/>
            <Button
                        x:Name="btnAdd"
                        VerticalOptions="Center"
                    WidthRequest="30"
                    HeightRequest="30"
                    Clicked="BtnAdd_Clicked"
                    Text="+"
                    FontSize="10"
                    BackgroundColor="White"
                    TextColor="Green"
                    BorderColor="Green"
                    />
        </StackLayout>     
 </ViewCell.View>
</ViewCell>

MyViewCell.xaml.cs 

public partial class MyViewCell: MyViewCell
{
    public ViewCell1 ()
    {
        InitializeComponent ();
    }


    private void BtnMinus_Clicked(object sender, EventArgs e)
    {
        int num = int.Parse(myEntry.Text) - 1;
        myEntry.Text = num.ToString();
    }

    private void BtnAdd_Clicked(object sender, EventArgs e)
    {
        int num = int.Parse(myEntry.Text) + 1;
        myEntry.Text = num.ToString();
    }
}

2. создать ViewModel 

public class Data
{
    public string value { get; set; }      
}

Text = "{Binding value}" в вашем пользовательском ViewCell будет связываться со свойством значения Data .

Привязка данных - это «клей», который связывает свойства объекта пользовательского интерфейса со свойствами некоторого объекта CLR, такого как класс в вашей ViewModel. Связывание данных полезно, потому что оно упрощает разработку пользовательских интерфейсов, заменяя много скучного стандартного кода.

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

** 3. Связующие клетки **

на вашей странице контента.

xxxpage.xaml 

<?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:local="clr-namespace:xxx"
         x:Class="xxx.xxxPage">

 <ListView x:Name="MyListView"
  CachingStrategy="RecycleElement">
    <ListView.ItemTemplate>
        <DataTemplate>
            <local:MyViewCell Height="150" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

xxxPage.xaml.cs 

 public partial class xxxPage : ContentPage
 {
    public ObservableCollection<Data> mySource { get; set; }

    public xxxPage()
    {
        InitializeComponent();
        BindingContext = this;

        mySource = new ObservableCollection<Data>();


        mySource.Add(new Data { value = "0" });
        mySource.Add(new Data { value = "1" });
        mySource.Add(new Data { value = "2" });
        mySource.Add(new Data { value = "3" });
        mySource.Add(new Data { value = "4" });
        mySource.Add(new Data { value = "5" });

        MyListView.ItemsSource = mySource;
    }
 }

Обратите внимание, что привязка была установлена ​​в коде для простоты ( BindingContext = this ; ), хотя это могло быть связано в XAML.

Предыдущий бит XAML определяет ContentPage, который содержит ListView. Источник данных ListView устанавливается через атрибут ItemsSource. Макет каждой строки в ItemsSource определен в элементе ListView.ItemTemplate.

Это результат:

enter image description here

Для более подробной информации о ListView и привязке даты вы можете обратиться здесь .

...