C# 滚动图像：图形形状覆盖滚动条-如何修复？

我的视图将图像显示为第一层，而将图像上的一组形状（矩形、直线、圆）显示为第二层。 图像有一个滚动条，因为它不能完全显示在我的视图上。 奇怪的是，形状显示在滚动条上。 我怎样才能修好它

以下是我的看法：

 <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="500" />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="500" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">
            <Image Source="{Binding VM.ManipulatedImage}" 
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch"
            Stretch="None"           
            Width="Auto" Height="Auto"/>

        </ScrollViewer>


        <ItemsControl 
            ItemsSource="{Binding VM.Shapes, Mode=TwoWay}" 
            Grid.Row="0" Grid.Column="0">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Path Data="{Binding Geometry}"
                            Fill="{Binding Fill}"
                            Stroke="{Binding Stroke}"
                            StrokeThickness="{Binding StrokeThickness}"
                            Opacity="{Binding Opacity}"
                              />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

    </Grid>

---

将ScrollViewer放在网格周围。网格很高兴有多个孩子

<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">
    <Grid >
    <Grid.RowDefinitions>
        <RowDefinition Height="500" />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="500" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

        <Image Source="{Binding VM.ManipulatedImage}" 
        HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch"
        Stretch="None"           
        Width="Auto" Height="Auto"/>
    <ItemsControl 
        ItemsSource="{Binding VM.Shapes, Mode=TwoWay}" 
        Grid.Row="0" Grid.Column="0">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Path Data="{Binding Geometry}"
                        Fill="{Binding Fill}"
                        Stroke="{Binding Stroke}"
                        StrokeThickness="{Binding StrokeThickness}"
                        Opacity="{Binding Opacity}"
                          />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

</Grid>
</ScrollViewer>

这一点也不奇怪。ItemsControl不是ScrollViewer的子元素。相反，两者都是顶级网格的子级，位于同一单元格中，ItemsControl位于ScrollViewer的顶部。如何修复它？如果我将Items控件放在scrollview中，它会显示-not pssible。如果我将items控件放在image之前，它不会显示。@J.Doe您找到解决方案了吗？如果我按照您建议的方式执行，滚动条将被禁用并且无法工作。我很难看到您的目标，因为我没有您的图像，或者您绑定到的项目集合，或者您看到的屏幕截图。你是说“滚动条被禁用且不工作”，但由于没有任何东西会使其禁用，我将其解释为滚动条已启用，但无处可滚动，这意味着它认为它正在显示需要显示的所有内容。我猜您正在查看的窗口/控件>500x500-尝试将其缩小，滚动条将正常工作（除非它之外有其他内容）。（不相关；但我认为这可能是WPF绑定的一个有用的一般学习点）到ItemsSource的绑定不需要是双向的，因为ItemsControl的“ItemsSource”属性不会更新该集合。不，图像很大，我可以在我的初始版本中滚动它，我指出了另一个问题。我放置什么样的形状并不重要，因为问题在于图像滚动