如何在Silverlight中将数据传递给用户控件的视图模型?

时间:2012-08-15 12:36:02

标签: silverlight silverlight-5.0

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

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

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

此控件有自己的视图模型,我将视图绑定到。例如。我有Content="{Binding Name}"的标签。

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

如何将每个块从我的块列表传递到用户控件的View Model?

1 个答案:

答案 0 :(得分:3)

为堆栈面板视图创建视图模型。在此视图模型中公开块视图模型的集合。

将此集合绑定到视图中堆栈面板内的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>