The resizable calculator I saw at a Windows Vista demonstration video.


  • I remember that I saw a calculator at a demonstration video for Windows Vista when Windows Vista was not released yet. The presenter resized the calculator at will and the calculator adjusted itself to the size. I mean all the buttons and the number display box were resized with the same ratio and relative size to the window. When I first saw it, I thought it was a new feature of Windows calculator, now knowing that Windows calculator doesn't work that way, I think it might have been a WPF application. Can I get a sample WPF application source like that, which adjusts the whole controls size. Not resizing, but more like a zoom. The difference between resizing and zoom is obvious. When you resize a button, the button grows but the button text remains the same size. When you zoom a button, the size ratio of the text and the botton remains always the same, meaning the text also grows.
    Monday, October 13, 2008 1:26 PM


All replies

  • I've been playing around with something similar lately at my work. We want a UI that can scale to be really large for touch screens that aren't very accurate. I've found that if you take the topmost Grid/Container/Whatever in your form and apply a Scale transform to it that the results are really nice. Everything underneath automatically scales, and since it's WPF you get a lot on nice smooth graphics to!

    If you want to stay proportional, the math is pretty easy. Save the bounds of the control you'll be scaling when the form first starts, then on every resize take the new size and divide it by the original. Determine which dimension is smaller (X or Y), and scale the entire form by the smallest ratio.


            protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
                Grid content = this.Content as Grid;
                if (content != null)
                    double scaleX = sizeInfo.NewSize.Width / originalSize.Width;
                    double scaleY = sizeInfo.NewSize.Height / originalSize.Height;

                    double scaleRatio = 1.0;
                    if (scaleX < scaleY)
                        scaleRatio = scaleX;
                        scaleRatio = scaleY;

                    ScaleTransform scale = new ScaleTransform(scaleRatio, scaleRatio);
                    content.RenderTransform = scale;

    There's still a few quirks that I need to work out with this approach, mostly involving the grid trying to autosize to the window in addition to the scaline (which gives clipping artifacts at smaller sizes), but overall this seems to work great. Hope that helps!
    Monday, October 13, 2008 1:45 PM
  • Or you could just put a Viewbox as the root element of the Window which will scale the content for you.


    Monday, October 13, 2008 1:48 PM