如何在WPF wrappanel中向上或向下滑動子項目？

Question

嗨，感謝您的期待！

背景

首先，我是一個絕對的n00b到WPF/Silverlight中/ XAML。

我有一個wrappanel，其中我在運行時添加了一堆圖像縮略圖。這很好。

當包裝面板被填充時，它會水平運行縮略圖，然後重複包裝到下一行，這樣在加載完所有縮略圖後，屏幕下方會有幾個視圖。

在我的應用程序中，一個滾動條看起來很亂，所以我想在包裝面板上添加一個「向上」和「向下」按鈕。

問題

當點擊向上或向下的按鈕，我怎麼滑動wrappanel向上或向下的內容/小孩？理想情況下，我想引入一個很好的緩解效應，以便開始時的轉換速度很快，並放慢速度。

非常感謝！

馬特

Answer 1

這裏有兩個方法可以做到這一點，一個是更WPF類和其他可能更容易理解。

接近1

使用ScrollViewer，當你需要它restyle。類似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));