How to resize the interface of overall all panels

I just used the style sheet to change my sizes.

look for the file called /PhotoEditor/Styles/PhotoEditorSample.css in your project, you should see sizes there for all the controls

Nate

below is a copy of the default css file, I've bolded the places you might need to change:

/* Styles for PhotoEditor sample. */

.PhotoEditorSample
{
position: relative;
border: solid 1px #929292;
background-color: #7FA7E5;
background-image: url("../Images/BodyGradient.png");
background-position: bottom;
background-repeat:repeat-x;
top: 0px;
left: 0px;
width: 870px;/* change this to 490px */
height: 575px;
}

.PhotoEditorSampleQualityMeter
{
position: absolute;
top: 500px;
left: 270px;
}

.PhotoEditorSampleStatusPanel
{
position: absolute;
top: 4px;
left: 847px;
}

.PhotoEditorSampleControlPanel
{
position: absolute;
top: -2px;
left: -2px;
}

.PhotoEditorSampleCommandPanel
{
position: absolute;
top: 42px;
left: 10px;
}

.PhotoEditorSampleImagePanel
{
position:absolute;
top: 42px;
right: 10px;
}

.PhotoEditorButtons
{
position: absolute;
top: 500px;
right: 20px;
width: 200px;
height: auto;
text-align: right;
}

.PhotoEditorRestoreButton, .PhotoEditorShowButton
{
visibility: inherit;
text-align: center;
width: 200px;
height: 24px;
margin: 2px;
background-image: url("../Images/PhotoEditorButton.gif");
background-repeat: no-repeat;
background-color: Transparent;
color: #FFFFFF;
border: 0px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
font-weight: 700;
}


.PhotoEditorRestoreButton:disabled, .PhotoEditorShowButton:disabled
{
background: url( "../Images/PhotoEditorButtonDisabled.gif" ) no-repeat;
color: #555555;
}


notice that each section of the interface is absolutely positioned. if you change the width or height, you'll have to change the positions accordingly as well. just make the change in the css and then hit ctrl+f5 (refresh) in the browser and you should see the change immediately without the need to recompile

Nate