This example places DXCollectionView Filter UI Elements into a BottomSheet control.

Related Controls and Their Properties:

• BottomSheet: HalfExpandedRatio
• DXCollectionView: ItemTemplate
• DXButton: Clicked, Command
• TabView: ItemHeaderTapped, Command
• FilterCheckedListItem: Context, ShowSearchPanel
• Chip: Text, TextColor, BorderThickness

• This project uses Filtering UI Elements. You can click a Chip to display a BottomSheet with our filter UI elements.

• Pass the DXCollectionView.FilteringContext to the filter element's FilterItemBase.Context property and specify the FilterItemBase.FieldName property (to bind this filter element to the DXCollectionView).

  <dxe:FilterRadioListItem Context="{Binding Source={x:Reference tutorsCollection}, Path=FilteringContext}" FieldName="Subject" />

• This example uses the following filter elements:

  Class	Filter Element
  FilterRadioListItem	Single item selection.
  FilterCheckedListItem	Multiple item selection.
  FilterCheckedListItem with the ShowSearchPanel property set to true	Multiple item selection with embedded search panel.

• You can set the FilterListItemBase.ShowValueCounts property to false to hide the filtering UI element's value count.

• Call the FilteringContext.ResetFilterCommand command to reset all applied filter rules.

  <dx:DXButton Content="Reset" Command="{Binding Source={x:Reference tutorsCollection}, Path=FilteringContext.ResetFilterCommand}" />

• The project wraps filter groups using the TabView control and displays it in the BottomSheet control. This allows users to specify multiple filter rules without closing the BottomSheet.

• You can use the BottomSheet.State property to specify whether the BottomSheet is hidden, partially expanded, or fully expanded. This project sets the BottomSheet.State property to FullExpanded to fit the text edit's popup keyboard.

• This project uses triggers to change Chip text/appearance (depends on the application of a corresponding rule).

  <DataTrigger Binding="{Binding Source={x:Reference subjectRadioListItem}, Path=FilterModel.SelectedFilterValue, Converter={StaticResource isFilterEmptyConverter}}" Value="False" TargetType="dxe:Chip">
      <Setter Property="Text" Value="{Binding Source={x:Reference subjectRadioListItem}, Path=FilterModel.SelectedFilterValue.DisplayText, StringFormat='{0} ▼'}"/>
  </DataTrigger>