Change position of ComboBox Dropdown list in UWP.

Question

Change position of ComboBox Dropdown list in UWP.

Henry 21

I have a ComboBox in my UWP application and on clicking the dropdown icon the dropdown list is appearing over the Combobox.
I want the dropdown list to appear below the Combobox . I am not able to change the position of the dropdown list by modifying the ComboBox ControlTemplate in Resource Dictionary. Is it possible to change the position of dropdown list by any method?

Accepted answer

0 additional answers

Your answer

Answer 1

Yan Gu - MSFT 2,676

Hello,

Welcome to Microsoft Q&A.

The drop-down list of a ComboBox control is actual a Popup control. You could view the structure of UIElements of a ComboBox control in the default style of the ComboBox control.

You could try to adjust the position of the Popup control in its opened event handler.

Please check the following steps:

a. Get the default style of ComboBox control from generic.xaml file and apply the style to your ComboBox control.
b. Find the Popup control in the added style, and add a Opened event handler to it.
c. Use the following code to set the VerticalOffset property of the Popup control to adjust the position:

void winrt::BlankApp1::implementation::MainPage::Popup_Opened(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::Foundation::IInspectable const& e)  
{  
    auto popup = sender.try_as<Windows::UI::Xaml::Controls::Primitives::Popup>();  
    popup.VerticalOffset(30);  
}

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Yan Gu - MSFT 2,676 Reputation points

2021-03-18T05:55:02.18+00:00

@Henry Could you please tell me if your problem has been resolved?
Henry 21 Reputation points

2021-03-18T07:10:00.047+00:00

Thank you for your response. Your solution works when I followed the exact steps.
Is it possible to achieve the same by only modifying the ComboBox Template within the Resource Dictionary, so that it is easier to just share the Dictionary file and the Template will be automatically applied whenever ComboBox is used again.
Yan Gu - MSFT 2,676 Reputation points

2021-03-18T07:50:08.917+00:00
@Henry
You could adjust the position of the Popup of a ComboBox control in XAML without using code behind. You still have to do the job within the default style because we need to access the Popup control. You could put the style into a ResourceDictionary file and reuse it for ComboBox controls.

In the default style, find a VisualStateGroup called DropDownStates and the first VisualState within it called Opened. Add the following code within the Opened VisualState:

<VisualStateGroup x:Name="DropDownStates"> <VisualState x:Name="Opened"> <VisualState.Setters> <Setter Target="Popup.VerticalOffset" Value="30"/> </VisualState.Setters> …… </VisualState> …… </VisualStateGroup>
Henry 21 Reputation points

2021-03-18T12:26:26.663+00:00

Thank you soo much for taking time to reply. This is exactly what I wanted.

Share via

Change position of ComboBox Dropdown list in UWP.

0 additional answers

Your answer