UserControl with Bounding Box Scaling Point框

Question

我想像这张图片一样UserControl;

有9个盒子，顶部用于旋转，而另一个用于缩放。我尝试使用网格和背景图像，2行和带StackPanel的小方框进行此操作，但必须提供大量的负边距和正边距才能实现此结果。有没有简单的方法可以帮助。

感谢。

Answer 1

这样的东西？

<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
     <Grid.RowDefinitions>
         <RowDefinition Height="25"/>
         <RowDefinition Height="Auto"/>
     </Grid.RowDefinitions>
     <Grid.Resources>
         <Style TargetType="Rectangle">
             <Setter Property="Stroke" Value="Black"/>
             <Setter Property="StrokeThickness" Value="1"/>
             <Setter Property="Height" Value="11"/>
             <Setter Property="Width" Value="11"/>
             <!-- For hittestvisibility -->
             <Setter Property="Fill" Value="Transparent"/>
         </Style>
     </Grid.Resources>

     <Line X1="0" Y1="1" X2="0" Y2="0" Stretch="Fill" Stroke="Black" />
     <Rectangle VerticalAlignment="Top" HorizontalAlignment="Center"/>

     <Grid Grid.Row="1" Height="200" Width="200" Margin="-5">

         <Rectangle Margin="5" Height="Auto" Width="Auto" Fill="{x:Null}"/>
         <Rectangle VerticalAlignment="Top" HorizontalAlignment="Left"/>
         <Rectangle VerticalAlignment="Top" HorizontalAlignment="Center"/>
         <Rectangle VerticalAlignment="Top" HorizontalAlignment="Right"/>
         <Rectangle VerticalAlignment="Center" HorizontalAlignment="Left"/>
         <Rectangle VerticalAlignment="Center" HorizontalAlignment="Right"/>
         <Rectangle VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
         <Rectangle VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
         <Rectangle VerticalAlignment="Bottom" HorizontalAlignment="Right"/>

         <!-- The Content -->
         <Rectangle Width="Auto" Height="Auto" Margin="20" Fill="Green"/>
         <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" 
                        Text="Content"/>
     </Grid>
</Grid>

术语是Bounding Box