UserControl要素を含むItemsControl - c＃、wpf、mvvm、itemscontrol

私はこれを暗闇で撮影している探し回っていましたが、関連するものはほとんど見つかりませんでした。取得した現在のウィンドウでItemsControlを作成しようとしているので、ユーザーがウィンドウの[製品の追加]ボタンをクリックすると、水平方向に画面にUserControlを追加します。

まず、MVVMパターンを使用しています。MAINウィンドウのViewModelであるPricingViewModelがあります。 ComparisonViewModelという名前の2番目のビューモデルがあります。これは、ユーザーがPricingViewの[製品の追加]ボタンを押すたびに表示するUserControlのビューのViewModelです。私のコードに飛び込むと、宣言されたObservableCollectionとAddComparisonメソッドを取得しました。コレクションはVMのコンストラクターでインスタンス化されます。

    public ObservableCollection<ComparisonViewModel> Products { get { return _products; } }

public void AddComparison()
{
var products = IoC.Get<ComparisonViewModel>();
Products.Add(products);
}

次に、PricingViewModelのコレクションにバインドするPricingViewのItemsControlを取得しました。

            <ItemsControl ItemsSource="{Binding Path=Products}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>

私はそれを実行し、addを押した後、それはただ表示されますコレクション名。ユーザーが[比較の追加]を押したときに、新しい比較ユーザーコントロールでポップアップを実際に取得するにはどうすればよいですか？事前に助けてくれてありがとう！

回答：

あなたは、 ItemTemplate だから ItemsControl コレクション内の各アイテムをレンダリングする方法を知っています（デフォルトでは、呼び出しの結果を表示するだけです .ToString()）。

        <ItemsControl ItemsSource="{Binding Path=Products}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type namespace:ComparisonViewModel}">
<!-- EXAMPLE -->
<Border BorderBrush="Black"
BorderThickness="2">
<DockPanel Orientation="Horizontal">
<TextBlock Text="{Binding ComparisonResult}"
DockPanel.Dock="Right" />
<TextBlock Text="{Binding Name}"
DockPanel.Dock="Left" />
</DockPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>

</ItemsControl>

ItemsControlに2つのことを伝える必要があることがわかりました... 1つ目は、ItemsControlがどのような「もの」であるかです

        <ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

2番目は、コントロールの表示方法です。

        <ItemsControl.ItemTemplate>
<DataTemplate>
<c:Widget Margin="5" />
</DataTemplate>
</ItemsControl.ItemTemplate>

最終的なコードは次のようになります。

    <ItemsControl ItemsSource="{Binding Path=DynamicItems}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<c:Widget Margin="5" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

また、ウィンドウ宣言などでコントロール名前空間への参照を追加する必要があります。

    xmlns:c="clr-namespace:IHateEverything.Controls"