question

XieSteven avatar image
0 Votes"
XieSteven asked ·

Using the StackPanel as ItemsPanelTemplate for ComBoBox occured strange behavior

As we all know, the UWP ComboBox control uses the CarouselPanel as its ItemsPanelTemplate. With it, the ComboBox's dropdown-list will cyclic scroll when the app runs on the tablet mode. But we don't want the cyclic scrolling on tablet mode.

So, we use the StaclPanel as its ItemsPanelTemplate. (Here, we do not think about the perfamce issue when using the StackPanel.)

Then, the strange behavior occurred. Once I set an item as the default selected item for the ComBoBox, the first item in the dropdown-list cannot be selected.

See the code sample:

 <ComboBox ItemsSource="{x:Bind tests, Mode=OneWay}" SelectedItem="{x:Bind SelectedTest, Mode=TwoWay}">
             <ComboBox.ItemTemplate>
                 <DataTemplate x:DataType="local:Test">
                     <TextBlock Text="{x:Bind name, Mode=OneWay}"></TextBlock>
                 </DataTemplate>
             </ComboBox.ItemTemplate>
             <ComboBox.ItemsPanel>
                 <ItemsPanelTemplate>
                     <StackPanel Orientation="Vertical"></StackPanel>
                 </ItemsPanelTemplate>
             </ComboBox.ItemsPanel>
         </ComboBox>

 public sealed partial class MainPage : Page,INotifyPropertyChanged
     {
         ObservableCollection<Test> tests { get; set; } = new ObservableCollection<Test>();
    
         private Test selectedTest;
    
         public event PropertyChangedEventHandler PropertyChanged;
    
         public Test SelectedTest
         {
             get
             {
                 return this.selectedTest;
             }
    
             set
             {
                 if (this.selectedTest != value)
                 {
                     this.selectedTest = value;
                     PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("SelectedTest"));
                 }
             }
         }
    
         public MainPage()
         {
             this.InitializeComponent();
    
             for (int i=0;i<10;i++)
             {
                 tests.Add(new Test() {name="name " +i });
             }
    
             this.SelectedTest = this.tests[0];
         }
     }
    
     public class Test
     {
         public string name { get; set; }
     }



windows-uwpwindows-uwp-xaml
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

FayWang-MSFT avatar image
0 Votes"
FayWang-MSFT answered ·

Hello,

​Welcome to our Microsoft Q&A platform!

This is an expected bebavior. Please refer to the Note part of this document, it mentions:

> ComboBox uses a CarouselPanel as its ItemsPanel. Using a different panel as the ItemsPanel is not supported and might result in undesired behavior.

So please don't use StackPanel as its ItemsPanel but CarouselPanel.











· 2 · Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

All right, CarouselPanel is the default panel for ComBoBox. I suggested that the UWP should provide a property to control the 'cyclic scrolling' when the app runs on tablet mode.

0 Votes 0 ·

About providing a property to control the 'cyclic scrolling', you can go to the Feedback Hub(Start menu-> Feedback Hub) to submit your feature request.

0 Votes 0 ·