WPF - When resizing using "Thumb" in Canvas, keep proportions

Question

I'm using Canvas' Background Image to show the image.

The size of this image is dynamic,
Resize the Canvas when loading an image.

Image Stretch of Background is "uniform"
At this time, the size of the canvas is adjusted according to the rendered size.

Then, place the Thumb in the lower right corner and adjust the size of the Canvas through DragDelta.

In this case, I want to get a hint to resize it according to the ratio of the original size.

I want to continuously enlarge and reduce the size while maintaining the aspect ratio.

horizontally
It should be adjusted between 300 and 900.

can you give me a hint

Answer 1

If you want the following animation effect, you could try to refer to the following example. Even if you don't drag and resize canvas proportionally, the canvas remains in its original proportions.

MainWindow.xaml:

<Grid Background="AliceBlue">  
        <Canvas x:Name="cvs" Width="300" Height="300" MaxWidth="900" MaxHeight="900" Canvas.Left="0" Canvas.Top="0" MinWidth="300" MinHeight="300" >  
            <Canvas.Background>  
                <ImageBrush ImageSource="ges.png" Stretch="Uniform"/>  
            </Canvas.Background>  
            <TextBox Canvas.Left="0"  Canvas.Top="0"  Name="changes"   
         Width="200"   Height="30"   Background="Pink" Foreground="Black"  
         BorderThickness="0"/>  
            <Thumb Name="myThumb" Canvas.Right="0" Canvas.Bottom="0" Background="Blue"   
      Width="10" Height="10" DragDelta="onDragDelta"   
      DragStarted="onDragStarted" DragCompleted="onDragCompleted" />  
        </Canvas>  
    </Grid>  

MainWindow.xaml.cs:

public partial class MainWindow : Window  
  {  
    public MainWindow()  
    {  
      InitializeComponent();  
    }  
    void onDragDelta(object sender, DragDeltaEventArgs e)  
    {  
      double yadjust = cvs.Height + e.VerticalChange;  
      double xadjust = cvs.Width + e.VerticalChange;  
      if (yadjust>=0 && xadjust>=0)  
      {  
        cvs.Width = yadjust;  
        cvs.Height = yadjust;  
        Canvas.SetLeft(myThumb, Canvas.GetLeft(myThumb) +  
                                e.HorizontalChange);  
        Canvas.SetTop(myThumb, Canvas.GetTop(myThumb) +  
                                e.VerticalChange);  
        changes.Text = "Size: " +  
                               cvs.Width.ToString(CultureInfo.InvariantCulture) +  
                               ", " +  
                               cvs.Height.ToString(CultureInfo.InvariantCulture);  
      }  
    }  
    void onDragStarted(object sender, DragStartedEventArgs e)  
    {  
      myThumb.Background = Brushes.Orange;  
    }  
    void onDragCompleted(object sender, DragCompletedEventArgs e)  
    {  
      myThumb.Background = Brushes.Blue;  
    }  
  }  

The result:

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.