我找到了一个例子,如果我删除了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>更多推荐
发布评论