Selected item in ComboBox is not visible when popup is open (UWP)

Question

Hi, I want the ComboBox to show the selected item when its popup is open.

This is the look of ComboBox when it is closed:

And here is ComboBox with oped popup (Notice that selected "Item 1" in ComboBox is not visible):

Answer 1

Hello,

Welcome to Microsoft Q&A!

It seems that you want to keep the selected value visible in the ComboBox when the popup is opened when users are selecting.

When the dropdown popup shows, there is a TextBlock called PlaceholderTextBlock at the place where shows the selected value. I tried to change its text but it doesn't work somehow. There should be some more logic inside the Combobox itself which controls the behavior.

So we need to try another way to achieve what you want. You could add a new TextBlock to replace the original one to show the value you want. First, you need to find the ContentPresenter inside the Combobox that holds the TextBlock. Then just you could create a new block and show the value you want.

I've made a simple demo and you could refer to the following code about how I implemented it. Then you could try to use it in your project.

 <!--The ComboBoxStyle1 just changes the position of the dropdown popup--> 
 <ComboBox Style="{StaticResource ComboBoxStyle1}" 
           PlaceholderText="Please select an item" 
           x:Name="FontsCombo" 
           DropDownOpened="FontsCombo_DropDownOpened"
           ItemsSource="{x:Bind myFonts}"
           Header="Fonts" Height="80" Width="296" >
     <ComboBox.ItemTemplate>
         <DataTemplate x:DataType="local:FontModel">
             <TextBlock  Text="{x:Bind FontName}"/>
         </DataTemplate>
     </ComboBox.ItemTemplate>
 </ComboBox>

 public sealed partial class MainPage : Page
 {
     public ObservableCollection<FontModel> myFonts { get; set; }
     public MainPage()
     {
         this.InitializeComponent();

         myFonts = new ObservableCollection<FontModel>();

         myFonts.Add(new FontModel { FontName = "Arial" });
         myFonts.Add(new FontModel { FontName = "Courier New" });
         myFonts.Add(new FontModel { FontName = "Times New Roman" });

     }

     private void FontsCombo_DropDownOpened(object sender, object e)
     {
        // find the target content presenter
         var contentSource = MyFindChildByName(FontsCombo as ComboBox, "ContentPresenter") as ContentPresenter;

         TextBlock myBlock = new TextBlock();
        
        // change the text of the TextBlock
         if (FontsCombo.SelectedItem != null)
         {
             var targetModel= FontsCombo.SelectedItem as FontModel;
             myBlock.Text = targetModel.FontName;
         }
         else 
         {
             myBlock.Text = "Please select an item";
         }
         // set the new TextBlock as content.
         contentSource.Content = null;
         contentSource.Content = myBlock;

     }

     public static DependencyObject MyFindChildByName(DependencyObject parant, string ControlName)
     {
         int count = VisualTreeHelper.GetChildrenCount(parant);

         for (int i = 0; i < count; i++)
         {
             var MyChild = VisualTreeHelper.GetChild(parant, i);
             if (MyChild is FrameworkElement && ((FrameworkElement)MyChild).Name == ControlName)
                 return MyChild;

             var FindResult = MyFindChildByName(MyChild, ControlName);
             if (FindResult != null)
                 return FindResult;
         }

         return null;
     }
 }

// test model
 public class FontModel
 {
     public string FontName { get; set; }

 }

And the result looks like:

You could see that the ComboBox stills shows the selected value when the popup is opened.

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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.