2011-01-03 14 views
11

Estoy intentando usar el siguiente código para crear un cuadro de lista horizontal en WP7 silverlight. Los elementos aparecen en forma horizontal, pero el desplazamiento sigue siendo vertical.¿Cómo obtengo un ListBox horizontal para desplazarme horizontalmente en WP7?

¿Estoy haciendo algo mal en wpf? ¿Es esto un error específico de WP7?

<Style TargetType="ListBox" x:Name="HorizontalListBox"> 
     <Setter Property="ItemsPanel"> 
      <Setter.Value> 
       <ItemsPanelTemplate> 
        <VirtualizingStackPanel Orientation="Horizontal" 
              IsItemsHost="True" 
              CanHorizontallyScroll="True" 
              CanVerticallyScroll="False"/> 
       </ItemsPanelTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Editar: me estaba perdiendo dos propiedades que aparecen a hacer una gran diferencia. (La solución provino del segundo enlace en la respuesta aceptada por Mick N.)

<Style TargetType="ListBox" x:Name="HorizontalListBox"> 
     <Setter Property="ItemsPanel"> 
      <Setter.Value> 
       <ItemsPanelTemplate> 
        <VirtualizingStackPanel Orientation="Horizontal" IsItemsHost="True" CanHorizontallyScroll="True" CanVerticallyScroll="False"/> 
       </ItemsPanelTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/> 
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/> 
    </Style> 

Respuesta

6
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" >  
     <ScrollViewer HorizontalScrollBarVisibility="Auto" Margin="0,6,-196,0" Height="Auto" Name="imageScroll"> 
     <ListBox x:Name="imageBox" Margin="12,0,0,0"> 
       <ListBox.ItemsPanel> 
        <ItemsPanelTemplate> 
         <StackPanel Orientation ="Horizontal" > 
          <StackPanel.RenderTransform> 
           <TranslateTransform 
            X="0" /> 
          </StackPanel.RenderTransform> 

         </StackPanel> 
        </ItemsPanelTemplate> 
       </ListBox.ItemsPanel> 
        <ListBox.ItemTemplate> 
       <DataTemplate> 
         <Image Source="{Binding Avatar}" Width="240" Stretch="Fill" Height=" 100" /> 
        <!--<TextBlock TextWrapping="Wrap" Text="{Binding Titulo}" FontSize="35" VerticalAlignment="Center" Margin="0,10" />-->      
       </DataTemplate> 
      </ListBox.ItemTemplate>     
     </ListBox> 
     </ScrollViewer> 
    </Grid> 

Este es el código que está trabajando para mí.

2

bien, casi dos años más tarde, pero el código de Mahantesh funcionó bien para mí con sólo 2 adiciones, de desactivar la propiedad verticalScrollBar tanto en la línea de ScrollViewer y en la línea de cuadro de lista, para evitar el ListBox siguen siendo capaces de desplazarse verticalmente

<ScrollViewer HorizontalScrollBarVisibility="Auto" 
       VerticalScrollBarVisibility="Disabled" 
       Margin="0,6,-196,0" 
       Height="Auto" Name="imageScroll"> 
<ListBox x:Name="imageBox" 
     ScrollViewer.VerticalScrollBarVisibility="Disabled" 
     Margin="12,0,0,0"> 
Cuestiones relacionadas