5

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

手始めに、私はMVVMパターンを使用しており、MAINウィンドウのViewModelであるPricingViewModelを持っています。これは、ユーザーが 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>

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

4

2 に答える 2

4

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>
于 2012-09-19T00:53:38.873 に答える
4

私は、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"
于 2013-11-22T19:54:39.560 に答える