MVVM方法

Question

我是Xamarin表单应用程序开发的新手，想要尝试一个简单的应用程序，它将从textfield获取字符串并通过数据绑定将其放入标签中。

文字字段，从两侧和垂直中心有20像素的边距。
标签将位于文字字段下方。
在textField中键入时，标签将更新（MVVM）
UI设计将来自XAML。

谢谢。

Answer 1

如果您正在使用Xamarin Forms来实现这一点并使用DataBinding（MVVM），首先在ViewModel中（我们将其称为MainPageViewModel.cs），您需要这样的内容：

using System.ComponentModel;
using System.Runtime.CompilerServices;
namespace SandboxForms.ViewModels
{
    public class MainPageViewModel : INotifyPropertyChanged
    {
        private string _myTextField;
        public string MyTextField
        {
            get { return _myTextField; }
            set
            {
                _myTextField = value;
                OnPropertyChanged(nameof(MyTextField));
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            var handler = PropertyChanged;
            if (handler != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

然后在我们的ContentPage中（我们称之为MainPage.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" 
        x:Class="SandboxForms.Pages.MainPage"
        xmlns:viewmodels="clr-namespace:SandboxForms.ViewModels;SandboxForms">
    <ContentPage.BindingContext>
        <viewmodels:MainPageViewModel />
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <StackLayout Padding="20">
            <!-- I am applying EndAndExpand to the entry and 
            StartAndExpand to the label to center them each other -->
            <Entry 
                HorizontalOptions="FillAndExpand"
                VerticalOptions="EndAndExpand"
                Placeholder="Write here and see the magic!!!"
                Text="{Binding MyTextField}"/>
            <Label 
                HorizontalTextAlignment="End"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="StartAndExpand"
                Text="{Binding MyTextField}"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

以下是结果的一些截图： Application starting， Entering text on your Entry 希望这对你有用，我最诚挚的问候！

Answer 2

数据绑定有两种方法，每种方法都有其优点，具体取决于具体情况。第一个是MVVM，如前所述。这适用于您的ViewModel应该知道的字段，例如输入字段中的文本，但这并非总是如此，在选择正确的方法以满足您的需求之前完全理解这一点非常重要

MVVM方法

视图模型

public class MyPageViewModel : INotifyPropertyChanged
{
    private string myTextField;
    public string MyTextField
    {
        get { return myTextField; }
        set
        {
            if( !myTextField.Equals( value ) )
            {
                myTextField = value;
                OnPropertyChanged("MyTextField");
            }
        }
    }
}

视图

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage 
        xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
        x:Class="SandboxForms.Pages.MainPage"
        xmlns:viewmodels="clr-namespace:SandboxForms.ViewModels;SandboxForms">
    <ContentPage.BindingContext>
        <viewmodels:MainPageViewModel />
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <StackLayout Padding="20">
            <!-- I am applying EndAndExpand to the entry and 
            StartAndExpand to the label to center them each other -->
            <Entry 
                HorizontalOptions="FillAndExpand"
                VerticalOptions="EndAndExpand"
                Placeholder="Write here and see the magic!!!"
                Text="{Binding MyTextField}"/>
            <Label 
                HorizontalTextAlignment="End"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="StartAndExpand"
                Text="{Binding MyTextField}"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

这通常是大多数开发人员首选的方法，而不是直接在UI后面的代码中混合业务逻辑。

如果您对此不熟悉，可以查看一些帮助器和框架。以下是一些比较流行的。

MvvmHelpers - James Montemagno
Prism Library（我个人最喜欢的）
Mvvm Cross
Mvvm Light

以中心方式查看

有时它实际上会违反MVVM模式直接绑定到ViewModel的属性，有时我们可能希望在View中显示某些内容而无需更新ViewModel中的后备字段。作为示例，我们可以查看Xamarin's guide to data binding。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.SliderBindingsPage"
             Title="Slider Bindings Page">

  <StackLayout>
    <Label Text="ROTATION"
           BindingContext="{x:Reference Name=slider}"
           Rotation="{Binding Path=Value}"
           FontAttributes="Bold"
           FontSize="Large"
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />

    <Slider x:Name="slider"
            Maximum="360"
            VerticalOptions="CenterAndExpand" />

    <Label BindingContext="{x:Reference slider}"
          Text="{Binding Value,
                          StringFormat='The angle is {0:F0} degrees'}"
          FontAttributes="Bold"
          FontSize="Large"
          HorizontalOptions="Center"
          VerticalOptions="CenterAndExpand" />
  </StackLayout>
</ContentPage>

我应该注意，我建议使用这种方法的最常见时间之一是ListView中的Context Actions，因为我们的ViewModel可能包含我们想要在单个单元格上执行的Command，但是我们在其中的单元格正在执行上下文操作实际上是绑定到我们的IEnumerable<T>而不是我们的ViewModel的对象。在这种特殊情况下，我们会做类似以下的事情：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns ="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Name="someListPage"
             x:Class="MyApp.Views.SomeListPage">
  <ListView ItemsSource="{Binding Gear}" 
            CachingStrategy="RecycleElement"
            IsRefreshing="{Binding IsRefreshing}"
            IsPullToRefreshEnabled="True"
            RefreshCommand="{Binding RefreshCommand}">
    <ListView.ItemTemplate>
      <DataTemplate>
        <TextCell Text="{Binding Description}" Detail="{Binding Detail}">
          <TextCell.ContextActions>
            <MenuItem Text="Remove"
                      Command="{Binding BindingContext.RemoveItemCommand,Source={x:Reference someListPage}}"
                      CommandParameter="{Binding .}"
                      IsDestructive="True" />
          </TextCell.ContextActions>
        </TextCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</ContentPage>

您将注意到，为了实现此目的，我们首先为页面本身提供一个名称，然后我们可以引用它们来绑定ContextAction Command属性。这只会改变我们寻找这个单一房产的地方。然后，我们继续使用CommandParameter属性的常规绑定上下文，并使用{Binding .}

希望这有助于您更好地了解与Xaml绑定的选项。快乐的编码！

Xamarin-从TextField获取String并将其放在Label中

2 个答案:

MVVM方法

视图模型

视图

以中心方式查看