UserControl with Bounding Box Scaling Point框

Question

I want to make a UserControl like this image;

There are 9 boxes, top one is for rotating, while other one is for scaling purposes. I tried to make this with grid and background image, 2 rows, and small boxes with StackPanel , but have to provide lots of negative and positive margins to achieve this result. Is there any easy way to do so need help.

Thanks.

Answer 1

Something like this?

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

The terminology is Bounding Box