9

私は WPF と MVVM の両方に慣れていないので、これがばかげた質問である場合は、事前に許しを請います。

問題: MVVM デザイン パターンを使用して項目のグループ化されたリストを作成しようとしています。私はコードビハインドでそれを行うことができますが、よりエレガントなソリューションを好むでしょう.

詳細

  • 馬、オオカミ、サル、トラ、ホッキョクグマ、シマウマ、コウモリなどの動物のコレクションがあるとしましょう。
  • これらの動物は、北アメリカ、アフリカ、南極など、大陸ごとにグループ化されています。

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

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

4

1 に答える 1

14

ビューで、アイテムのソースを、それ自体がViewModelのAnimalsコレクションにバインドするCollectionViewSourceに設定します。CollectionViewSourceは、次のようにグループ化できます。

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

また、持っているアイテムコントロールにグループスタイルを設定する必要があります-このようなもの

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

このページの例から抜粋-http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.groupstyle.aspx

これでHeaderTemplateが設定されますが、少し遊んでみると、グループごとにコンテナスタイルを設定できるはずです。

お役に立てれば！

更新： 私はこれについてあまり確信が持てなかったので、コードをざっと見ました。「トグルボタン」が「ラジオボタン」であると仮定すると、これは私が思いついたものです。

<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として表示できます。

<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>

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

私がポイントをまったく逃したかどうか私に知らせてください。

于 2012-05-30T08:59:59.267 に答える