複数のインタラクティブUI要素を持つデータグループのリスト

Question

現在、WPFアプリケーションで作業しています。 基本はうまくいきますが、私は現時点で何をしようとしているのかという問題にぶつかりました。何とか動くかもしれない方法がたくさんあるようですが、私はそれが必要以上に困難になる道を行くと確信しています。

私が必要とするのは、UIを実装する最も簡単な方法に関するガイダンスです。

私はc＃4、wpfとMVVMパターンを使用しています。

私が表示したいんだデータは、次のようになります。

obj1とobj2が---- < ---- < OBJ3 すなわち単一OBJ1があり、多くのobj2の年代の多く（特に1-3）を有しますobj3の

私の画面では、関連するobj3要素が下にネストされたobj2要素のリスト/データグリッド型ビューを表示する必要があります。

obj2要素には、いくつかのテキスト値とチェックボックス（表示されたときに、ビューモデルで適切なコマンドを起動する）を表示する必要があります。 obj3要素は画像を表示する必要があります。テキストをクリックしてクリック可能にする必要があります（ビューモデルに対して適切なコマンドを実行します）。

最初は、obj3要素のカスタムコントロール、ItemsControlに基づくカスタムコントロール、obj3要素のリスト、obj2要素の別のカスタムコントロール、最後にobj2要素のリストを表示する別のカスタムコントロールの作成を検討しました。

しかし、ちょっとしたことで、私は大規模な複雑化を感じています。 ユーザーコントロールを使用できますか？それらはまったく必要なのでしょうか、テンプレートを使って通常のListコントロールを使うことはできますか？

いくつかのポインタは大歓迎です。おかげさまで

Answer 1

私はので、私は共有したいと考えて欲しかったと私は答えは、それぞれの項目についてのデータテンプレートと関連付けられたビューモデルとネストされたリストコントロールであることが判明...この作業を取得

をかなりの時間を費やしリスト。リストコントロールは、WinFormsよりもはるかに柔軟なWPFで、あなたはそれを使って何でもできるのです。

私は多くの異なるサイト上で助けたが、コアの詳細はDr.WPFから来た多くの異なるものを見つけた：http://drwpf.com/blog/category/collections/

それはかなり長いですと、私はすべてのコードを投稿しません。ここ

<ListView Name="list" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
    HorizontalContentAlignment="Stretch" Focusable="False" 
    IsSynchronizedWithCurrentItem="True" ItemsPanel="{StaticResource VerticalItemsPanel}" 
    ItemContainerStyle="{StaticResource Obj2ContainerStyle}" ItemsSource="{Binding Obj2List}"> 
</ListView> 

キー物事がItemsPanelとItemContainerStyleある：それのコアは、しかし最初のセットアップにユーザーコントロールのリストビューです。これらは、すべてのリストアイテムと各リストアイテムのスタイルをそれぞれ含むパネルのプロパティを定義します。 これらはユーザーコントロールのリソースに含まれています。

<ItemsPanelTemplate x:Key="VerticalItemsPanel"> 
    <StackPanel Orientation="Vertical" Focusable="False" HorizontalAlignment="Stretch" /> 
</ItemsPanelTemplate> 
<Style x:Key="Obj2ContainerStyle" TargetType="{x:Type ListViewItem}"> 
    <Style.Triggers> 
     <DataTrigger Binding="{Binding Path=Enabled}" Value="False"> 
      <Setter Property="Background" Value="LightSalmon"></Setter> 
     </DataTrigger> 
     <DataTrigger Binding="{Binding Path=Enabled}" Value="True"> 
      <Setter Property="Background" Value="PaleGreen"></Setter> 
     </DataTrigger> 
    </Style.Triggers> 
</Style> 

私もデータテンプレートを持っています。第一は、第2のデータテンプレートは、上記の別のリストビューが含まObj2ViewModel

<DataTemplate DataType="{x:Type src:Obj2ViewModel}"> 
    <ContentControl x:Name="Obj2Host" Focusable="False" Content="{Binding}" 
         ContentTemplate="{StaticResource Obj2ViewTemplate}" /> 
</DataTemplate> 

