用于更新 ViewModel 的 ViewCell 按钮 属性

ViewCell Buttons to Update ViewModel Property

我有一个习惯 ViewCell class。我想向此 class 添加 increment/decrement 按钮,用于调整绑定视图模型的整数 属性。

我是 Xamarin 的新手,正在努力确定如何实现它以及数据绑定在 Xamarin 中的一般工作方式。

(我这样做是因为 Stepper 控件太小而无法实际使用。)

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}" 在您的 Custom ViewCell 中将与 Data 的值 属性 绑定.

数据绑定是 "glue",它将用户界面对象的属性绑定到某些 CLR 对象的属性,例如 ViewModel 中的 class。数据绑定很有用,因为它通过替换大量枯燥的样板代码简化了用户界面的开发。

数据绑定的工作原理是在绑定值发生变化时使对象保持同步。不必为控件的值每次更改都编写事件处理程序,而是在 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 的前一位定义了一个包含 ListView 的 ContentPage。 ListView 的数据源是通过 ItemsSource 属性设置的。 ItemsSource 中每一行的布局在 ListView.ItemTemplate 元素中定义。

这是结果:

有关 ListView 和日期绑定的更多详细信息,您可以参考 here