WPF Resize UserControl with aspect ratio

I have a UserControl and that UserControl has to be resized with aspect ratio. That means: width:height = 2:1. Currently I am using this code:

protected override Size ArrangeOverride(Size arrangeBounds) { if (ActualWidth == 0 || ActualHeight == 0) return arrangeBounds; base.ArrangeOverride(arrangeBounds); double ratio = 2; if (Parent != null) { var size = new Size(arrangeBounds.Height * ratio, arrangeBounds.Height); double containerWidth = ((FrameworkElement)Parent).ActualWidth; if (containerWidth < size.Width) { double newHeight = arrangeBounds.Height * (containerWidth / size.Width); canvas.Width = newHeight * ratio; canvas.Height = newHeight; } else { canvas.Width = size.Height * ratio; canvas.Height = size.Height; } } return arrangeBounds; }

But it is not really working. That means it works but not every time. If I max. the window it sometimes does not get resized, so its a bit "random" if the control gets resized. So if someone would have a better solution if would be very nice.


It's a bit late, but I recently came across the same problem and since I did not find a good solution I decided to write my own layout control/decorator and wrote a blog post about it here:


Basically my solution was to overwrite both MeasureOverride and ArrangeOverride. So far it works very nicely in all of the common containers and I didn't encounter any problems like you described.

I recommend reading the post, where you find a working decorator control, but the most important methods are these:

protected override Size MeasureOverride(Size constraint) { if (Child != null) { constraint = SizeToRatio(constraint, false); Child.Measure(constraint); if(double.IsInfinity(constraint.Width) || double.IsInfinity(constraint.Height)) { return SizeToRatio(Child.DesiredSize, true); } return constraint; } // we don't have a child, so we don't need any space return new Size(0, 0); } protected override Size ArrangeOverride(Size arrangeSize) { if (Child != null) { var newSize = SizeToRatio(arrangeSize, false); double widthDelta = arrangeSize.Width - newSize.Width; double heightDelta = arrangeSize.Height - newSize.Height; double top = 0; double left = 0; if (!double.IsNaN(widthDelta) && !double.IsInfinity(widthDelta)) { left = widthDelta/2; } if (!double.IsNaN(heightDelta) && !double.IsInfinity(heightDelta)) { top = heightDelta/2; } var finalRect = new Rect(new Point(left, top), newSize); Child.Arrange(finalRect); } return arrangeSize; } public Size SizeToRatio(Size size, bool expand) { double ratio = AspectRatio; double height = size.Width / ratio; double width = size.Height * ratio; if (expand) { width = Math.Max(width, size.Width); height = Math.Max(height, size.Height); } else { width = Math.Min(width, size.Width); height = Math.Min(height, size.Height); } return new Size(width, height); }

I hope it helps someone!


The most straightforward solution would be to Bind the Height directly to the Width, through a value converter.


Wrap your Control with a ViewBox and set the ViewBox.Stretch to Uniform. You can also restrict on MaxWidth and MaxHeight that way.

More Info on the Stretch-Enumeration @ MSDN

How to apply Stretch @ MSDN


  • Using Reactive Extension for certain KeyPress sequences?
  • python, confused in decorate and closure
  • DropShadowPanel adapt to button template style
  • Zend Framework bassed projects
  • ZipList with Scalaz
  • Problem with Django using Apache2 (mod_wsgi), Occassionally is “unable to import from module” for no
  • How to draw a line dynamically in android [duplicate]
  • How do I superscript characters in a UIButton?
  • Chart.js Multiple dataset
  • Scrapy recursive link crawler
  • NetLogo BehaviorSpace - Measure runs using reporters
  • Nant, Vault & Windows Integrated Authentication
  • What is Eclipse's Declaration View used for?
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Bug in WPF DataGrid
  • How to recover from a Spring Social ExpiredAuthorizationException
  • Excel - Autoshape get it's name from cell (value)
  • Check if a string to interpolate provides expected placeholders
  • ILMerge & Keep Assembly Name
  • Join two tables and save into third-sql
  • How to handle AllServersUnavailable Exception
  • Arrow is showed instead of the material design version hamburger icon. Why doesn't syncState in
  • How to model a transition system with SPIN
  • Large data - storage and query
  • ORA-29908: missing primary invocation for ancillary operator
  • jQuery tmpl and DataLink beta
  • How can I estimate amount of memory left with calling System.gc()?
  • WOWZA + RTMP + HTML5 Playback?
  • RestKit - RKRequestDelegate does not exist
  • Traverse Array and Display in markup
  • Matrix multiplication with MKL
  • PHP: When would you need the self:: keyword?
  • Hits per day in Google Big Query
  • File not found error Google Drive API
  • How can I remove ASP.NET Designer.cs files?
  • python draw pie shapes with colour filled
  • Is there any way to bind data to data.frame by some index?
  • How can i traverse a binary tree from right to left in java?
  • Android Heatmap on canvas or ImageView
  • Converting MP3 duration time