如何在 WPF 包装面板内向上或向下滑动子项? [英] How do I slide child items up or down inside a WPF wrappanel?

问题描述

您好，感谢您的关注！

首先，我是 WPF/Silverlight/XAML 的绝对n00b.

First, I am an absolute n00b to WPF/Silverlight/XAML.

我有一个包装面板，我在运行时向其中添加了一堆图像缩略图.这很好用.

I have a wrappanel into which I add a bunch of image thumbnails at runtime. This works well.

当环绕面板被填充时，它会水平运行缩略图，然后在下一行重复环绕，以便在加载所有缩略图后，屏幕下方有几个不在视野范围内.

When the wrap panel is populated, it runs the thumbnails horizontally and then wraps on the next row repeatedly so that after all thumbnails are loaded, I have several out of view below the screen.

在我的应用程序中，滚动条看起来很不稳定，所以我想添加一个向上"滚动条.和下"环绕面板上方的按钮.

In my app, the a scrollbar looks to wonky, so I would like to add an "up" and "down" button above the wrap panel.

单击向上或向下按钮时，如何向上或向下滑动包装面板的内容/子项?理想情况下，我想加入一个很好的缓动效果，这样过渡一开始很快，然后慢慢停下来.

When the up or down buttons are clicked, how do I slide the content/children of the wrappanel up or down? Ideally, I would like to incorporate a nice easing effect so that the transition is fast at first and slows to a stop.

非常感谢！

马特

推荐答案

这里有两种方法可以做到这一点，一种更像 WPF，另一种可能更容易理解.

Here are 2 ways to do this, one is more WPF-like and other may be easier to understand.

方法一.

使用 ScrollViewer 并根据需要重新设置样式.类似 WPF 的方法 - 您需要滚动，因此使用 ScrollViewer，需要自定义外观或布局 - 重新定义其模板.

Use ScrollViewer and restyle it as you need. WPF-like approach - you need to scroll, so use ScrollViewer, need custom appearance or layout - redefine its template.

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

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

More straightforward solution - write a method that scrolls content, and call it from button click event handlers (or wrap it in ICommand). You can use Storyboard to apply animation effects for smooth scrolling.

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

Use the following simple layout (it doesn't include up/down buttons - place them as you like, nothing special about them here):

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

使用

Canvas 代替 ScrollContentPresenter 因为 Canvas.Top 属性可以动画.

Canvas is used instead of ScrollContentPresenter because Canvas.Top property can be animated.

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

And following method to scroll content:

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

这篇关于如何在 WPF 包装面板内向上或向下滑动子项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！