带有 Overlay ItemsControl 的图像

Question

我找到了一个示例，如果我删除了ScrollViewer，它运行良好，但我需要ScrollViewer 中的图像。 TextBox 应该是图像的叠加层。

在此示例中，图像不在ScrollViewer 内。有人可以告诉我如何在里面添加图像吗？

<Image Grid.Column="2" HorizontalAlignment="Center" Source="/Images/Italien.png"
       Stretch="None"/>
    <ScrollViewer Grid.Column="2" Margin="2,2,2,2" HorizontalScrollBarVisibility="Visible"
                  VerticalScrollBarVisibility="Visible">
        <ItemsControl ItemsSource="{Binding Tests}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas IsItemsHost="True"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="Canvas.Left" Value="{Binding X}"/>
                    <Setter Property="Canvas.Top" Value="{Binding Y}"/>
                </Style>
            </ItemsControl.ItemContainerStyle>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBox Text="123" Foreground="Aqua" Background="Transparent"
                             FontSize="10" TextAlignment="Justify" BorderBrush="Red"
                             BorderThickness="1" Width="{Binding Width}"
                             Height="{Binding Height}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Image>

Answer 1

我不确定我是否了解您的要求，但您可以将 Image 和 ItemsControl 添加到面板（例如 Grid）中，然后将面板添加到 ScrollViewer：

<ScrollViewer Grid.Column="2" Margin="2,2,2,2" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
    <Grid>
        <Image Grid.Column="2" HorizontalAlignment="Center" Source="/Images/Italien.png" Stretch="None"/>
        <ItemsControl ItemsSource="{Binding Tests}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas IsItemsHost="True"/>

                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="Canvas.Left" Value="{Binding X}"/>
                    <Setter Property="Canvas.Top" Value="{Binding Y}"/>
                </Style>
            </ItemsControl.ItemContainerStyle>
            <ItemsControl.ItemTemplate>
                <DataTemplate>

                    <TextBox Text="123" Foreground="Aqua" Background="Transparent" FontSize="10" TextAlignment="Justify" BorderBrush="Red" BorderThickness="1" Width="{Binding Width}" Height="{Binding Height}"/>

                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</ScrollViewer>

一个 ScrollViewer 只能有一个 Child 元素，因此为了能够同时添加 Image 和其他一些元素，您需要将它们都添加到 Panel 中。

编辑：如果您想将图像设置为 Canvas ItemsPanel 的背景，您可以将 Canvas 的 Background 属性设置为 ImageBrush：

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <Canvas IsItemsHost="True">
            <Canvas.Background>
                <ImageBrush ImageSource="/Images/Italien.png" />
            </Canvas.Background>
        </Canvas>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>