子アイテムをWPFラッパーパネル内で上下にスライドさせるにはどうすればよいですか？

Question

こんにちは、ありがとう！

背景

まず、私はWPF/Silverlightの/ XAMLへの絶対N00Bています。

私は、実行時に画像のサムネイルを追加するラッパエルを持っています。これはうまくいく。

ラップパネルに値が入力されると、サムネイルが水平方向に実行され、次の行が繰り返しラップされるため、サムネイルがすべて読み込まれた後、画面の下にはいくつかのビューが表示されます。

私のアプリでは、スクロールバーが不安定に見えるので、ラップパネルの上に「上」ボタンと「下」ボタンを追加します。

問題上向きまたは下向きのボタンがクリックされた

は、私がダウンしwrappanelアップまたはのコンテンツ/子供をスライドさせますか？理想的には、良いイージングエフェクトを組み込んで、トランジションが最初は速く、停止が遅くなるようにしたいと思います。

多くの感謝！

マットここ

Answer 1

がこれを行うには2通りあり、一つは理解しやすいかもしれもっと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.Topプロパティができるので

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

Canvasは、代わりにScrollContentPresenterの使用されていますアニメ化される。

とメソッドコンテンツをスクロールするには、以下：

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