locked
How do I make the buttons resize automatically RRS feed

  • Question

  • I have added a canvas and added a background Image. So what is happening is that when the image re sizes in the simulator the button does not re size accordingly moreover it changes its position and does not stay on the place as it was how do I make it change accordingly so that the button stays on the image in all resolutions?

    pratik

    Monday, September 9, 2013 8:55 AM

Answers

  • Hi

    Place the canvas into a viewbox and set your desired canvas width and height (1366 by 768 works well but play around) not only will your button change size accordingly but your image will maintain aspect ratio. Note that this will create a letterboxing effect on some resolutions.

    • Marked as answer by Pratik99 Monday, September 9, 2013 12:52 PM
    Monday, September 9, 2013 11:37 AM

All replies

  • Hi

    Place the canvas into a viewbox and set your desired canvas width and height (1366 by 768 works well but play around) not only will your button change size accordingly but your image will maintain aspect ratio. Note that this will create a letterboxing effect on some resolutions.

    • Marked as answer by Pratik99 Monday, September 9, 2013 12:52 PM
    Monday, September 9, 2013 11:37 AM
  • What is letter boxing effect?

    pratik

    Monday, September 9, 2013 12:52 PM
  • When the canvas doesn't fill the screen and is bordered by unused space.

    This is a red canvas at 1366 by 768 displayed on a 1280 by 1024 resolution. You can change the root grid color to the same as the canvas to remove the effect but I think it looks quite cool for some applications. Of course a transparent canvas background will also not produce the effect.


    • Edited by Peter DC Monday, September 9, 2013 1:07 PM
    Monday, September 9, 2013 1:05 PM
  • But I am using a picture which has texture and effects so what should I do this is only for 1280*1024 or any other resolutions will have this problem is so what should I do? So should I make my application in a low resoultion? Like should I set the canvas size to 1280*1024?

    pratik


    • Edited by Pratik99 Monday, September 9, 2013 1:33 PM
    Monday, September 9, 2013 1:32 PM
  • You image doesn't have to be in the viewbox , put it in your base grid or canvas then you can just place another canvas or grid to hold your buttons etc in a viewbox on top of your image. The button should still scale relative to your image but it's relative position will change. If the button needs to align to specific pixels in the image then they would both have to be in the same viewbox.

    Use the simulator to play around with different views and resolutions and you will see the different effects. Another thing to try is making your canvas width smaller thus creating a border effect around the image.

    Monday, September 9, 2013 1:48 PM
  • So imagine I put a viewbox and resize it to fit full screen then should I put the canvas size a bit less than 1366*768 as I am building it in a 1366*768 device

    pratik

    Monday, September 9, 2013 1:52 PM
  • Ultimately it's up to you but I would recommend that yes. Here are 2 screenshots at different resolutions from the simulator where I've set the canvas margins to 20.

    The canvas size is still set to 1366 by 768 it's just the margin properties i've changed.


    • Edited by Peter DC Monday, September 9, 2013 2:09 PM
    Monday, September 9, 2013 2:09 PM
  • But dont you think it makes it look bad only for one resoultion I will have to change the whole thing as I saw in the simulator only 1024 is having a problem

    pratik

    Monday, September 9, 2013 2:11 PM
  • Yes if you choose a good canvas size it should only affect a small number of users. The easiest is to set your canvas to 1366 by 768 and just let those users with odd resolutions experience some letterboxing , which I think most people will be accustomed to. 
    Monday, September 9, 2013 2:27 PM
  • Sir one more question how do I make the same thing for desktop I have put a picturebox but it is not resizing automatically when I maxmize and there is no viewbox.

    pratik

    Tuesday, September 10, 2013 12:24 PM
  • By desktop do you mean WPF or windows forms
    Tuesday, September 10, 2013 12:32 PM
  • Windows form

    pratik

    Tuesday, September 10, 2013 2:29 PM
  • First I would suggest you change to WPF and use the viewbox which is available there. If you must use winforms then you can use size changed events to determine when the form has changed size and then change the buttons size accordingly.

    If this doesn't help then try asking this as a new question in the windows forms forum, it's a long time since I worked with winforms.

    Tuesday, September 10, 2013 2:56 PM