2012-05-30 29 views
6

私はWPFとMVVMの両方に新しいので、これが愚かな質問であれば前向きにお祈りします。WPFとMVVMを使用したコレクションのグループ化

問題: MVVMデザインパターンを使用してアイテムのグループリストを作成しようとしています。私はコードの背後でそれを行うことができますが、より洗練されたソリューションを好むでしょう。

詳細

  • のは、私は動物のコレクションがあるとしましょう

    :馬、オオカミ、サル、トラ、ホッキョクグマ、シマウマ、バットを、など
  • これらの動物は、大陸ごとにグループ化されて:北米、アフリカ、南極など

ゴール:ラップパネル内で、グループトグルボタンを作成したいと思います。たとえば、北米で見つかった各動物のToggleButtonsを持つ「北米」GroupBoxがあります。次に、 "Africa"というヘッダーを持つGroupBoxがあり、グループボックス内にはアフリカのすべての動物が含まれます。

MVVMデザインパターンを使用してObservableCollectionにバインドし、データテンプレートを使用して必要なトグルボタンを作成できます。私が苦労しているところでは、私は動物をグループ化する方法を知らない。私が必要とするのは、従うべきガイドラインだけです。どんな助けもありがとう。

答えて

10

、自身がViewModelに上の動物コレクションに結合することがCollectionViewSourceにアイテムのソースを設定します。 - 例から撮影この

<ItemsControl.GroupStyle> 
    <GroupStyle> 
     <GroupStyle.HeaderTemplate> 
     <DataTemplate> 
      <TextBlock FontWeight="Bold" FontSize="15" 
       Text="{Binding Path=Name}"/> 
     </DataTemplate> 
     </GroupStyle.HeaderTemplate> 
    </GroupStyle> 
</ItemsControl.GroupStyle> 

のようなものを

<CollectionViewSource.GroupDescriptions> 
    <PropertyGroupDescription PropertyName="Continent" /> 
</CollectionViewSource.GroupDescriptions> 

ます。また、どんなアイテムにグループのスタイルを設定する必要がありますあなたが持っているコントロール:CollectionViewSourceは、このような何かを、グループ化することができますこのページの - http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.groupstyle.aspx

これはHeaderTemplateを設定していますが、ちょっと遊んだら、各グループにコンテナスタイルを設定できるはずです。

希望すると便利です。

更新: 私はこのことについてあまりよく分からなかったので、私はコードに急いでいました。 「トグルボタンは」「ラジオボタン」であると仮定すると、これは私が作ってみたものです:

<GroupStyle> 
    <GroupStyle.ContainerStyle> 
     <Style TargetType="{x:Type GroupItem}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate> 
        <GroupBox Margin="10" Header="{Binding Name}"> 
        <GroupBox.Content> 
         <ItemsPresenter /> 
        </GroupBox.Content> 
        </GroupBox> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     </Style> 
    </GroupStyle.ContainerStyle> 
</GroupStyle> 
:また

<Grid> 
    <Grid.Resources> 
     <CollectionViewSource x:Key="Animals" Source="{Binding}"> 
      <CollectionViewSource.GroupDescriptions> 
       <PropertyGroupDescription PropertyName="Continent" /> 
      </CollectionViewSource.GroupDescriptions> 
     </CollectionViewSource> 
    </Grid.Resources> 

    <ItemsControl ItemsSource="{Binding Source={StaticResource Animals}}"> 
     <ItemsControl.GroupStyle> 
      <x:Static Member="GroupStyle.Default" /> 
     </ItemsControl.GroupStyle> 

     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <RadioButton Content="{Binding Name}" GroupName="{Binding Continent}" /> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Grid> 

、あなたがライン<x:Static Member="GroupStyle.Default" />を置き換えることにより、GroupBoxのよう各グループを表示することができます

しかし、ラジオボタンは単独では相互に排他的ではありません(ListItemコントロールでラップされているか、グループ化の親の1つの子になるためです)。このコードはMSDNのGroupStyleエントリから盗まれたり変更されたりして、詳細情報を表示したい(グループの表示/非表示のエクスパンダがある例):http://msdn.microsoft.com/en-us/library/system.windows.controls.groupstyle.aspx

ポイントを一度も逃したかどうか教えてください。

+0

ありがとうございます! – James

+0

問題はありません、私はそれが助けて欲しい! –

+0

偉大な答え!ありがとう – animaonline

関連する問題