1

Block オブジェクトのリストがあります。各ブロックには名前と価格があります。ここでは重要ではない他のプロパティとともに

ブロック 1 - £10
ブロック 2 - £20

ブロックを表示するユーザー コントロールを実装しました。

このコントロールには、ビューをバインドする独自のビュー モデルがあります。たとえば、 のラベルがありContent="{Binding Name}"ます。

スタック パネルを含む別のビューがあります。これは、複数のブロック コントロールで満たされます。

ブロックのリストから各ブロックをユーザー コントロールのビュー モデルに渡すにはどうすればよいですか?

ポール

4

1 に答える 1

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>
于 2012-08-15T16:57:58.750 に答える