ViewCell按钮更新ViewModel属性

时间:2019-03-15 11:44:45

标签: xamarin button binding viewmodel

我有一个自定义的ViewCell类。我想向此类添加增量/减量按钮,以调整绑定的视图模型的整数属性。

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

(我这样做是因为“步进器”控件太小而无法实际使用。)

1 个答案:

答案 0 :(得分:1)

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; }      
}
自定义ViewCell中的

Text =“ {Binding value}” 将与值为 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的上一位定义了一个包含ListView的ContentPage。通过ItemsSource属性设置ListView的数据源。 ItemsSource中每一行的布局都在ListView.ItemTemplate元素中定义。

这是结果:

enter image description here

有关ListView和日期绑定的更多详细信息,请参阅here