Блог

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

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

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

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=»{Значение привязки}» в вашей пользовательской ViewCell будет привязка со свойством значения данных.

Привязка данных — это «клей», который связывает свойства объекта пользовательского интерфейса со свойствами некоторого объекта 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.

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

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