背景

Question

嗨，谢谢你的期待！

背景

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

我有一个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。

更直接的解决方案 - 编写一个滚动内容的方法，并从按钮单击事件处理程序调用它（或将其包装在ICommand中）。您可以使用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));

如何在WPF包装内部上下滑动子项目？

背景

问题

1 个答案: