如何在WPF包装面板内上下滑动子项目

Question

大家好!

<标题> 的背景

首先，我是WPF/Silverlight/XAML的绝对新手。

我有一个在运行时添加一堆图像缩略图的wrappanel。

当填充换行面板时，它水平运行缩略图，然后在下一行重复换行，以便在加载所有缩略图后，我在屏幕下方有几个视图。

在我的应用程序中，滚动条看起来不稳定，所以我想添加一个"up"one_answers";down"

<标题>

当点击向上或向下按钮时，我如何向上或向下滑动wrappanel的内容/子元素?理想情况下，我想加入一个很好的舒缓效果，这样过渡一开始很快，然后慢慢停止。

多谢!

马特

Answer 1

这里有两种方法，一种更像wpf，另一种可能更容易理解。

方法1。

使用ScrollViewer并根据需要重新设置样式。类似wpf的方法-你需要滚动，所以使用ScrollViewer，需要自定义外观或布局-重新定义其模板。

<ScrollViewer>
    <ScrollViewer.Template>
        <ControlTemplate TargetType="{x:Type ScrollViewer}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <ScrollBar Grid.Row="0"
                           x:Name="PART_VerticalScrollBar"
                           Width="{TemplateBinding ActualWidth}"
                           Orientation="Vertical">
                    <ScrollBar.Template>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <StackPanel Orientation="Horizontal">
                                <RepeatButton Content="Up"
                                              Margin="2"
                                              Command="ScrollBar.LineUpCommand"/>
                                <RepeatButton Content="Down"
                                              Margin="2"
                                              Command="ScrollBar.LineDownCommand"/>
                            </StackPanel>
                        </ControlTemplate>
                    </ScrollBar.Template>
                </ScrollBar>
                <ScrollContentPresenter Grid.Row="1"
                                        x:Name="PART_ScrollContentPresenter" />
            </Grid>
        </ControlTemplate>
    </ScrollViewer.Template>
    <WrapPanel x:Name="MyContent">
        <!-- your data items are here -->
    </WrapPanel>
</ScrollViewer>

方法2。

更直接的解决方案-编写一个滚动内容的方法，并从按钮单击事件处理程序调用它(或将其包装在iccommand中)。你可以使用Storyboard应用动画效果平滑滚动。

使用以下简单的布局(它不包括向上/向下按钮-您可以随意放置它们，这里没有什么特别的):

<Canvas>
    <WrapPanel x:Name="MyContent"
               Width="{Binding ActualWidth,
                               RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}">
    </WrapPanel>
</Canvas>

使用Canvas代替ScrollContentPresenter，因为Canvas.Top属性可以动画化。

以及以下滚动内容的方法:

static void AnimateScroll(UIElement element, double amount, TimeSpan duration)
{
    var sb = new Storyboard();
    var position = Canvas.GetTop(element);
    if(double.IsNaN(position)) position = 0;
    var animation =
        new DoubleAnimation
        {
            // fine-tune animation here
            From = position,
            To = position + amount,
            Duration = new Duration(duration),
        };
    Storyboard.SetTarget(animation, element);
    Storyboard.SetTargetProperty(animation, new PropertyPath(Canvas.TopProperty));
    sb.Children.Add(animation);
    sb.Begin();
}

方法使用:

// scroll down 30 units animating for 100ms
AnimateScroll(MyContent, -30, new TimeSpan(0, 0, 0, 0, 100));