[version en cours de rédaction] | [version en cours de rédaction] |
Ligne 33 : | Ligne 33 : | ||
{{Tuto Step | {{Tuto Step | ||
|Step_Title=<translate>Project Name</translate> | |Step_Title=<translate>Project Name</translate> | ||
− | |Step_Content=<translate>Give your project a name, then click on | + | |Step_Content=<translate>Give your project a name, then click on Create</translate> |
+ | |Step_Picture_00=Easily_resizable_forms_for_any_screen_resolution_in_Visual_Studio_Project_Name.jpg | ||
+ | |Step_Picture_00_annotation={"version":"2.4.6","objects":[{"type":"image","version":"2.4.6","originX":"left","originY":"top","left":0,"top":0,"width":955,"height":607,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":0.63,"scaleY":0.63,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","cropX":0,"cropY":0,"src":"https://stuga.dokit.app/images/4/49/Easily_resizable_forms_for_any_screen_resolution_in_Visual_Studio_Project_Name.jpg","filters":[]},{"type":"wfnumberedbullet","version":"2.4.6","originX":"left","originY":"top","left":89,"top":70,"width":25,"height":25,"fill":"rgb(0,0,0)","stroke":"#FF0000","strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"objects":[{"type":"circle","version":"2.4.6","originX":"center","originY":"center","left":0,"top":0,"width":24,"height":24,"fill":"#FF0000","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":6.283185307179586},{"type":"text","version":"2.4.6","originX":"center","originY":"center","left":0,"top":0,"width":7.79,"height":15.82,"fill":"rgba(255,255,255,255)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"1","fontSize":14,"fontWeight":"normal","fontFamily":"arial","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"styles":{} }],"number":1},{"type":"wfnumberedbullet","version":"2.4.6","originX":"left","originY":"top","left":546,"top":329,"width":25,"height":25,"fill":"rgb(0,0,0)","stroke":"#FF0000","strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"objects":[{"type":"circle","version":"2.4.6","originX":"center","originY":"center","left":0,"top":0,"width":24,"height":24,"fill":"#FF0000","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":6.283185307179586},{"type":"text","version":"2.4.6","originX":"center","originY":"center","left":0,"top":0,"width":7.79,"height":15.82,"fill":"rgba(255,255,255,255)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"2","fontSize":14,"fontWeight":"normal","fontFamily":"arial","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"styles":{} }],"number":2}],"height":381,"width":600} | ||
}} | }} | ||
{{Tuto Step | {{Tuto Step | ||
− | |Step_Title=<translate></translate> | + | |Step_Title=<translate>Create the First Panel</translate> |
− | |Step_Content=<translate></translate> | + | |Step_Content=<translate>Add your first panel to the page by clicking on the panel option in the toolbox area, then clicking anywhere on the form.</translate> |
+ | |Step_Picture_00=Easily_resizable_forms_for_any_screen_resolution_in_Visual_Studio_Create_First_Panel.jpg | ||
+ | |Step_Picture_00_annotation={"version":"2.4.6","objects":[{"type":"image","version":"2.4.6","originX":"left","originY":"top","left":0,"top":0,"width":1500,"height":693,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":0.4,"scaleY":0.4,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","cropX":0,"cropY":0,"src":"https://stuga.dokit.app/images/8/8d/Easily_resizable_forms_for_any_screen_resolution_in_Visual_Studio_Create_First_Panel.jpg","filters":[]},{"type":"wfnumberedbullet","version":"2.4.6","originX":"left","originY":"top","left":41,"top":156,"width":25,"height":25,"fill":"rgb(0,0,0)","stroke":"#FF0000","strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"objects":[{"type":"circle","version":"2.4.6","originX":"center","originY":"center","left":0,"top":0,"width":24,"height":24,"fill":"#FF0000","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":6.283185307179586},{"type":"text","version":"2.4.6","originX":"center","originY":"center","left":0,"top":0,"width":7.79,"height":15.82,"fill":"rgba(255,255,255,255)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"1","fontSize":14,"fontWeight":"normal","fontFamily":"arial","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"styles":{} }],"number":1},{"type":"wfnumberedbullet","version":"2.4.6","originX":"left","originY":"top","left":227,"top":150,"width":25,"height":25,"fill":"rgb(0,0,0)","stroke":"#FF0000","strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"objects":[{"type":"circle","version":"2.4.6","originX":"center","originY":"center","left":0,"top":0,"width":24,"height":24,"fill":"#FF0000","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":6.283185307179586},{"type":"text","version":"2.4.6","originX":"center","originY":"center","left":0,"top":0,"width":7.79,"height":15.82,"fill":"rgba(255,255,255,255)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"2","fontSize":14,"fontWeight":"normal","fontFamily":"arial","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"styles":{} }],"number":2}],"height":277,"width":600} | ||
+ | }} | ||
+ | {{Tuto Step | ||
+ | |Step_Title=<translate>Dock the Panel</translate> | ||
+ | |Step_Content=<translate>Within the Layout section of the panel 1 properties, select Dock Bottom as in picture 1, your screen should look like picture 2</translate> | ||
+ | |Step_Picture_00=Easily_resizable_forms_for_any_screen_resolution_in_Visual_Studio_DockBottomProperties.jpg | ||
+ | |Step_Picture_01=Easily_resizable_forms_for_any_screen_resolution_in_Visual_Studio_DockBottomForm.jpg | ||
+ | }} | ||
+ | {{Tuto Step | ||
+ | |Step_Title=<translate>Add a sub-panel</translate> | ||
+ | |Step_Content=<translate>Add a new panel inside the existing panel by clicking on panel in the toolbox and clicking anywhere within panel 1, this will create panel 2, in its format properties, dock this to the right. then add a button into panel 2. | ||
+ | |||
+ | Your screen should be similar to the picture shown.</translate> | ||
+ | |Step_Picture_00=Easily_resizable_forms_for_any_screen_resolution_in_Visual_Studio_FirstButton.jpg | ||
+ | }} | ||
+ | {{Tuto Step | ||
+ | |Step_Title=<translate>Create a Header</translate> | ||
+ | |Step_Content=<translate>Add a panel in the main portion of the form, and dock it to the top, Insert a label into this panel (panel 3) and set properties as follows | ||
+ | |||
+ | Dock: Fill, (the centre box) | ||
+ | |||
+ | AutoSize: False | ||
+ | |||
+ | Text Align: Middle Centre | ||
+ | |||
+ | Border Style: Fixed Single | ||
+ | |||
+ | you should see your form as the picture</translate> | ||
+ | |Step_Picture_00=Easily_resizable_forms_for_any_screen_resolution_in_Visual_Studio_Header.jpg | ||
+ | }} | ||
+ | {{Tuto Step | ||
+ | |Step_Title=<translate>Create A Right Panel with a Splitter</translate> | ||
+ | |Step_Content=<translate>create another panel in the area between the header and footer, dock it to the right. Note that because this panel was placed after the header and footer panels, it only fills the area between them. Being to Front and Send to back will amend this. | ||
+ | |||
+ | To the left of this, add a splitter, then dock that to the right as well | ||
+ | |||
+ | Add a label into the right hand panel</translate> | ||
+ | |Step_Picture_00=Easily_resizable_forms_for_any_screen_resolution_in_Visual_Studio_RightPanel.jpg | ||
+ | }} | ||
+ | {{Tuto Step | ||
+ | |Step_Title=<translate>Fill the Rest</translate> | ||
+ | |Step_Content=<translate>Add a label to the left of the splitter and set the properties as follows | ||
+ | |||
+ | AutoSize: False | ||
+ | |||
+ | Text Align: Middle Centre | ||
+ | |||
+ | Border Style: Fixed Single | ||
+ | |||
+ | Back Colour: Control Dark | ||
+ | |||
+ | Dock: Fill</translate> | ||
+ | |Step_Picture_00=Easily_resizable_forms_for_any_screen_resolution_in_Visual_Studio_FinalForm.jpg | ||
+ | }} | ||
+ | {{Tuto Step | ||
+ | |Step_Title=<translate>Run The Project</translate> | ||
+ | |Step_Content=<translate>Compile and run the project by clicking on the start button | ||
+ | |||
+ | |||
+ | resize the running form, note how the button stays in the bottom corner and everything resizes and centralizes to suit the form | ||
+ | |||
+ | |||
+ | position your mouse on the line between the right panel and label 2, click the left mouse button and you will see the icon change to a splitter icon, you can resize the right hand panel in the running program by dragging the mouse from left to right while holding the left mouse button. | ||
+ | |||
+ | |||
+ | Was'nt that Easy?</translate> | ||
+ | |Step_Picture_00=Easily_resizable_forms_for_any_screen_resolution_in_Visual_Studio_Start.jpg | ||
+ | |Step_Picture_01=Easily_resizable_forms_for_any_screen_resolution_in_Visual_Studio_ExeForm.jpg | ||
}} | }} | ||
{{Notes}} | {{Notes}} |
This tutorial takes the developer through a way to create resizable forms in Visual Studio with NO CODING Required.
Auteur Stuga Engineer | Dernière modification 6/04/2020 par Stuga Engineer en cours de rédaction ⧼frevu-button-review-label⧽
Pas encore d'image
This tutorial takes the developer through a way to create resizable forms in Visual Studio with NO CODING Required.
Resizable, Forms, Visual, Studio, Screen, Resolution
On the start screen in Visual Studio, click on the "Create a New Project" button.
From the next screen
Add your first panel to the page by clicking on the panel option in the toolbox area, then clicking anywhere on the form.
Within the Layout section of the panel 1 properties, select Dock Bottom as in picture 1, your screen should look like picture 2
Add a new panel inside the existing panel by clicking on panel in the toolbox and clicking anywhere within panel 1, this will create panel 2, in its format properties, dock this to the right. then add a button into panel 2.
Your screen should be similar to the picture shown.
Add a panel in the main portion of the form, and dock it to the top, Insert a label into this panel (panel 3) and set properties as follows
Dock: Fill, (the centre box)
AutoSize: False
Text Align: Middle Centre
Border Style: Fixed Single
you should see your form as the picture
create another panel in the area between the header and footer, dock it to the right. Note that because this panel was placed after the header and footer panels, it only fills the area between them. Being to Front and Send to back will amend this.
To the left of this, add a splitter, then dock that to the right as well
Add a label into the right hand panel
Add a label to the left of the splitter and set the properties as follows
AutoSize: False
Text Align: Middle Centre
Border Style: Fixed Single
Back Colour: Control Dark
Dock: Fill
Compile and run the project by clicking on the start button
resize the running form, note how the button stays in the bottom corner and everything resizes and centralizes to suit the form
position your mouse on the line between the right panel and label 2, click the left mouse button and you will see the icon change to a splitter icon, you can resize the right hand panel in the running program by dragging the mouse from left to right while holding the left mouse button.
Was'nt that Easy?
en none 0 Draft
Vous avez entré un nom de page invalide, avec un ou plusieurs caractères suivants :
< > @ ~ : * € £ ` + = / \ | [ ] { } ; ? #