web-dev-qa-db-ja.com

WPF MVVMで動的にコントロールを追加する

ボタンをクリックすると、3つのコンボボックスと2つのテキストボックスを含む新しい行が追加される動的検索ビューに取り組んでいます。

これを行うにはどうすればよいですか？

wpfmvvm-light
20
spiritqueen

本当にmvvmを実行したい場合は、「コントロールを追加する方法」を忘れてください。あなたはする必要はありません、あなたのviewmodelsについて考えてください-WPFはあなたのために制御を作成します:)

あなたの場合、SearchViewModelとSearchEntryViewmodelがあるとしましょう。

_public class SearchEntryViewmodel
{
    //Properties for Binding to Combobox and Textbox goes here
}


public class SearchViewModel 
{
    public ObservableCollection<SearchEntryViewmodel> MySearchItems {get;set;}
    public ICommand AddSearchItem {get;}
}
_

これまでは、ユーザーコントロール/ビューについて考える必要はありませんでした。 SearchViewでItemsControlを作成し、ItemsSourceをMySearchItemsにバインドします。

_<ItemsControl ItemsSource="{Binding MySearchItems}"/> 
_

ItemsControl(just the ToString() atm)にすべてのSearchEntryViewmodelsが表示されます。

3Comboboxを使用してすべてのSearchEntryViewmodelを表示するという要件に合わせるには、リソースでDataTemplateを定義するだけです。

_<DataTemplate DataType="{x:Type local:SearchEntryViewmodel}">
    <StackPanel Orientation="Horizontal">
        <Combobox ItemsSource="{Binding MyPropertyInSearchEntryViewmodel}"/>
        <!-- the other controls with bindings -->
    </StackPanel>
</DataTemplate>
_

それだけです:)そして、「コントロールを動的に追加するにはどうすればよいですか？」について考える必要はありません。コレクションに新しいSearchEntryViewmodelを追加するだけです。

このアプローチはViewmodel Firstと呼ばれ、MVVMを実行する最も簡単な方法だと思います。

55
blindmeis

MVVMとWPFの両方が初めての場合は、Jason DollingerによるC＃/ WPF/MVVMアプリケーションの構築方法に関する非常にすばらしいビデオチュートリアルがあり、こちらから入手できます on lab49 。彼がこの驚くべきビデオで開発したすべてのソースコードも入手できます lab49の右ここ

見た後は、検索ビューの開発に問題はないはずです。

0
Mare Infinitus

1つのオプションは、新しいインスタンスを作成することにより、バックエンドでTextBoxとコンボボックスを作成できることです。しかし、より良いオプションは、追加したいすべてのtexboxとコンボボックスを含み、希望するフォーマットで1つのユーザーコントロールを作成できることです。ボタンが押されたときに作成した後、このユーザーコントロールのインスタンスを作成し、コントロールのSetValueプロパティを使用してグリッドまたはその他のコントロールに設定できます。 。

WPFとMVVMを初めて使用する場合は、このブログを読んで理解してください。

https://radhikakhacharia.wordpress.com/2012/06/01/wpf-tutorial-3/

https://radhikakhacharia.wordpress.com/2012/02/13/model-view-viewmodel/

0
R76