MVVM uwp UserControl,VM为DataTemplate

Question

我正在尝试使用MVVM模式在UWP中创建一个应用程序.作为Listbox中项目的DataTemplate的usercontrol可能有自己的VM.

这是MainPage.xaml的一部分

 <ListBox Name="ListBox1" ItemsSource="{Binding Components}">
            <ListBox.ItemTemplate >
                <DataTemplate x:DataType="vm:ComponentUserControlViewModel"  >
                    <local:ComponentUserControl />
                </DataTemplate>
            </ListBox.ItemTemplate>
 </ListBox>

MainPageVM包含:

public ObservableCollection<Component> Components

现在它是我的UserControl

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <TextBox Text="{Binding Id}" Grid.Row="0"></TextBox>
    <TextBox Text="{Binding Name}" Grid.Row="1"></TextBox>

</Grid>

VM:

    public class ComponentUserControlViewModel : ViewModelBase
{
    private string _componentId;
    private string _componentName;

    public ComponentUserControlViewModel()
    {
    }

    public string Id
    {
        get { return _componentId; }
        set
        {
            SetProperty(ref _componentId, value);
        }
    }
    public string Name
    {
        get { return _componentName; }
        set
        {
            SetProperty(ref _componentName, value);
        }
    }

我想要的是例如,如果我Id在UI中更改属性,视图模型Id属性也将更改.

Answer 1

Kris说的是真的,你需要依赖属性来实现你想要的.

简而言之,您可以拥有两种类型的属性:在ViewModel中具有良好的旧属性,Id和Name以及依赖项属性.(当然也有附加属性过,但概念上它们是相同的依赖特性.)这两种类型的属性之间的主要区别是,虽然这两种类型可以是目标的数据绑定,仅依赖属性可以是源的数据绑定.这就是你需要的.

因此,要解决您的问题,我们需要一个依赖项属性,在您的控件的代码隐藏中定义.让我们将这个属性称为"组件",就像Kris在他的回答中所做的那样:

public static readonly DependencyProperty ComponentProperty = DependencyProperty.Register(
    "Component",
    typeof(ComponentUserControlViewModel), 
    typeof(ComponentUserControl), 
    new PropertyMetadata(null));
    
public ComponentUserControlViewModel Component
{
    get { return (ComponentUserControlViewModel) GetValue(ComponentProperty); }
    set { SetValue(ComponentProperty, value); }
}
    

现在,如果你将UserControl的绑定更改为这些(注意Mode = OneWay,x:Bind默认为OneTime!这里有更多关于它的信息.):

<TextBox Text="{x:Bind Component.Id, Mode=OneWay}" Grid.Row="0" />
<TextBox Text="{x:Bind Component.Name, Mode=OneWay}" Grid.Row="1" />

并使用提供的Kris替换您的DataTemplate内容:

<local:ComponentUserControl Component="{Binding}" />

魔法将会发生,所有这一切都会奏效!:)如果您对此事有任何疑问,请查看依赖属性的官方概述.