UWP XAML 用户控件绑定

Question

我有一个 UWP XAML 用户控件，它可能包含在另一个用户控件中，也可能不包含。

<Grid>
    <StackPanel  >
        <TextBox Text="{x:Bind person.FirstName}"  />
        <TextBox Text="{x:Bind person.LastName}" />
        <Button Command="{x:Bind OkClicked}" HorizontalAlignment="Center"  Content="OK"></Button>
    </StackPanel>

</Grid>

后面的代码：

public sealed partial class PersonView : UserControl
{
    Person person => DataContext as Person;
    public ICommand OkClicked
    {
        get { return (ICommand)GetValue(okClicked); }
        set { SetValue(okClicked, value); }
    }

    // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty okClicked =
        DependencyProperty.Register("oKclicked", typeof(int), typeof(UserControl), new PropertyMetadata(null));

    public PersonView()
    {
        this.InitializeComponent();
    }
}

还有我的人Class:

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

我的父视图XAML视图

<Grid>
      <local:PersonView OkClicked="{x:Bind viewModel.PersonOkClicked}"> 
      </local:PersonView>
</Grid>

最后是我的 peopleViewModel：

public class PeopleViewModel : ViewModelBase
{
    private DelegateCommand _personOkClicked;

    public Person Person1 { get; set; }
    public DelegateCommand PersonOkClicked { get => _personOkClicked; set => SetProperty(ref _personOkClicked, value); }


    public PeopleViewModel()
    {
        PersonOkClicked = new DelegateCommand(PersonOkButtonClicked);
    }

    private void PersonOkButtonClicked()
    {
        // do something with person1
    }
}

PersonView 有一个数据上下文设置为模型 Person 和一个依赖项属性 OkClicked，我在父 ViewModel 中处理它。单击按钮时会正确触发。如何将整个 Person 对象放入 peopleViewModel Person1 属性?

Answer 1

在 PersonView UserControl 中，您可以使用 RoutedEventHandler 代替 ICommand 来绑定点击事件。我修改了您的代码，只做了很少的改动，以在 PeopleViewModel 中获取 person1。希望对你有帮助。

//PersonView.Xaml

<Grid>
   <StackPanel>
      <TextBox Text="{x:Bind person.FirstName,Mode=TwoWay}"  />
      <TextBox Text="{x:Bind person.LastName,Mode=TwoWay}" />
      <Button Click="OnClick" HorizontalAlignment="Center"  Content="OK"></Button>
   </StackPanel>
</Grid>

//PersonView.Xaml.cs

public sealed partial class PersonView : UserControl
{
    Person person;
    public event RoutedEventHandler Click;
    public PersonView()
    {
       person = new Person();
       this.InitializeComponent();
       this.DataContext = person;
    }
    private void OnClick(object sender, RoutedEventArgs args)
    {
       Click?.Invoke(sender, args);
    }
}

//MainView.Xaml

<Grid>
   <local:PersonView Click="{x:Bind viewModel.PersonOkButtonClicked,Mode=OneWay}">
   </local:PersonView>
</Grid>

//PeopleViewModel

 public class PeopleViewModel 
 {
    public Person Person1 { get; set; }
    public PeopleViewModel()
    {           
    }
    public void PersonOkButtonClicked(object sender,RoutedEventArgs e)
    {
       Person1 = (sender as FrameworkElement).DataContext as Person;
    }
 }

Answer 2

我发现如果你使用 Prism 和 DelegateCommand 并且你想使用 Dependencyproperties 将对象传递给视图模型，而不是另一个 viewmodel.In 你的代码背后：

//Code behind    

public ICommand okCommand
{
    get => (ICommand)GetValue(_okCommand);
    set => SetValue(_okCommand, value);
}
public static readonly DependencyProperty _okCommand = DependencyProperty.Register("okCommand", typeof(ICommand), typeof(CustomerDetailsView), new PropertyMetadata(null));

    public MyModel myModel { get; set; }

    public UserControlView()
    {
        InitializeComponent();
        myModel = new myModel();
        DataContext = myModel;
    }

在XAML

<Button
    Grid.Column="0"
    Command="{x:Bind okCommand}" CommandParameter="{x:Bind myModel}"
    Content="OK" />

在您的 ViewModel 中：

    public DelegateCommand<MyModel> myModelOkClick
    {
        get => _customerDetailsOkClick;
        set => SetProperty(ref _myModelOkClick, value);
    }

在视图模型构造函数中

    myModelOkClick = new DelegateCommand<MyModel>(CustomerDetailsOk);

在 viewmodel 中处理点击和模型的方法。

    private void CustomerDetailsOk(MyModel model)
    {

    }

UWP XAML 用户控件绑定

UWP XAML UserControl Binding

c#

xaml

uwp

uwp-xaml