如何让水平列表框在 WP7 中水平滚动？答案

【问题标题】：How do I get a Horizontal ListBox to scroll horizontally in WP7?如何让水平列表框在 WP7 中水平滚动？
【发布时间】：2011-01-03 00:50:52
【问题描述】：

我正在尝试使用下面的代码在 WP7 silverlight 中制作水平列表框。这些项目水平显示，但滚动仍然是垂直的。

我在 wpf 中做错了吗？这是 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>

编辑：我错过了两个似乎有很大不同的属性。（解决方案来自 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>

【问题讨论】：

标签： silverlight windows-phone-7 scroll

【解决方案1】：

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

这是对我有用的代码。

【讨论】：

【解决方案2】：

这里提出了两种解决方案，您可以尝试一下。

Horizontal Listbox?

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

【讨论】：

【解决方案3】：

好的，差不多两年后，但 Mahantesh 的代码对我来说工作得很好，只添加了 2 个功能，即禁用 ScrollViewer 行和 ListBox 行中的 VerticalScrollBar 属性，以避免 ListBox 仍然能够垂直滚动

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

【讨论】：