Question

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

Answer 1

我不确定我是否理解您的要求，但您可以将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>

覆盖ItemsControl的图像

1 个答案: