Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I get a Horizontal ListBox to scroll horizontally in WP7?

I'm attempting to use the code below to make a horizontal listbox in WP7 silverlight. The items appear horizontally but the scrolling is still vertical.

Am I doing something wrong in wpf? Is this a WP7 specific bug?.

    <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>

Edit: I was missing two properties that appear to make a great deal of difference. (The solution came from the second link in the accepted answer by 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>
like image 442
Steve Steiner Avatar asked Jan 03 '11 00:01

Steve Steiner


2 Answers

 <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>

This is code which is working for me.

like image 175
Shashi Avatar answered Oct 05 '22 05:10

Shashi


Two solutions proposed here you can try out.

Horizontal Listbox?

How to write a control similar to ListBox, but sliding left to right instead of up and down

like image 33
Mick N Avatar answered Oct 05 '22 07:10

Mick N