0

現在、wpf アプリケーションで PRISM を使用して MVVM パターンを使用しており、シェル、ビュー、およびビューモデルをすべて注入して結合しています。(私の知る限り... これは私の最初の wpf アプリです)。私のモジュール定義は、すべてを適切に結び付けます。

ビューの 1 つに一貫性のないサイズのオブジェクトのコレクションを表示する必要があり、バックエンドですべて手動で作成するのではなく、新しいユーザー コントロールを作成し、それを個々のデータ エンティティにバインドして、保持できるようにしたいと考えています。それは自己認識と管理ですが、これらのコントロールは私のビューのグリッドまたはパネルに追加する必要があります. 前の例に続いて、小さい部分でも柔軟に保つために、インターフェイス + コンクリート パスをたどることにしました。

まず、これで正しい道を進んでいますか？ASP.Net では、ディスプレイ用のテンプレートを作成し、モデルをアタッチします。

第 2 に、メイン ビューを作成しているときに、コンテナーでこの「テンプレート」ユーザー コントロールを解決する方法はありますか?

もともと私のコードはこれを見ていたので、別のxamlに完全に置き換えたい:

            foreach (var node in nodes) {
                var p = new StackPanel();
                p.DataContext = node;
                p.Children.Add(new Label() { Content = node.Name });
                p.Children.Add(new TextBox() { Text = "" });
                NodesControl.Children.Add(p);
            }
4

1 に答える 1

2

DataTemplates に任せてください。

次の ViewModel を使用した単純なウィンドウが与えられます。

public sealed class ViewModel : INotifyPropertyChanged
{
    private object _derper;

    public event PropertyChangedEventHandler PropertyChanged = (o, e) => { };

    public object Derper
    {
        get { return this._derper; }
        set
        {
            this._derper = value;
            PropertyChanged(this, new PropertyChangedEventArgs("Derper"));
        }
    }

    public ICommand OnDerp { get; set; }

    public ViewModel()
    {
        OnDerp = new DerpCommand(this);
    }
}

プロパティ Derper のさまざまな値に対してさまざまな UI を表示したいと考えています。このプロパティは、DerpCommand によって設定されます。

public sealed class DerpCommand : ICommand
{
    public event EventHandler CanExecuteChanged;
    private readonly ViewModel _viewModel;
    private int _count = 0;
    public bool CanExecute(object parameter)
    {
        return true;
    }
    public void Execute(object parameter)
    {
        _viewModel.Derper = _count % 2 == 0 ?
            (object)new Derp() 
                { Herp = "Derped " + (++_count / 2 + 1) + " times." } :
            new Herp() 
                { Derp = "Herped " + (_count++ / 2 + 1) + " times." };
    }
    public DerpCommand(ViewModel viewModel)
    {

        this._viewModel = viewModel;
    }
}

実行回数に基づいてとViewModel.Derperのインスタンス間での値を切り替えるだけです。これらのモデルは単一のプロパティを持つ POCO であるため、これらのモデルの実装は省略します。退屈なもの。HerpDerp

ここで、ViewModel.DerperプロパティのタイプがDerpの場合、モデルの値を表示する黒いテキストの前景に素敵なヤグルマギクの青い背景が必要です。タイプが の場合Herp、黒の背景に白のテキストが必要です。したがってDataTemplates、それぞれに以下を作成します。

<DataTemplate
    DataType="{x:Type t:Derp}">
    <TextBlock
        Padding="50"
        Background="CornflowerBlue"
        Text="{Binding Herp}" />
</DataTemplate>
<DataTemplate
    DataType="{x:Type t:Herp}">
    <TextBlock
        Padding="50"
        Foreground="White"
        Background="Black"
        Text="{Binding Derp}" />
</DataTemplate>

DataTemplateそれぞれのDataContextは、指定された のモデルのインスタンスであることに注意してくださいDataType。

これらをどのように配線しますか？私たちはしません。DataTemplateを追加してそのプロパティを にContentControlバインドすることにより、適切な を表示する UI 内の領域を指定するだけです。UI全体は次のとおりです。ContentViewModel.Derper

<Window
    x:Class="DataTemplateExample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:t="clr-namespace:DataTemplateExample"
    Title="DataTemplate example"
    Height="350"
    Width="525">
    <Window.DataContext>
        <t:ViewModel />
    </Window.DataContext>
    <Window.Resources>
        <DataTemplate
            DataType="{x:Type t:Derp}">
            <TextBlock
                Padding="50"
                Background="CornflowerBlue"
                Text="{Binding Herp}" />
        </DataTemplate>
        <DataTemplate
            DataType="{x:Type t:Herp}">
            <TextBlock
                Padding="50"
                Foreground="White"
                Background="Black"
                Text="{Binding Derp}" />
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition
                Height="auto" />
        </Grid.RowDefinitions>
        <ContentControl
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Content="{Binding Derper}" />
        <Button
            Grid.Row="1"
            Command="{Binding OnDerp}">Click me to derp</Button>
    </Grid>
</Window>

そして、それはどのように見えるか：

ここに画像の説明を入力

結局のところ、Unity を使用して UI を接続したい場合は、Unity をDataTemplateSelector使用してテンプレートを探す独自のものを作成できます。時間の無駄です。流れに乗ってください。

于 2013-09-13T18:07:11.773 に答える