带有 Overlay ItemsControl 的图像 [英] Image with Overlay ItemsControl

问题描述

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

I found a example and it works well, if I remove the ScrollViewer, but I need the image inside of the ScrollViewer. The TextBox shall be a overlay of the image.

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

In this example the image is not inside the ScrollViewer. Could somebody please advise how I go about adding the image inside?

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

推荐答案

我不确定我是否理解您在这里的要求，但您可以将 Image 和 ItemsControl 添加到面板(例如 Grid)，然后添加滚动查看器的面板:

I am not sure that I understand your requirements here but you could add both the Image and the ItemsControl to a Panel such as for example a Grid and then add the Panel to the 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 只能有一个子元素，所以为了能够同时添加一个图像和其他一些元素，你需要将它们都添加到一个面板中.

A ScrollViewer can only have a single Child element so in order to be able to add both an Image and some other element to it you need to add both of them to a Panel.

如果要将图像设置为 Canvas ItemsPanel 的背景，您可以将 Canvas 的 Background 属性设置为 ImageBrush:

If you want the to set the Image as the background of the Canvas ItemsPanel you could set the Background property of the Canvas to an ImageBrush:

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

这篇关于带有 Overlay ItemsControl 的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！