带有 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屋!