如何屏蔽WPF Wrappanel的内容？

Question

嗨，谢谢你的期待！

背景

这是这个问题的扩展：

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

其中我问我如何以按钮点击方式向上或向下滚动WrapPanel的内容。这个问题得到了很好的回答，并且公认的解决方案运作良好。

问题

现在我的WrapPanel缩略图在按钮上单击上下滚动，如何屏蔽WrapPanel，以便当它们在框架外时不显示图块？例如，我在StackPanel上方有WrapPanel，其中包含向上和向下滚动按钮，但当我向下滚动时，缩略图会覆盖它们上方的StackPanel（以及按钮） 。到目前为止，这是我的XAML，请注意缩略图在运行时添加到WrapPanel：

更新

使用Dave Clemmer的XAML，我的布局更稳定，但最后我仍然以WrapPanel的内容超越了StackPanel。请参阅滚动事件之前和之后拍摄的这些屏幕抓取：

在滚动之前 -

滚动后 -

更新2

根据Dave的评论，将画布设置为红色背景。

在滚动之前 -

滚动后 -

Answer 1

嗯，我不会直截了当地说这个，但最终，这有效：

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

添加边框就可以了。感谢Dave的所有帮助！

Answer 2

听起来你不想要滚动条（没有ScrollViewer）并想要修复StackPanel。将StackPanel和WrapPanel保留在单独的Grid行中，例如：

<Grid> 
    <Grid.RowDefinitions> 
        <RowDefinition Height="Auto" /> 
        <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 
    <StackPanel Grid.Row="0" Height="150" HorizontalAlignment="Left" Margin="30,10,10,10" Name="stackPanel1" VerticalAlignment="Top" Width="Auto" Orientation="Horizontal" >  
        <Label Content="Home Navigator v0.1" FontFamily="Tahoma" FontSize="30" FontWeight="Bold" Foreground="White" />  
        <Button Content="Close" Height="50" Click="Button_Click" VerticalAlignment="Top"></Button>  
        <Button Content="Scroll Down" Height="50" Click="ScrollDown" VerticalAlignment="Top"></Button>  
    </StackPanel>  
    <Canvas Grid.Row="1">  
        <WrapPanel x:Name="spContainer"  
                   Width="{Binding ActualWidth,  
                           RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}">  
        </WrapPanel>      
    </Canvas>  
</Grid>