Strange behaviour of combobox in WinRT

问题

Comboboxes in WinRT have a default ItemsPanel of type CarouselPanel. This gives Windows 8.1 apps an "infinite loop" when scrolling combobox items. If you don't want this behaviour, there are a lot of blog posts explaining how to "fix it".

For example this: Cancel WinRT ComboBox infinte scroll effect or: http://netitude.bc3tech.net/2013/04/12/windows-8s-combobox-and-the-carouselpanel/

The problem with this solution is that you get a weird behaviour on the first item in the combobox. How to reproduce:

Create a new blank Windows 8.1 app

In mainpage.xaml put:

<TimePicker Time="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>

Create a style.xaml resource dictionary like this:

<Style TargetType="ComboBox">
    <Style.Setters>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Vertical"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style.Setters>
</Style>

Now start the app, select an item down the list (for example '05' minutes), then select the first item in the same dropdown (for example '00' minutes). The text in the dropdown control will now disappear.

Anyone know how to fix this? If I change the style of combobox itemspanel back to CarouselPanel it works (but with the infinite loop of course).

回答1:

Just corrected this issue using a VirtualizingStackPanel in place of a StackPanel. We had to set a size cause otherthise it take all the width of the screen.

<VirtualizingStackPanel HorizontalAlignment="Center" Width="150"/>

We didn't try to get a more flexible solution because we don't need it yet

Hope it will help you

回答2:

StackPanel just not working with ComoboBox the possible solution is changing it to VirtualizingStackPanel, but you must bind with to the parent, otherthise it will stretch to screen width.

<ComboBox Name="ReasonComboBox"">
<ComboBox.ItemsPanel>
    <ItemsPanelTemplate>
        <VirtualizingStackPanel Width="{Binding ActualWidth, ElementName=ReasonComboBox}"/>
    </ItemsPanelTemplate>
</ComboBox.ItemsPanel>
</ComboBox>

来源：https://stackoverflow.com/questions/26968357/strange-behaviour-of-combobox-in-winrt

标签

xaml

combobox

windows-runtime

windows-8.1