Image with Overlay ItemsControl

问题

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.

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>

回答1:

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>

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.

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

来源：https://stackoverflow.com/questions/41462080/image-with-overlay-itemscontrol