<DataTemplate x:Key="Obj2ViewTemplate"> 
    <DataTemplate.Resources> 
     <ItemsPanelTemplate x:Key="HorizontalItemsPanel"> 
      <StackPanel Orientation="Horizontal" /> 
     </ItemsPanelTemplate> 
     <Style x:Key="Obj3ContainerStyle" TargetType="{x:Type ListViewItem}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ListBoxItem}"> 
         <Grid> 
          <Rectangle StrokeThickness="1" Stroke="#FF000000" Margin="0" /> 
          <ContentPresenter x:Name="ContentHost" Margin="{TemplateBinding Padding}" 
                   HorizontalAlignment="Center" VerticalAlignment="Center" /> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    <Style x:Key="LabelStyle" TargetType="{x:Type Label}"> 
     <Setter Property="Padding" Value="0,0,4,0" /> 
     <Setter Property="HorizontalAlignment" Value="Left" /> 
    </Style> 
    <Style x:Key="DataStyle" TargetType="{x:Type TextBlock}"> 
     <Setter Property="Padding" Value="0,0,4,0" /> 
     <Setter Property="HorizontalAlignment" Value="Left" /> 
     <Setter Property="FontWeight" Value="Bold" /> 
    </Style> 
    </DataTemplate.Resources> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="*" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="*" /> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="Auto" /> 
     </Grid.ColumnDefinitions> 
     <Label Grid.Row="0" Grid.Column="0" Content="{StaticResource Label1Text}" Style="{StaticResource LabelStyle}"/> 
     <Label Grid.Row="1" Grid.Column="0" Content="{StaticResource Label2Text}" Style="{StaticResource LabelStyle}"/> 
     <Label Grid.Row="2" Grid.Column="0" Content="{StaticResource Label3Text}" Style="{StaticResource LabelStyle}"/> 
     <Label Grid.Row="3" Grid.Column="0" Content="{StaticResource Label4Text}" Style="{StaticResource LabelStyle}"/> 
     <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Property1}" Style="{StaticResource DataStyle}"/> 
     <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Property2}" Style="{StaticResource DataStyle}"/> 
     <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Property3}" Style="{StaticResource DataStyle}"/> 
     <TextBlock Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Property4}" Style="{StaticResource DataStyle}"/> 
     <ListView Grid.Row="0" Grid.RowSpan="3" Grid.Column="2" Name="Obj3List" 
        HorizontalAlignment="Right" VerticalAlignment="Center" 
        IsSynchronizedWithCurrentItem="True" 
        ItemsPanel="{StaticResource HorizontalItemsPanel}" 
        ItemsSource="{Binding Obj3s}" 
        ItemContainerStyle="{StaticResource Obj3ContainerStyle}" 
        BorderThickness="0" 
        Background="Transparent"> 
     </ListView> 
     <CheckBox Grid.Row="0" Grid.RowSpan="4" Grid.Column="3" VerticalAlignment="Center" 
        IsChecked="{Binding Property5}" IsEnabled="{Binding NotExpired}" > 
     </CheckBox> 
     <Image Grid.Row="0" Grid.RowSpan="4" Grid.Column="4" Source="{StaticResource DeleteIcon}" Stretch="None"> 
      <i:Interaction.Triggers> 
       <i:EventTrigger EventName="MouseUp"> 
        <cmd:EventToCommand PassEventArgsToCommand="False" Command="{Binding DeleteObj2Command, Mode=OneWay}"/> 
       </i:EventTrigger> 
      </i:Interaction.Triggers> 
     </Image> 
    </Grid> 
</DataTemplate> 

タイプのオブジェクトを表示するための第二を使用するようにシステムに指示します。これは、Obj3項目を含むものです。 これらのスタイルは、DataTemplateのリソースセクションで指定します。 最後に、ユーザーコントロールのリソースもOBJ3要素のためのデータテンプレートが含まれています

<DataTemplate DataType="{x:Type src:Obj3ViewModel}"> 
    <ContentControl x:Name="Obj3Host" Focusable="False" Content="{Binding}" 
     ContentTemplate="{StaticResource Obj3ViewTemplate}" /> 
</DataTemplate> 
<DataTemplate x:Key="Obj3ViewTemplate"> 
    <Image Source="{Binding Image}" Stretch="None"> 
     <i:Interaction.Triggers> 
      <i:EventTrigger EventName="MouseUp"> 
       <cmd:EventToCommand PassEventArgsToCommand="False" Command="{Binding ToggleEnabledCommand, Mode=OneWay}"/> 
      </i:EventTrigger> 
     </i:Interaction.Triggers> 
    </Image> 
</DataTemplate> 

注EventToCommandのものがMVVMライトツールキットのおかげであること。これは標準の.NETのことではありません。