覆盖ItemsControl的图像(Image with Overlay ItemsControl)

覆盖ItemsControl的图像(Image with Overlay ItemsControl)

我找到了一个例子，如果我删除了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>

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>

最满意答案

我不确定我是否理解您的要求，但您可以将Image和ItemsControl添加到Panel（例如Grid），然后将Panel添加到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>

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>