如何屏蔽 WPF Wrappanel 的内容？

Question

您好，感谢您的浏览！

背景

这是这个问题的扩展：

如何在 WPF 包装面板内向上或向下滑动子项？

其中我询问如何以编程方式在按钮上向上或向下滚动 WrapPanel 的内容 点击。这个问题得到了很好的回答，并且接受的解决方案效果很好。

问题

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

使用 Dave Clemmer 的 XAML进行更新

，我的布局更加稳定，但最终我仍然得到 < code>WrapPanel 使其上方的 StackPanel 黯然失色。请查看滚动事件之前和之后拍摄的屏幕截图：

BEFORE SCROLL-

AFTER SCROLL-

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

添加边框就达到了目的。感谢戴夫的所有帮助！

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>