Avalonia怎么在ListBox中实现水平滚动 Avalonia ScrollViewer设置

在 Avalonia 中实现 ListBox 水平滚动，需同时满足三个条件：1. 设置 ItemsPanel 为水平 StackPanel 或 WrapPanel；2. 用 ScrollViewer 外层包裹并设 HorizontalScrollBarVisibility="Auto"、VerticalScrollBarVisibility="Disabled"；3. 确保内容总宽度超出 ScrollViewer 可视区域。

在 Avalonia 中，ListBox 默认是垂直滚动的，若要实现**水平滚动**，关键不是直接给 ListBox 设置水平滚动，而是通过嵌套 ScrollViewer 并控制其滚动方向，同时调整 ItemsPanel 为水平布局（如 StackPanel 或 WrapPanel 横向排列）。

1. 设置 ListBox 的 ItemsPanel 为水平 StackPanel

默认 ListBox 使用垂直 StackPanel，需显式替换为水平方向：

<ListBox>
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
  <!-- ItemTemplate 和 ItemsSource 略 -->
</ListBox>

登录后复制

2. 包裹 ScrollViewer 并启用水平滚动

ListBox 本身不直接暴露 HorizontalScrollBarVisibility 属性，需用 ScrollViewer 显式包裹，并设置其行为：

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
  <ListBox>
    <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
        <StackPanel Orientation="Horizontal"/>
      </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
  </ListBox>
</ScrollViewer>

登录后复制

注意：
- VerticalScrollBarVisibility="Disabled" 防止出现双滚动条；
- HorizontalScrollBarVisibility 可设为 Auto、Visible 或 Hidden；
- ScrollViewer 必须放在 ListBox 外层（不能放 inside ControlTemplate 除非重写模板）。

3. 可选：优化项宽与换行（避免单行过长）

若希望内容自动换行或限制宽度，可用 WrapPanel 替代 StackPanel，并设置 ItemWidth 或容器约束：

标签： app ai 常见问题 排列 red