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);
        }
    }

我想要的是例如如果我在UI中更改Id属性，则视图模型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！有关它的更多信息here。）：

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

将您的DataTemplate内容替换为Kris提供的内容：

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

魔法将会发生，所有这一切都会奏效！ :) 如果您对此事有任何疑问，请查看this official overview依赖属性。

MVVM uwp UserControl，VM为DataTemplate

1 个答案: