天天看點

如何用界面元件DevExpress WPF建立Excel式的過濾功能?趕緊Get

DevExpress WPF擁有120+個控件和庫,将幫助您傳遞滿足甚至超出企業需求的高性能業務應用程式。通過DevExpress WPF能建立有着強大互動功能的XAML基礎應用程式,這些應用程式專注于當代客戶的需求和建構未來新一代支援觸摸的解決方案。

DevExpress WPF在v19.2版本中添加了新的excel樣式下拉過濾器,旨在簡化使用,并為最終使用者提供各種資料分析增強功能,這個下拉過濾器還被設計為為開發人員擴充定制功能。

複制下面連結擷取DevExpress WPF(PC端):www.evget.com/product/2346/download

在v19.2及之後的版本中,這個下拉過濾器預設在以下幾個控件中使用:

  • Data Grid
  • TreeList
  • Pivot Grid
如何用界面元件DevExpress WPF建立Excel式的過濾功能?趕緊Get

接下來我們将詳細介紹Excel樣式下拉過濾器的功能。

記錄計數顯示

在應用篩選器時,您可能希望知道有多少條記錄與給定篩選器值比對,Excel-Style Drop-Down Filter在過濾器值旁邊顯示一個記錄計數。

如何用界面元件DevExpress WPF建立Excel式的過濾功能?趕緊Get

日期時間間隔

Excel-Style Drop-Down Filter允許您在其中組合不同的日期間隔。

如何用界面元件DevExpress WPF建立Excel式的過濾功能?趕緊Get

資料分析過濾器

您可以在xcel-Style Drop-Down Filter中應用以下數字過濾器:

  • Top / Bottom N
  • Above / Below Average
  • Unique / Duplicate

這些篩選器允許分析資料網格中的資訊,而無需構造複雜的篩選條件。

如何用界面元件DevExpress WPF建立Excel式的過濾功能?趕緊Get

條件格式過濾器

Data Grid和TreeList允許您指定條件格式規則并給予這些規則應用過濾器。

如何用界面元件DevExpress WPF建立Excel式的過濾功能?趕緊Get

分組過濾器

在Data Grid和TreeList中,可以對來自兩個或多個列的篩選值進行分組,并将結果顯示為一個分層檢查清單,這個功能允許使用者根據多個列篩選資料。

如何用界面元件DevExpress WPF建立Excel式的過濾功能?趕緊Get

要合并此功能,請将ColumnBase.FilterPopupGroupFields屬性設定為針對篩選器值進行分組的字段的名稱,名稱之間用逗号、分号或空格隔開,字段名的順序決定了組内的層次結構。

<dxg:GridControl>
<dxg:GridControl.Columns>
<dxg:GridColumn FieldName="ID" />
<dxg:GridColumn FieldName="Trademark" />
<dxg:GridColumn FieldName="Model" FilterPopupGroupFields="Trademark;Model" />
</dxg:GridControl.Columns>
...
</dxg:GridControl>           

預定義的過濾器

Excel-style Drop-Down Filter允許您附帶預定義的過濾器,預定義過濾器顯示在Filter Rules頁籤中。

如何用界面元件DevExpress WPF建立Excel式的過濾功能?趕緊Get

Data Grid和TreeList允許您使用ColumnBase.PredefinedFilters 屬性指定這樣的過濾器。

<dxg:GridColumn FieldName="UnitPrice">
<dxg:GridColumn.PredefinedFilters>
<dxfui:PredefinedFilterCollection>
<dxfui:PredefinedFilter Name="Less than 10" Filter="?p ≤ 10" />
<dxfui:PredefinedFilter Name="Between 10 and 50"
Filter="?p > 10 and ?p ≤ 50" />
<dxfui:PredefinedFilter Name="Between 50 and 100"
Filter="?p > 50 and ?p ≤ 100" />
<dxfui:PredefinedFilter Name="Greater than 100" Filter="?p > 100" />
</dxfui:PredefinedFilterCollection>
</dxg:GridColumn.PredefinedFilters>
</dxg:GridColumn>           

自定義

使用 ColumnBase.CustomColumnFilterPopupTemplate 屬性來指定一個自定義資料模闆,在這個模闆中,定義一個篩選器元素并指定其設定。

自定義過濾器彈出内容

如何用界面元件DevExpress WPF建立Excel式的過濾功能?趕緊Get
<dxg:GridControl x:Name="grid" ItemsSource="...">
<dxg:GridControl.Columns>
...
<dxg:GridColumn FieldName="Quantity">
<dxg:GridColumn.CustomColumnFilterPopupTemplate>
<DataTemplate>
<dxfui:RangeFilterElement x:Name="PART_FilterElement"/>
</DataTemplate>
</dxg:GridColumn.CustomColumnFilterPopupTemplate>
</dxg:GridColumn>
...
</dxg:GridControl.Columns>
</dxg:GridControl>           

自定義運算符清單

如何用界面元件DevExpress WPF建立Excel式的過濾功能?趕緊Get
<dxg:GridColumn FieldName="OrderDate">
<dxg:GridColumn.CustomColumnFilterPopupTemplate>
<DataTemplate>
<dxfui:ExcelStyleFilterElement x:Name="PART_FilterElement"
QueryOperators="OnExcelStyleFilterQueryOperators"/>
</DataTemplate>
</dxg:GridColumn.CustomColumnFilterPopupTemplate>
</dxg:GridColumn>           
void OnExcelStyleFilterQueryOperators(object sender,
ExcelStyleFilterElementQueryOperatorsEventArgs e) {

if(e.FieldName == "OrderDate") {
e.Operators.Clear();
e.Operators.Add(new ExcelStyleFilterElementOperatorItem(
ExcelStyleFilterElementOperatorType.Equal));
e.Operators.Add(new ExcelStyleFilterElementOperatorItem(
ExcelStyleFilterElementOperatorType.NotEqual));
}
}           

建立自定義運算符

如何用界面元件DevExpress WPF建立Excel式的過濾功能?趕緊Get
<dxg:GridColumn FieldName="OrderDate">
<dxg:GridColumn.CustomColumnFilterPopupTemplate>
<DataTemplate>
<dxfui:ExcelStyleFilterElement x:Name="PART_FilterElement"
QueryOperators="OnExcelStyleFilterQueryOperators"/>
</DataTemplate>
</dxg:GridColumn.CustomColumnFilterPopupTemplate>
</dxg:GridColumn>           
const string CustomFunctionName = "LastYears";
var currentYear = DateTime.Now.Year;

ICustomFunctionOperatorBrowsable customFunction = CustomFunctionFactory.Create(
CustomFunctionName, (DateTime date, int threshold) => {
return currentYear >= date.Year && currentYear - date.Year <= threshold;
}
);

void OnExcelStyleFilterQueryOperators(object sender,
ExcelStyleFilterElementQueryOperatorsEventArgs e) {

if(e.FieldName == "OrderDate") {
// ...
var customFunctionEditSettings = new BaseEditSettings[] {
new TextEditSettings { MaskType = MaskType.Numeric, Mask = "D",
MaskUseAsDisplayFormat = true }
};
e.Operators.Add(new ExcelStyleFilterElementOperatorItem(CustomFunctionName,
customFunctionEditSettings) { Caption = "Last Years" });
}
}           

自定義操作數模闆

如何用界面元件DevExpress WPF建立Excel式的過濾功能?趕緊Get
UserControl.Resources>
<DataTemplate x:Key="ternaryTemplate">
<dxe:TrackBarEdit Minimum="0" Maximum="300" MinWidth="120" TickPlacement="None">
<dxe:TrackBarEdit.EditValue>
<MultiBinding Converter="{local:TrackBarEditRangeConverter}">
<Binding Path="LeftValueItem.Value"/>
<Binding Path="RightValueItem.Value"/>
</MultiBinding>
</dxe:TrackBarEdit.EditValue>
<dxe:TrackBarEdit.StyleSettings>
<dxe:TrackBarRangeStyleSettings />
</dxe:TrackBarEdit.StyleSettings>
</dxe:TrackBarEdit>
</DataTemplate>
</UserControl.Resources>

...

<dxg:GridColumn FieldName="Quantity">
<dxg:GridColumn.CustomColumnFilterPopupTemplate>
<DataTemplate>
<dxfui:ExcelStyleFilterElement x:Name="PART_FilterElement"
QueryOperators="OnExcelStyleFilterQueryOperators"/>
</DataTemplate>
</dxg:GridColumn.CustomColumnFilterPopupTemplate>
</dxg:GridColumn>
void OnExcelStyleFilterQueryOperators(object sender,
ExcelStyleFilterElementQueryOperatorsEventArgs e) {

if(e.FieldName == "Quantity") {
var template = (DataTemplate)FindResource("ternaryTemplate");
e.Operators[ExcelStyleFilterElementOperatorType.Between].OperandTemplate =
template;
e.Operators[ExcelStyleFilterElementOperatorType.NotBetween].OperandTemplate =
template;
}
}           

繼續閱讀