wpf - 如何使用 WPF ListBox 或 ScrollView 显示下 n 个项目？

Question

我有 10 个项目的列表框。默认情况下启用垂直滚动，我可以看到前 3 个项目。客户希望我添加 2 个按钮“向上”和“向下”，并且在按钮单击列表框上应显示接下来的 3 个项目。

例如，我想通过“向下”单击项目 4、项目 5、项目 6 来显示。

如何使用默认的 WPF 控件列表框和滚动视图？

Answer 1

您可以使用ScrollViewer.ScrollToVerticalOffset方法（msdn）。

例子：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="20" />
        <RowDefinition Height="50" />
        <RowDefinition Height="20" />
        <RowDefinition Height="25" />
    </Grid.RowDefinitions>

    <Button x:Name="btnUp" Content="UP" Click="btnUp_Click" />

    <ScrollViewer x:Name="scroll" Grid.Row="1">
        <ListBox x:Name="lbData">
            <ListBoxItem>Item1</ListBoxItem>
            <ListBoxItem>Item2</ListBoxItem>
            <ListBoxItem>Item3</ListBoxItem>
            <ListBoxItem>Item4</ListBoxItem>
            <ListBoxItem>Item5</ListBoxItem>
            <ListBoxItem>Item6</ListBoxItem>
            <ListBoxItem>Item7</ListBoxItem>
            <ListBoxItem>Item8</ListBoxItem>
            <ListBoxItem>Item9</ListBoxItem>
            <ListBoxItem>Item10</ListBoxItem>
        </ListBox>
    </ScrollViewer>

    <Button x:Name="btnDown" Content="Down" Click="btnDown_Click" Grid.Row="2" />

    <StackPanel Grid.Row="3" Orientation="Horizontal">
        <TextBlock Text="Start with:" Margin="2" />
        <ComboBox x:Name="cbIndex" Loaded="cbIndex_Loaded" Margin="2" />
        <Button x:Name="btnGo" Content="GO" Click="btnGo_Click" Margin="2" />
    </StackPanel>
</Grid>

代码隐藏：

private void btnUp_Click(object sender, RoutedEventArgs e)
{
    scroll.ScrollToVerticalOffset(scroll.VerticalOffset - 50);
}

private void btnDown_Click(object sender, RoutedEventArgs e)
{
    scroll.ScrollToVerticalOffset(scroll.VerticalOffset + 50);
}

public double GetOffset(int itemIndex)
{
    double result = 0;           
    for (int i = 0; i < itemIndex; i++)
    {
        result += (lbData.Items[i] as ListBoxItem).ActualHeight;
    }

    return result;
}

private void cbIndex_Loaded(object sender, RoutedEventArgs e)
{
    cbIndex.ItemsSource = Enumerable.Range(1, lbData.Items.Count);
}

private void btnGo_Click(object sender, RoutedEventArgs e)
{
    scroll.ScrollToVerticalOffset(GetOffset(cbIndex.SelectedIndex));
}

Answer 2

水平列表的解决方案：

/// <summary>
        /// Show next n items starting from first visible.
        /// </summary>
        public void ShowNext()
        {
            if (this.scrollviewer == null)
            {
                return;
            }

            var rightLimit = this.scrollviewer.HorizontalOffset + this.scrollviewer.ViewportWidth;
            double horizontalOffset = 0;

            foreach (var item in this.Items)
            {
                var container = this.ItemContainerGenerator.ContainerFromItem(item) as FrameworkElement;
                if (container == null)
                {
                    continue;
                }

                if (horizontalOffset + container.ActualWidth >= rightLimit)
                {
                    // We found last item offset
                    break;
                }

                horizontalOffset += container.ActualWidth;
            }

            this.scrollviewer.ScrollToHorizontalOffset(horizontalOffset);
        }

        /// <summary>
        /// Show previous n items starting last visible item.
        /// </summary>
        public void ShowPrevious()
        {
            if (this.scrollviewer == null)
            {
                return;
            }

            double horizontalOffset = 0;
            foreach (var item in this.Items)
            {
                var container = this.ItemContainerGenerator.ContainerFromItem(item) as FrameworkElement;

                if (container == null)
                {
                    continue;
                }

                horizontalOffset += container.ActualWidth;
                if (horizontalOffset >= this.scrollviewer.HorizontalOffset)
                {
                    // We found last item offset
                    break;
                }
            }

            horizontalOffset -= this.scrollviewer.ViewportWidth;
            this.scrollviewer.ScrollToHorizontalOffset(horizontalOffset);
        }

此代码将显示列表框中上次可见的下一个\上一个项目。