title: How to create custom scroll buttons on a XAML snapping scrollviewer
body: <p>I'm working on a C# XAML app for windows 8.1/10 and I'm having trouble creating a scrollviewer that behaves how I want.</p>
  
  <p>Pretty much I want the top scroller on the default page in the Windows Store app on Windows10. It looks like this when the screen is small:</p>
  
  <p><a href="http://i.stack.imgur.com/soCUF.png" rel="nofollow">Store Scroller</a></p>
  
  <p>It scrolls sideways through items, snaps between them, and is operated not by a scrollbar but by scrolling buttons on the side. It also has page markers at the bottom and loops through content. Ideally in mine it would also be operable with the scrollwheel on your mouse.</p>
  
  <p>What I want in my UI is this:</p>
  
  <p><a href="http://i.stack.imgur.com/wrjzd.png" rel="nofollow">Icon Scroller</a></p>
  
  <p>The purpose of this control is to cycle through available options for an icon, showing exactly three at any given time; the images are selectable. I have 9 icons total so I need 3 "pages" in this scrollviewer. I've somewhat accomplished this by using a scrollpanel with a stackpanel inside which itself contains three other stackpanels for my "pages". The scrollviewer is set to snap between items and it works great. Sample code of what I've created is the following:</p>
  
  <pre><code>&lt;ScrollViewer x:Name="scroller" HorizontalScrollBarVisibility="Hidden" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Disabled" HorizontalSnapPointsType="Mandatory" Width="120"&gt;
      &lt;StackPanel x:Name="stack_Master" Orientation="Horizontal" Height="40"&gt; 
          &lt;StackPanel x:Name="stack_Page1" Orientation="Horizontal"&gt;
              &lt;Image x:Name="image_Page1_Icon1" Style="..." Source="..." Width="40"/&gt;
              &lt;Image x:Name="image_Page1_Icon2" Style="..." Source="..." Width="40"/&gt;
              &lt;Image x:Name="image_Page1_Icon3" Style="..." Source="..." Width="40"/&gt;
          &lt;/StackPanel&gt;
          &lt;StackPanel x:Name="stack_Page2" Orientation="Horizontal"&gt;
              &lt;Image x:Name="image_Page2_Icon1" Style="..." Source="..." Width="40"/&gt;
              &lt;Image x:Name="image_Page2_Icon2" Style="..." Source="..." Width="40"/&gt;
              &lt;Image x:Name="image_Page2_Icon3" Style="..." Source="..." Width="40"/&gt;
          &lt;/StackPanel&gt;
          &lt;StackPanel x:Name="stack_Page3" Orientation="Horizontal"&gt;
              &lt;Image x:Name="image_Page3_Icon1" Style="..." Source="..." Width="40"/&gt;
              &lt;Image x:Name="image_Page3_Icon2" Style="..." Source="..." Width="40"/&gt;
              &lt;Image x:Name="image_Page3_Icon3" Style="..." Source="..." Width="40"/&gt;
          &lt;/StackPanel&gt;
      &lt;/StackPanel&gt;
  &lt;/ScrollViewer&gt;
  </code></pre>
  
  <p>The pages scroll nicely with animations when using the mouse wheel. The page indicator should be easy enough to implement using some C#. My plan for the looping was to have "decoy" versions of Page3 and Page1 at the start and end of stack_Master respectively. Then once the animation finishes to programmatically change to the actual page with no animation. This would imitate a circular scroller.</p>
  
  <p>The problem I'm running into is how can I implement the scrolling buttons? I don't see any methods for scrollviewers on MSDN which will change the position of the scrollviewer while maintaining the smooth animation, instead only ones that instantly change the position abruptly. If such a method existed then I could tie that to some buttons on the side of the scrollviewer.</p>
  
  <p>If this method doesn't exist than I also saw a solution for when snapping isn't enabled. Essentially the button would move the scroller say 10 pixels every 50ms, simulating a flowing movement. I don't think that would be possible when snapping between pages.</p>
  
  <p>It would be simple if there was a style for the scrollviewer to simply have the arrow buttons from the default scrollbar, without the actual bar between them. Does this exist?</p>
  
  <p>Any help is appreciated.</p>