C# 在调整大小的图像上覆盖多个矩形

我是WPF的新手，我正在尝试在每张图像的人脸上绘制矩形来可视化图像。 我有关于每个图像中每个矩形的宽度、高度、左上角X和Y坐标（相对于原始图像的像素数）的信息

我的C#：

公共类FaceRectangle
{
矩形矩形；
公共面矩形（整数topX、整数topY、整数宽度、整数高度）
{
rect=新矩形（topX、topY、宽度、高度）；
}
公共int X{get{return rect.X；}}
公共int Y{get{return rect.Y；}}
公共整数宽度{get{return rect.Width；}}
公共整数高度{get{return rect.Height；}}
...
}
公开课照片
{
公共位图图像Img{get；set；}
公共字符串文件名{get；private set；}
公共可观测集合面{get；private set；}
...
}
公共级光采集：可观测采集
{
...
}

在浏览了相关的问题之后，这是我的XAML——但是我很难在图像上覆盖矩形，并调整它们的大小和位置以匹配图像。我应该如何实现这一目标

更新的XAML

<Window x:Class="TempFaceViewer.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:er="clr-namespace:TempFaceViewer"
        xmlns:scm="clr-namespace:System.ComponentModel;assembly=System">

<Window.Resources>
    <Style TargetType="{x:Type ListBoxItem}" x:Key="ImageListItem">
        <Style.Resources>
            <!-- Background of selected item when focussed -->
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Gray" />
        </Style.Resources>
    </Style>

    <!-- Main photo catalog view -->
    <Style TargetType="{x:Type ListBox}" x:Key="PhotoListBoxStyle">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBox}" >
                    <WrapPanel Margin="5" IsItemsHost="True" Orientation="Horizontal" 
                   ItemHeight="95" 
                   ItemWidth="95" 
                   VerticalAlignment="Top" HorizontalAlignment="Stretch" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Image Template -->
    <DataTemplate DataType="{x:Type er:Photo}">
        <Grid VerticalAlignment="Center" HorizontalAlignment="Center" Margin="6">
            <!-- Drop Shadow -->
            <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="4" Background="#44000000">
                <Border.RenderTransform>
                    <TranslateTransform X="5" Y="5" />
                </Border.RenderTransform>
                <Border.BitmapEffect>
                    <BlurBitmapEffect Radius="8" />
                </Border.BitmapEffect>
            </Border>
            <!-- Image Template -->
            <Border Padding="4" Background="White" BorderBrush="#22000000" BorderThickness="1">
                <Image Source="{Binding Img}" />
            </Border>
        </Grid>
    </DataTemplate>
</Window.Resources>

<Grid DataContext="{Binding Source={StaticResource Photos}}">
    <Grid.RowDefinitions>
        <RowDefinition Height="100*" />
        <RowDefinition Height="100*" />
    </Grid.RowDefinitions>

    <DockPanel Grid.Column="0" Grid.Row="0" Margin="0,0,0,10" Height="160">

            <ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
                <ListBox 
                IsSynchronizedWithCurrentItem="True"
                Name="PhotosListBox" 
                Style="{StaticResource PhotoListBoxStyle}" 
                Margin="5" 
                SelectionMode="Extended" 
                ItemsSource="{Binding}" 
                SelectedIndex="0" 
                ItemContainerStyle="{StaticResource ImageListItem}"                   
                >
                </ListBox>
            </ScrollViewer>

    </DockPanel>

    <Viewbox Grid.Column="0" Grid.Row="1">
        <Grid>
            <Image Source="{Binding Img}" />
            <ItemsControl ItemsSource="{Binding Faces}" HorizontalAlignment="Left" VerticalAlignment="Top">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas IsItemsHost="True" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate DataType="er:FaceRectangle">
                        <Rectangle Width="{Binding Width}" Height="{Binding Height}" Stroke="Red" StrokeThickness="1" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemContainerStyle>
                    <Style>
                        <Setter Property="Canvas.Left" Value="{Binding X}" />
                        <Setter Property="Canvas.Top" Value="{Binding Y}" />
                    </Style>
                </ItemsControl.ItemContainerStyle>
            </ItemsControl>
        </Grid>
    </Viewbox>

