How to: Create a Custom Column Chooser

• Jun 07, 2019
• 5 minutes to read

This example shows how to create a custom standalone Column Chooser and display it within the Expandercontrol.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-a-custom-column-chooser-e1661.

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using DevExpress.Xpf.Core;
using DevExpress.Xpf.Grid;

namespace DevExCustomColumnChooser {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow: Window {
        public MainWindow() {
            InitializeComponent();
            grid.ItemsSource = IssueList.GetData();
            InitCustomColumnChooser(tableView);
        }

        void InitCustomColumnChooser(GridViewBase view) {
            columnChooser.View = view;
            view.ColumnChooserFactory = new CustomColumnChooser(columnChooser);
            view.ShowColumnChooser();
        }
    }

    public class IssueList {
        static public List<IssueDataObject> GetData() {
            var data = new List<IssueDataObject>
                {
                    new IssueDataObject()
                        {
                            IssueName = "Transaction History",
                            IssueType = "Bug",
                            IsPrivate = true
                        },
                    new IssueDataObject()
                        {
                            IssueName = "Ledger: Inconsistency",
                            IssueType = "Bug",
                            IsPrivate = false
                        },
                    new IssueDataObject()
                        {
                            IssueName = "Data Import",
                            IssueType = "Request",
                            IsPrivate = false
                        },
                    new IssueDataObject()
                        {
                            IssueName = "Data Archiving",
                            IssueType = "Request",
                            IsPrivate = true
                        }
                };
            return data;
        }
    }
    public class IssueDataObject {
        public string IssueName { get; set; }
        public string IssueType { get; set; }
        public bool IsPrivate { get; set; }
    }
}

CustomColumnChooser.cs

using DevExpress.Xpf.Core;
using DevExpress.Xpf.Grid;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;

namespace DevExCustomColumnChooser {
    public class CustomColumnChooser: IColumnChooser, IColumnChooserFactory {
        readonly CustomColumnChooserControl columnChooserControl;
        public CustomColumnChooser(CustomColumnChooserControl columnChooserControl) {
            this.columnChooserControl = columnChooserControl;
        }
        #region IColumnChooser Members
        void IColumnChooser.Show() { }
        void IColumnChooser.Hide() { }
        void IColumnChooser.ApplyState(IColumnChooserState state) { }
        void IColumnChooser.SaveState(IColumnChooserState state) { }
        void IColumnChooser.Destroy() { }
        UIElement IColumnChooser.TopContainer { get { return columnChooserControl.ColunmChooserControl; } }
        #endregion

        #region IColumnChooserFactory Members
        IColumnChooser IColumnChooserFactory.Create(Control owner) { return this; }
        #endregion
    }
    public class CustomColumnChooserControl: Control {
        public static readonly DependencyProperty ViewProperty = DependencyProperty.Register("View", typeof(GridViewBase), typeof(CustomColumnChooserControl), new UIPropertyMetadata(null));
        public CustomColumnChooserControl() {
            DefaultStyleKey = typeof(CustomColumnChooserControl);
        }
        public GridViewBase View {
            get { return (GridViewBase)GetValue(ViewProperty); }
            set { SetValue(ViewProperty, value); }
        }
        internal ColumnChooserControl ColunmChooserControl { get; private set; }

        public override void OnApplyTemplate() {
            base.OnApplyTemplate();
            ColunmChooserControl = (ColumnChooserControl)GetTemplateChild("PART_ColumnChooserControl");
        }
    }
}

MainWindow.xaml

<Window x:Class="DevExCustomColumnChooser.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
        xmlns:local="clr-namespace:DevExCustomColumnChooser"
        Title="MainWindow" Height="350" Width="525"
        >
    <Window.Resources>
        <Style TargetType="{x:Type local:CustomColumnChooserControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type local:CustomColumnChooserControl}">
                        <Expander x:Name="expander" IsExpanded="{Binding Owner.IsColumnChooserVisible, ElementName=PART_ColumnChooserControl}">
                            <ContentControl>
                                <Border Background="LightGray" CornerRadius="3" Padding="1">
                                    <dx:NonLogicalDecorator>
                                        <dxg:ColumnChooserControl x:Name="PART_ColumnChooserControl" Owner="{TemplateBinding View}" Columns="{Binding Path=Owner.ColumnChooserColumns, RelativeSource={RelativeSource Self}}" />
                                    </dx:NonLogicalDecorator>
                                </Border>
                            </ContentControl>
                        </Expander>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="170"/>
        </Grid.ColumnDefinitions>

        <dxg:GridControl x:Name="grid">
            <dxg:GridControl.Columns>
                <dxg:GridColumn FieldName="IssueName"/>
                <dxg:GridColumn FieldName="IssueType" Visible="False"/>
                <dxg:GridColumn FieldName="IsPrivate" Visible="False"/>
            </dxg:GridControl.Columns>
            <dxg:GridControl.View>
                <dxg:TableView x:Name="tableView" />
            </dxg:GridControl.View>
        </dxg:GridControl>
        <local:CustomColumnChooserControl x:Name="columnChooser" Grid.Column="1"/>
    </Grid>
