Question

我的视图将图像显示为第一层，而不是在图像上显示一堆形状（矩形，线条，圆圈）作为第二层。图像具有滚动条，因为它无法在我的视图中完全显示。奇怪的问题包含在这样的事实中，即形状显示在滚动条上。我该如何解决？

这是我的观点：

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

Answer 1

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

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

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

1 个答案: