如何为ListBox水平滚动元素?

时间:2014-03-21 16:18:20

标签: .net wpf winforms wpf-controls

我有一个ListBox,在垂直位置填充一些图像

[img]
[img]
[img]

我需要像这样的水平定位

[img][img][img]

知道该怎么做吗?

     <Custom:SurfaceListBox
        Grid.Column="0"
        x:Name="FloorsSurfaceListBox"
        ScrollViewer.HorizontalScrollBarVisibility="Visible"
        ScrollViewer.VerticalScrollBarVisibility="Visible"
        SelectionChanged="Floors_SelectionChanged"
        ItemTemplate="{DynamicResource FloorsListboxDataTemplate}"
        ItemContainerStyle="{DynamicResource SurfaceListBoxItemStyle}">
            <Custom:SurfaceListBox.OpacityMask>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Transparent" Offset="0"/>
                    <GradientStop Color="Black" Offset="0.15"/>
                    <GradientStop Color="Black" Offset="0.85"/>
                    <GradientStop Color="Transparent" Offset="1"/>
                </LinearGradientBrush>
            </Custom:SurfaceListBox.OpacityMask>
        </Custom:SurfaceListBox>




    <DataTemplate x:Key="FloorsListboxDataTemplate">
        <Grid>
            <Image Source="{Binding ImageUrlString}"/>
            <TextBlock TextWrapping="Wrap"
                       Text="{Binding Description,
                       FallbackValue='Description'}"
                       d:LayoutOverrides="Width"
                       FontFamily="/ClientWPF;component/Fonts/#Letter Gothic L"
                       Margin="0,100,0,40"
                       FontWeight="Normal">
                <TextBlock.Foreground>
                    <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ActiveBorderColorKey}}"/>
                </TextBlock.Foreground>
            </TextBlock>
        </Grid>
    </DataTemplate>

1 个答案:

答案 0 :(得分:2)

将ListBox(ItemsControl.ItemsPanel)的项目面板替换为水平StackPanel。

<ListBox ...>
  ...
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
</ListBox>