Thursday, May 23, 2013

Preventing the winrt combox to jump around when it is opened

The combox in windows 8 (winrt) XAML has a bad tendency to jump around when the user opens it.
See the example below:

 <ComboBox  HorizontalAlignment="Center" VerticalAlignment="Center"
    Grid.RowSpan="2" Grid.ColumnSpan="2" SelectedIndex="0" >    
            <TextBlock Text="first"/>                             
            <TextBlock Text="second"/>                          
            <TextBlock Text="Third"/>                           
            <TextBlock Text="Very long text................." />
        </ComboBox>                                                 


When the combobox is closed it is well centered on the cross But when it becomes open it is not centered at all.


Note this does not occur when the combobox alignment is set to stretch but this is not always a solution that fits with your XAML layout.

Vertically the opened combobox is arranged so that the selected line is at right place. That's OK but the horizontal movement is (I think) awful for the user.

The best way that I have found to avoid it is to force a MinWidth value that is large enough to display the longest text that shall have to be displayed in the combobox. This is a bit a dirty trick but it works nicely.

 <ComboBox  HorizontalAlignment="Center" VerticalAlignment="Center"      
  Grid.RowSpan="2" Grid.ColumnSpan="2" SelectedIndex="0" MinWidth="200">
            <TextBlock Text="first"/>                                 
            <TextBlock Text="second"/>                                  
            <TextBlock Text="Third"/>                               
            <TextBlock Text="Very long text................." />     
        </ComboBox>                                                      


With this modification we get:


The opened combobox stays horizontally centered on at the correct position.



No comments:

Post a Comment