</Grid>
</Window>

---

谢谢

改为在ItemContainerStyle中设置画布的上/左属性，并将背景图像和ItemsControl放置在网格中，以便它们重叠、对齐并使用相同的比例（像素）。如果将此栅格包裹在视口中，则所有内容都将根据需要一起缩放：

<Viewbox>
    <Grid>
        <Image Source="{Binding Img}" />
        <ItemsControl ItemsSource="{Binding Faces}" HorizontalAlignment="Left" VerticalAlignment="Top">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas IsItemsHost="True" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate DataType="er:FaceRectangle">
                    <Rectangle Width="{Binding Width}" Height="{Binding Height}" Stroke="Red" StrokeThickness="1" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="Canvas.Left" Value="{Binding X}" />
                    <Setter Property="Canvas.Top" Value="{Binding Y}" />
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>
    </Grid>
</Viewbox>

更新：您必须在页面上发布任何其他代码。我试着把它放在你描述的网格中，效果很好，在我的窗口中除了这个没有其他东西：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100*" />
        <RowDefinition Height="100*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100*" />
        <ColumnDefinition Width="100*" />
    </Grid.ColumnDefinitions>
    <Viewbox Grid.Column="0" Grid.Row="1">
        <Grid>
            <Image Source="{Binding Img}" />
            <ItemsControl ItemsSource="{Binding Faces}" HorizontalAlignment="Left" VerticalAlignment="Top">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas IsItemsHost="True" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate DataType="er:FaceRectangle">
                        <Rectangle Width="{Binding Width}" Height="{Binding Height}" Stroke="Red" StrokeThickness="1" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemContainerStyle>
                    <Style>
                        <Setter Property="Canvas.Left" Value="{Binding X}" />
                        <Setter Property="Canvas.Top" Value="{Binding Y}" />
                    </Style>
                </ItemsControl.ItemContainerStyle>
            </ItemsControl>
        </Grid>
    </Viewbox>
</Grid>

---

我怀疑您在其他地方有资源（例如样式、数据模板等）正在更改默认行为，尝试在一个独立的应用程序中运行我的代码。

您还应该在图像控件上设置

Stretch=“None”

。诚实的问题：在这种情况下确实需要这样做吗？如果我错了，请纠正我的错误，但是在ViewBox中包装网格应该使其自身大小与图像一致，在这种情况下，实际上不需要设置“拉伸”。总是愿意被证明是错的…你是对的，我没有意识到Viewbox。但将“拉伸”设置为“无”还是有意义的，以防OP不使用视图框，而是更喜欢以绝对坐标显示所有内容。@MarkFeldman谢谢您的回答！但它仍然无法正确调整矩形的大小或放置矩形。我将Viewbox放在外部网格（应用程序的布局）中，因此对XAML的唯一修改是。但是看起来矩形被调整了大小并以不同的比例放置-因此它们太大并且偏移不正确，有时会流入相邻的面板。@MarkFeldman我已经用完整的XAML部分更新了文章-我看不到现有样式会如何影响最终输出。其目的是在顶部有一个电影带，在底部有一张照片。照片是一种光收集。我感谢你的帮助！格式化快把我逼疯了！

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100*" />
        <RowDefinition Height="100*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100*" />
        <ColumnDefinition Width="100*" />
    </Grid.ColumnDefinitions>
    <Viewbox Grid.Column="0" Grid.Row="1">
        <Grid>
            <Image Source="{Binding Img}" />
            <ItemsControl ItemsSource="{Binding Faces}" HorizontalAlignment="Left" VerticalAlignment="Top">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas IsItemsHost="True" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate DataType="er:FaceRectangle">
                        <Rectangle Width="{Binding Width}" Height="{Binding Height}" Stroke="Red" StrokeThickness="1" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemContainerStyle>
                    <Style>
                        <Setter Property="Canvas.Left" Value="{Binding X}" />
                        <Setter Property="Canvas.Top" Value="{Binding Y}" />
                    </Style>
                </ItemsControl.ItemContainerStyle>
            </ItemsControl>
        </Grid>
    </Viewbox>
</Grid>