Popup customization in WPF Multi Column Dropdown

22 Sep 20237 minutes to read

SfMultiColumnDropDownControl allows you to customize the Popup appearance by setting PopupBackground, PopupBorderBrush, PopupDropDownGridBackground and PopupBorderThickness properties.

XAML

<syncfusion:SfMultiColumnDropDownControl x:Name="sfMultiColumn"
                                         Width="175"
                                         Height="30"                                                     
                                         DisplayMember="CustomerName"
                                         ItemsSource="{Binding Orders}"
                                         PopupBackground="Beige"
                                         PopupBorderBrush="Aqua"
                                         PopupBorderThickness="3"
                                         ValueMember="CustomerName">
                <syncfusion:SfMultiColumnDropDownControl.Columns>
                    <syncfusion:GridTextColumn MappingName="CustomerName" />
                    <syncfusion:GridTextColumn MappingName="OrderID" />
                    <syncfusion:GridTextColumn MappingName="CustomerID" />
                    <syncfusion:GridTextColumn MappingName="Country" />
                </syncfusion:SfMultiColumnDropDownControl.Columns>
</syncfusion:SfMultiColumnDropDownControl>

You can change the drop down grid background by setting PopupDropDownGridBackground.

XAML

<syncfusion:SfMultiColumnDropDownControl x:Name="sfMultiColumn"
                                         Width="175"
                                         Height="30"
                                         DisplayMember="CustomerName"
                                         ItemsSource="{Binding Orders}"
                                         PopupDropDownGridBackground="LightGreen"
                                         ValueMember="CustomerName">
                <syncfusion:SfMultiColumnDropDownControl.Columns>
                    <syncfusion:GridTextColumn MappingName="CustomerName" />
                    <syncfusion:GridTextColumn MappingName="OrderID" />
                    <syncfusion:GridTextColumn MappingName="CustomerID" />
                    <syncfusion:GridTextColumn MappingName="Country" />
                </syncfusion:SfMultiColumnDropDownControl.Columns>
</syncfusion:SfMultiColumnDropDownControl>

Popup sizing

You can change the pop-up height and width by setting PopupWidth and PopupHeight properties. The PopupWidth will be set based onPopupMinWidth and PopupMaxWidth properties when the value is not between them. By default, the PopupMinWidth value is 200.0.

Similarly, the PopupHeight will be set based onPopupMinHeight and PopupMaxHeight when the value is not between them. The default value of PopupMinHeight is 300.0.

Auto sizing

SfMultiColumnDropDownControl can automatically adjust the popup width and height based on the width and height of SfDataGrid when setting IsAutoPopupSize as true.
N> When IsAutoPopupSize is true, then the popup width and height is not calculated based on PopupHeight and PopupWidth.

Resizing popup

You can allow the end-user to resize the drop-down popup through resizing thumb by setting ResizingThumbVisibility property to Visible.

Keep DropDownPopup as StaysOpen

You can keep the popup in SfMultiColumnDropDownControl as always open by using StaysOpen property. You can get the popup from template of SfMultiColumnDropDownControl in its loaded event and set the StaysOpen property as true.

C#

sfMultiColumn.Loaded += (o, e) =>
{
   var popup = sfMultiColumn.Template.FindName("PART_Popup", sfMultiColumn) as Popup;
   popup.StaysOpen = true;
};

Events

SfMultiColumnDropDownControl provides the following events for popup customizations,

PopupClosing event

PopupClosing event is fired when the popup is closing. You can use this event to skip the popup closing and PopupClosingEventArgs provides data for PopupClosing event. You can skip the popup closing by setting args.Cancel as true.

C#

sfMultiColumn.PopupClosing += sfMultiColumn_PopupClosing;

void sfMultiColumn_PopupClosing(object sender, PopupClosingEventArgs args)
{
}

PopupClosed event

PopupClosed event is fired when the popup is closed. PopupClosedEventArgs provides data for PopupClosed event

C#

sfMultiColumn.PopupClosed += sfMultiColumn_PopupClosed;

void sfMultiColumn_PopupClosed(object sender, PopupClosedEventArgs args)
{
}

PopupOpening event

PopupOpening event is fired when the popup is opening. You can use this event to skip the popup opening and PopupOpeningEventArgs provides data for PopupOpening event. You can skip the popup opening by setting args.Cancel as true.

C#

sfMultiColumn.PopupOpening += sfMultiColumn_PopupOpening;

void sfMultiColumn_PopupOpening(object sender, PopupOpeningEventArgs args)
{
}

PopupOpened event

PopupOpened event is fired when the popup is opened. PopupOpenedEventArgs provides data for PopupOpened event

C#

sfMultiColumn.PopupOpened += sfMultiColumn_PopupOpened;

void sfMultiColumn_PopupOpened(object sender, PopupOpenedEventArgs args)
{
}