图像的一部分内的WPF ScrollableViewer

Question

我想在WPF中将可滚动容器放在图像上或其中。 然后，用户将能够在图像被修复时滚动容器。我想要实现的目标是模拟智能手机的内容。在这张图片中，智能手机是图像，容器似乎在这个内部：

最佳做法是什么？

谢谢！

Answer 1

您可以将您的Container放入ScrollViewer标记：

<Window x:Class="WpfApplication2.Test"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Test" 
        Height="300" 
        Width="300">
<Grid>
    <ScrollViewer HorizontalAlignment="Left" Height="299" Margin="10,10,0,0"
          VerticalAlignment="Top" Width="497">
        <StackPanel>
           //Contorls like image ,button etc
        </StackPanel>
    </ScrollViewer>
</Grid>

Answer 2

您可以设置图像 - 它具有透明角 - 作为包含网格的背景，然后将ScrollViewer放入网格并指定边缘的边距。

<Grid>
    <Grid.Background>
        <ImageBrush ImageSource="phone.png"/>
    </Grid.Background>        
    <ScrollViewer Margin="20, 30, 20, 30" Background="White"/>
</Grid>

Answer 3

我对你的目标并不完全清楚，但是......如果你想基本上拥有静态背景图像并将控件放在它前面，一种方法是将你的Image和ScrollViewer放在一个1x1网格作为兄弟孩子们都填补了空间。第二个孩子将覆盖第一个孩子。 e.g。

<Grid>
    <Image ... />
    <ScrollViewer Background="Transparent" ...>
    </ScrollViewer>
</Grid>

使用透明背景画笔仍然允许ScrollViewer（或其他容器）处理鼠标输入以进行单击/悬停/鼠标滚动。或者，使用{x：Null}将使非拦截背景和鼠标输入将由底层Ima​​ge控件处理。