WPF 分組

ARM830發表於2022-05-21

分組和樹形結構是不一樣的。

樹形結構是以遞迴形式存在。分組是以鍵值對存在的形式，類似於GroupBy這樣的形式。

舉個例子

ID NAME SEX Class
1 張三 男 1
2 李四 女 2
3 王二 男 1

當以Sex為分組依據時則是

Key Value
男 1 張三 男 1
3 王二 男 1
女 2 李四 女 2

 

那麼，我們如何在WPF使用呢？當然了 我們在WPF中的表現形式和圖表稍微不同的。

首先，我們介紹如何分組。

我們的資料模型如下

  public enum Sex
    {
        男,
        女
    }
    public class Test
    {
        public string Name { get; set; }
        public int Id { get; set; }
        public Sex SexType { get; set; }
        public int Class { get; set; }
    }

 

非常的簡單，下面的程式碼是我們的ViewModel

   public class ViewModel
    {
        public ViewModel()
        {
            for (int i = 0; i < 10; i++)
            {
                Test t = new Test();
                t.Class = i % 2 == 0 ? 1 : 2;
                t.Id = i * 100;
                t.Name = "Name" + i;
                t.SexType = i % 2 == 0 ? Sex.男 : Sex.女;
                Model.Add(t);
            }

            for (int i = 0; i < 10; i++)
            {
                Test t = new Test();
                t.Class = i % 2 == 0 ? 3 : 4;
                t.Id = i * 200;
                t.Name = "Name" + i;
                t.SexType = i % 2 == 0 ? Sex.男 : Sex.女;
                Model.Add(t);
            }
        }
        private ObservableCollection<Test> mode = new ObservableCollection<Test>();

        public ObservableCollection<Test> Model
        {
            get { return mode; }
            set { mode = value; }
        }

    }

 

就是簡單的新增一些資料。

我們的前臺介面上就是datagrid。

然後是最重要的分組xaml程式碼

  <CollectionViewSource x:Key="cvs" Source="{Binding Model}">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="SexType"/>
                <PropertyGroupDescription PropertyName="Class"/>
            </CollectionViewSource.GroupDescriptions>
 </CollectionViewSource>

Groupscriptptions內就是我們分組依據。

PropertyName是分組依據，是集合內的屬性。

當我們新增了多個引數就還會產生層級分組，就是上一個分組基礎上再次分組。

比如我們最開始的資料多次分組。

一開始SEX，我們再加上一個class分組依據：

Key Value
男 Key value
1 1 張三 男 1
3 王二 男 1
女 Key value
2 2 李四 女 2

 

當我們建立完分組後，則是佈局

剩下就佈局了。

佈局就是（Datagrid,Listbox.）.GroupStyle了，

其中

Panel屬性是決定佈局皮膚的，通常與你使用GroupStyle的空間有關。

DataGrid的GroupStyle的Panel使用DataGridRowsPresenter

因為Panel屬性預設是StackPanel，所以DataGrid使用分組時，列的寬度設定為*時 可能出現錯誤。

所以要注意

 

ContainerStyle是決定生成GroupItem的樣式，通常自己發揮就好了

由於分組之後的集合的型別是微軟內部類。

最常用的屬性

Name

Items

對應我圖表中的Key和Value，換據說在ContainerStyle中你只有這兩個常用屬性可以繫結，Items是你分組後 ，你自己的型別的集合，這個時候就可以使用你自己的屬性進行繫結了。

GroupStyle屬性是一個集合，可以存在多個子項，子項的名稱也是GroupStyle.

多個子項是對應不同的分級，既第一個子項對應第一層分組，第二對應第二層。

於是乎

我們給出這樣的佈局

     <DataGrid HeadersVisibility="None"  AutoGenerateColumns="False" CanUserAddRows="False" ItemsSource="{Binding Source={StaticResource cvs}}">
            <DataGrid.GroupStyle>
                <GroupStyle>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <DataGridRowsPresenter/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="GroupItem">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Expander  ExpandDirection="Right"   Header="{Binding Name}" IsExpanded="True">
                                            <ItemsPresenter/>
                                        </Expander>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
                <GroupStyle>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="GroupItem">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Border>
                                            <Expander  ExpandDirection="Down"   Header="{Binding Name}" IsExpanded="True">
                                                <Expander.HeaderTemplate>
                                                    <DataTemplate>
                                                        <Grid Background="Yellow"  >
                                                            <TextBlock >
                                                            <Run Text="班級:"/>
                                                            <Run Text="{Binding Mode=OneWay}"/>
                                                            </TextBlock>
                                                        </Grid>
                                                    </DataTemplate>
                                                </Expander.HeaderTemplate>
                                                <ItemsPresenter/>
                                            </Expander>
                                        </Border>

                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
            </DataGrid.GroupStyle>
            <DataGrid.Columns>
                <DataGridTextColumn Width="*" Header="姓名" Binding="{Binding Name}"/>
                <DataGridTextColumn Width="*" Header="性別" Binding="{Binding SexType}"/>
                <DataGridTextColumn Width="*" Header="Id" Binding="{Binding Id}"/>
            </DataGrid.Columns>
        </DataGrid>

再稍微修改下樣式，於是乎我們得到了這樣的畫面

 

 因為我們是通過expander修改而成，如果想要更加細微的畫面，建議自定義控制元件。

 

具體程式碼請參考原始碼

 

相關文章