</Window>

MainWindow.xaml.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Threading.Tasks
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports System.Windows.Navigation
Imports System.Windows.Shapes
Imports DevExpress.Xpf.Core
Imports DevExpress.Xpf.Grid

Namespace DevExCustomColumnChooser
    ''' <summary>
    ''' Interaction logic for MainWindow.xaml
    ''' </summary>
    Partial Public Class MainWindow
        Inherits Window
        Public Sub New()
            InitializeComponent()
            grid.ItemsSource = IssueList.GetData()
            InitCustomColumnChooser(tableView)
        End Sub

        Private Sub InitCustomColumnChooser(ByVal view As GridViewBase)
            columnChooser.View = view
            view.ColumnChooserFactory = New CustomColumnChooser(columnChooser)
            view.ShowColumnChooser()
        End Sub
    End Class

    Public Class IssueList
        Public Shared Function GetData() As List(Of IssueDataObject)
            Dim data = New List(Of IssueDataObject) (New IssueDataObject() {New IssueDataObject() With {.IssueName = "Transaction History", .IssueType = "Bug", .IsPrivate = True}, New IssueDataObject() With {.IssueName = "Ledger: Inconsistency", .IssueType = "Bug", .IsPrivate = False}, New IssueDataObject() With {.IssueName = "Data Import", .IssueType = "Request", .IsPrivate = False}, New IssueDataObject() With {.IssueName = "Data Archiving", .IssueType = "Request", .IsPrivate = True}})
            Return data
        End Function
    End Class
    Public Class IssueDataObject
        Private privateIssueName As String
        Public Property IssueName() As String
            Get
                Return privateIssueName
            End Get
            Set(ByVal value As String)
                privateIssueName = value
            End Set
        End Property
        Private privateIssueType As String
        Public Property IssueType() As String
            Get
                Return privateIssueType
            End Get
            Set(ByVal value As String)
                privateIssueType = value
            End Set
        End Property
        Private privateIsPrivate As Boolean
        Public Property IsPrivate() As Boolean
            Get
                Return privateIsPrivate
            End Get
            Set(ByVal value As Boolean)
                privateIsPrivate = value
            End Set
        End Property
    End Class
End Namespace

CustomColumnChooser.vb

Imports Microsoft.VisualBasic
Imports DevExpress.Xpf.Core
Imports DevExpress.Xpf.Grid
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows
Imports System.Windows.Controls

Namespace DevExCustomColumnChooser
    Public Class CustomColumnChooser
        Implements IColumnChooser, IColumnChooserFactory
        Private ReadOnly columnChooserControl As CustomColumnChooserControl
        Public Sub New(ByVal columnChooserControl As CustomColumnChooserControl)
            Me.columnChooserControl = columnChooserControl
        End Sub
        #Region "IColumnChooser Members"
        Private Sub Show() Implements IColumnChooser.Show
        End Sub
        Private Sub Hide() Implements IColumnChooser.Hide
        End Sub
        Private Sub ApplyState(ByVal state As IColumnChooserState) Implements IColumnChooser.ApplyState
        End Sub
        Private Sub SaveState(ByVal state As IColumnChooserState) Implements IColumnChooser.SaveState
        End Sub
        Private Sub Destroy() Implements IColumnChooser.Destroy
        End Sub
        Private ReadOnly Property TopContainer() As UIElement Implements IColumnChooser.TopContainer
            Get
                Return columnChooserControl.ColunmChooserControl
            End Get
        End Property
        #End Region

        #Region "IColumnChooserFactory Members"
        Private Function Create(ByVal owner As Control) As IColumnChooser Implements IColumnChooserFactory.Create
            Return Me
        End Function
        #End Region
    End Class
    Public Class CustomColumnChooserControl
        Inherits Control
        Public Shared ReadOnly ViewProperty As DependencyProperty = DependencyProperty.Register("View", GetType(GridViewBase), GetType(CustomColumnChooserControl), New UIPropertyMetadata(Nothing))
        Public Sub New()
            DefaultStyleKey = GetType(CustomColumnChooserControl)
        End Sub
        Public Property View() As GridViewBase
            Get
                Return CType(GetValue(ViewProperty), GridViewBase)
            End Get
            Set(ByVal value As GridViewBase)
                SetValue(ViewProperty, value)
            End Set
        End Property
        Private privateColunmChooserControl As ColumnChooserControl
        Friend Property ColunmChooserControl() As ColumnChooserControl
            Get
                Return privateColunmChooserControl
            End Get
            Private Set(ByVal value As ColumnChooserControl)
                privateColunmChooserControl = value
            End Set
        End Property

        Public Overrides Sub OnApplyTemplate()
            MyBase.OnApplyTemplate()
            ColunmChooserControl = CType(GetTemplateChild("PART_ColumnChooserControl"), ColumnChooserControl)
        End Sub
    End Class
End Namespace