WPF 分組

来源:https://www.cnblogs.com/T-ARF/archive/2022/05/21/16295094.html
-Advertisement-
Play Games

分組和樹形結構是不一樣的。 樹形結構是以遞歸形式存在。分組是以鍵值對存在的形式,類似於GroupBy這樣的形式。 舉個例子 ID NAME SEX Class 1 張三 男 1 2 李四 女 2 3 王二 男 1 當以Sex為分組依據時則是 Key Value 男 1 張三 男 1 3 王二 男 1 ...


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

樹形結構是以遞歸形式存在。分組是以鍵值對存在的形式,類似於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修改而成,如果想要更加細微的畫面,建議自定義控制項。

 

具體代碼請參考源代碼

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本期教程人臉識別第三方平臺為虹軟科技,本文章講解的是人臉識別RGB活體追蹤技術,免費的功能很多可以自行搭配,希望在你看完本章課程有所收穫。 ...
  • 《零基礎學Java》 繪製幾何圖形 Java可以分別使用 Graphics 和 Graphics2D 繪製圖形,Graphics類 使用不同的方法繪製不同的圖形(drawLine()方法可f以繪製線、drawRect()方法用於繪製矩形、drawOval()方法用於繪製橢圓形)。 Graphics類 ...
  • 我使用Spring AOP實現了用戶操作日誌功能 今天答辯完了,復盤了一下系統,發現還是有一些東西值得拿出來和大家分享一下。 需求分析 系統需要對用戶的操作進行記錄,方便未來溯源 首先想到的就是在每個方法中,去實現記錄的邏輯,但是這樣做肯定是不現實的,首先工作量大,其次違背了軟體工程設計原則(開閉原 ...
  • 大家好,今天給大家介紹一款輕量、快速、穩定可編排的組件式規則引擎框架LiteFlow。 一、LiteFlow的介紹 LiteFlow官方網站和代碼倉庫地址 官方網站:https://yomahub.com/liteflow Gitee托管倉庫:https://gitee.com/dromara/li ...
  • 1. Netty源碼研究筆記(3)——Channel系列 依舊是通過先縱向再橫向的研究方法,在開篇中,我們發現不管是Sever還是Client,最終的啟動是通過調用channel的對應方法來完成的,而這個動作實際在channel綁定的eventLoop中執行。 接下來,我們繼續EchoSever、E ...
  • 轉載請註明來源 https://www.cnblogs.com/brucejiao/p/16188865.html 謝謝! 轉載請註明來源 https://www.cnblogs.com/brucejiao/p/16188865.html 謝謝! 轉載請註明來源 https://www.cnblog ...
  • 我的Notion Clowd.Squirrel Squirrel.Windows 是一組工具和適用於.Net的庫,用於管理 Desktop Windows 應用程式的安裝和更新。 Squirrel.Windows 對 Windows 應用程式的實現語言沒有任何要求,甚至無需服務端即可完成增量更新。 ...
  • NetCore中將SQLServer資料庫備份為Sql腳本 描述: 最近寫項目收到了一個需求, 就是將SQL Server資料庫備份為Sql腳本, 如果是My Sql之類的還好說, 但是在網上搜了一大堆, 全是教你怎麼操作SSMS的, 就很d疼! 解決方案: 通過各種查找資料, 還有一些老哥的幫助, ...
一周排行
    -Advertisement-
    Play Games
  • 概述:這個WPF項目通過XAML繪製汽車動態速度表盤,實現了0-300的速度刻度,包括數字、指針,並通過定時器模擬速度變化,展示了動態效果。詳細實現包括界面設計、刻度繪製、指針角度計算等,通過C#代碼與XAML文件結合完成。 新建 WPF 項目: 在 Visual Studio 中創建一個新的 WP ...
  • 概述:在WPF中使用`WpfAnimatedGif`庫展示GIF動畫,首先確保全裝了該庫。通過XAML設置Image控制項,指定GIF路徑,然後在代碼中使用庫提供的方法實現動畫控制。這簡化了在WPF應用中處理GIF圖的過程,提供了方便的介面來管理動畫播放和暫停。 當使用 WpfAnimatedGif  ...
  • 您是否曾經訪問過一個網站,它需要很長時間載入,最終你敲擊 F5 重新載入頁面。 即使用戶刷新了瀏覽器取消了原始請求,而對於伺服器來說,API也不會知道它正在計算的值將在結束時被丟棄,刷新五次,伺服器將觸發 5 個請求。 為瞭解決這個問題,ASP.NET Core 為 Web 伺服器提供了一種機制,就 ...
  • 本章將和大家分享如何通過 Elasticsearch 實現自動補全查詢功能。 一、自動補全-安裝拼音分詞器 1、自動補全需求說明 當用戶在搜索框輸入字元時,我們應該提示出與該字元有關的搜索項,如圖: 2、使用拼音分詞 要實現根據字母做補全,就必須對文檔按照拼音分詞。在 GitHub 上恰好有 Ela ...
  • using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Windows.Forms; namespace OOP { pub ...
  • 概述:以上內容詳細介紹了在C#中如何從另一個線程更新GUI,包括基礎功能和高級功能。對於WinForms,使用`Control.Invoke`;對於WPF,使用`Dispatcher.Invoke`。高級功能使用`SynchronizationContext`實現線程間通信,確保清晰、可讀性高的代碼 ...
  • Nuget包 Microsoft.Extensions.Telemetry.Abstractions 包含的新的日誌記錄source generator,它支持使用[LogProperties]將整個對象作為State與日誌一起記錄。 我將展示一種方法來控制如何使用[LogProperties]對象 ...
  • 支持.Net/.Net Core/.Net Framework,可以部署在Docker, Windows, Linux, Mac。 常見的ORM技術(比如:Entity Framework,Dapper,SqlSugar,NHibernate,等…),它們不是在做Sql語句的程式化變種,就是在做Sq ...
  • 一、引言 在現代應用程式開發中,尤其是在涉及I/O操作(如網路請求、文件讀寫等)時,非同步編程成為了提高性能和用戶體驗的關鍵技術。C#作為.NET框架下的主流開發語言,提供了強大的非同步編程支持,通過async/await關鍵字,可以讓開發者以同步的方式編寫非同步代碼,極大地簡化了非同步編程的複雜性。本文將 ...
  • 一、引言 在.NET開發中,操作Office文檔(特別是Excel和Word)是一項常見的需求。然而,在伺服器端或無Microsoft Office環境的場景下,直接使用Office Interop可能會面臨挑戰。為瞭解決這個問題,開源庫NPOI應運而生,它提供了無需安裝Office即可創建、讀取和 ...