크기가 조정 된 이미지에 여러 사각형을 오버레이합니다.

Question

저는 WPF를 처음 사용하고 각 이미지의면에 직사각형을 사용하여 이미지를 시각화하려고합니다. 각 이미지의 각 사각형의 너비, 높이, 왼쪽 상단 X 및 Y 좌표 (원본 이미지의 픽셀 단위)에 대한 정보가 있습니다.

내 C 번호 :

public class FaceRectangle 
{ 
    Rectangle rect;   

    public FaceRectangle(int topX, int topY, int width, int height) 
    { 
     rect = new Rectangle(topX, topY, width, height); 
    } 
    public int X { get { return rect.X; } } 
    public int Y { get { return rect.Y; } } 
    public int Width { get { return rect.Width; } } 
    public int Height { get { return rect.Height; } } 
    ... 
} 

public class Photo 
{ 
    public BitmapImage Img { get; set; } 
    public string Filename { get; private set; } 

    public ObservableCollection<FaceRectangle> Faces { get; private set; } 
    ... 
} 

public class PhotoCollection : ObservableCollection<Photo> 
{ 
... 
} 

관련 질문을 통해 검토 한 결과,이 내가 가지고있는 XAML입니다 -하지만 난 문제가 이미지에 사각형을 오버레이 이미지에 맞게 크기와 posiiton를 조정하는 데 문제가 있습니다. 어떻게 이것을 달성해야합니까?

는 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> 

감사합니다!

Answer 1

대신 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> 

UPDATE를 : 당신은 페이지의 다른 코드를 게시해야합니다. 당신이 설명하는대로 내가 그리드에 넣어 시도하고 잘 작동, 다른 내 창에 아무 것도이보다가 없습니다 :

<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> 

난 당신이 다른 곳 (예 : 스타일, DataTemplates 등) 자원을 가지고 용의자 격리 된 응용 프로그램에서 내 코드를 실행하면서 기본 동작을 변경하고 있습니다.