UWP XAML 用户控件绑定答案

【问题标题】：UWP XAML UserControl BindingUWP XAML 用户控件绑定
【发布时间】：2019-01-06 14:15:10
【问题描述】：

我有一个 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();
    }
}

还有我的班级：

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 属性中？

【问题讨论】：

标签： c# xaml uwp uwp-xaml

【解决方案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>

//人物视图模型

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

【讨论】：

【解决方案2】：

如果您使用 Prism 和 DelegateCommand 并且您想使用 Dependencyproperties 而不是另一个视图模型将对象传递给视图模型，我发现您可以做什么。在您的代码中：

//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" />

在您的视图模型中：

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

在视图模型构造函数中

    myModelOkClick = new DelegateCommand<MyModel>(CustomerDetailsOk);

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

    private void CustomerDetailsOk(MyModel model)
    {

    }

【讨论】：