silverlight - 如何将数据传递给 Silverlight 中用户控件的视图模型？

Question

我有一个 Block 对象列表。每个区块都有名称和价格。以及这里不重要的其他属性

第 1 座 - 10 英镑
第 2 座 - 20 英镑

我已经实现了一个显示块的用户控件。

这个控件有自己的视图模型，我将视图绑定到。例如，我有一个带有Content="{Binding Name}".

我有一个单独的视图，其中包含一个堆栈面板。这将被多个块控件填充。

如何将块列表中的每个块传递到用户控件的视图模型中？

保罗

Answer 1

为堆栈面板视图创建视图模型。在此视图模型中公开一组块视图模型。

将此集合绑定到视图中堆栈面板内的 ItemsControl 之类的东西。设置模板，以便您的用户控件用于显示每个项目。

ItemsControl 实例化的每个控件都将与您的集合中的一个元素相关联。这将导致每个用户控件与其自己的视图模型相关联。

更新 - 这是一些代码

主页面：

<Grid x:Name="LayoutRoot" Background="White">
    <StackPanel Orientation="Vertical">
        <ItemsControl ItemsSource="{Binding BlockViewModels}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <local:BlockView></local:BlockView>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </StackPanel>
</Grid>

后面的主页代码：

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        DataContext = new MainPageViewModel();
    }
}

主页面视图模型：

public class MainPageViewModel
{
    public ObservableCollection<BlockViewModel> BlockViewModels
    {
        get;
        private set;
    }

    public MainPageViewModel()
    {
        BlockViewModels = new ObservableCollection<BlockViewModel>();
        BlockViewModels.Add(new BlockViewModel { CurrentBlock = new Block { Name = "Block 1", Price = 10 } });
        BlockViewModels.Add(new BlockViewModel { CurrentBlock = new Block { Name = "Block 2", Price = 20 } });
    }
}

块模型：

public class Block
{
    public string Name
    {
        get;
        set;
    }

    public int Price
    {
        get;
        set;
    }
}

块视图模型：

public class BlockViewModel
{
    public Block CurrentBlock
    {
        get;
        set;
    }
}

块视图：

<Grid x:Name="LayoutRoot" Background="White">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding CurrentBlock.Name}"></TextBlock>
        <TextBlock Text=" - "></TextBlock>
        <TextBlock Text="{Binding CurrentBlock.Price}"></TextBlock>
    </StackPanel>
</Grid>