c# - 带有叠加项目控件的图像

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都添加到面板(例如，网格)中，然后将面板添加到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中。

编辑:如果希望将Image设置为Canvas ItemsPanel的背景，则可以将Canvas的Background属性设置为ImageBrush:

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <Canvas IsItemsHost="True">
            <Canvas.Background>
                <ImageBrush ImageSource="/Images/Italien.png" />
            </Canvas.Background>
        </Canvas>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>