Question

Hi and thanks for looking!

Background

This is an extension on this question:

How do I slide child items up or down inside a WPF wrappanel?

In which I asked how I could programattically scroll the contents of a WrapPanel up or down on a button click. This question was kindly answered and the accepted solution works well.

Problem

Now that my thumbnails in the WrapPanel scroll up and down on a button click, how do I mask the WrapPanel so that the tiles don’t show when they are outside of frame? For example, I have a StackPanel above the WrapPanel that holds the scroll up and down buttons, but when I scroll down, the thumbnails cover up the StackPanel above them (and the buttons). Here is my XAML so far, please note that the thumbnails are added to the WrapPanel at runtime:

Update

Using Dave Clemmer’s XAML, my layout is steadier, but then I still end up with the contents of the WrapPanel eclipsing the StackPanel above it. Please see these screen grabs taken before and after the scroll event:

BEFORE SCROLL-

AFTER SCROLL-

Update 2

Set canvas to red background per Dave’s comment below.

BEFORE SCROLL-

AFTER SCROLL-

Answer 1

Well, I wouldn’t call this intuitive, but in the end, this worked:

 <Border Grid.Row="1" Background="Transparent" ClipToBounds="True">       
            <Canvas>
                <WrapPanel x:Name="spContainer"  
                   Width="{Binding ActualWidth,  
                           RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}">
                </WrapPanel>
            </Canvas>
 </Border>

Adding the border did the trick. Thanks to Dave for all of your help!