In questo video vedremo la toolbar Layout in Visual Basic 2010, che è una barra degli strumenti e che contiene una serie di funzioni che ci permetteranno di organizzare in maniera semplice ed automatica i vari controlli che sono presenti sul nostro Form, ridimensionandoli oppure e spostandoli, allineandoli, così via. Vediamo quindi un nuovo progetto e lo chiamiamo applicazione layout. Premiamo quindi il pulsante ok e come al solito vediamo riportati nell'ambiente di progettazione, l'IDE di Visual Basic 2010. Della nostra finestra quel che dobbiamo fare adesso è visualizzare questa toolbar Layout, per cui andiamo sul menù principale clicchiamo su visualizza barre degli strumenti, e ci compare un elenco delle barre degli strumenti che è possibile aggiungere a quelle già presenti nella finestra di progettazione. Sono segnate con una spunta e in questo momento è presente soltanto quindi la toolbar Standard . Dobbiamo aggiungere la toolbar Layout, per cui clicchiamo sulla voce Layout. Ora c'è comparsa nello spazio delle toolbar, proprio la toolbar layout che ci interessava. Quindi il pulsante di questo o di questa toolbar possiamo vedere che sono tutti disabilitati infatti sono tutti il grigio. Possiamo notare la differenza con la toolbar superiore di Visual Basic 2010, che invece presenta i pulsanti colorati. Questo significa che non sono abilitati. Sono in grigio questi pulsanti perché sono riferiti i controlli ci sono una serie di azioni che possono essere eseguite sui controlli presenti sul Form, ma non essendoci ancora controlli allora tutte le funzioni sono naturalmente disabilitate. Per poter riabilitare i pulsanti, dobbiamo quindi aggiungere alcuni controlli sul Form. Prendiamo ad esempio un pulsante e il secondo pulsante, come abbiamo fatto nell'esempio precedente estendiamo in orizzontale Button2 in modo che più o meno sia il doppio di Button1. Possiamo vedere che se selezioniamo il controllo alcune funzioni sono adesso abilitate. Alcune funzioni presenti su questa toolbar sono applicabili a solo un controllo, altre funzioni sono invece applicabili a entrambi controlli. Cioè si applicano nel confronto tra due controlli. Se infatti selezionassimo entrambi i controlli, ecco che alcune funzioni sono adesso abilitate. Ma ripartiamo dall'inizio: selezioniamo il primo controllo cioè Button2. Sono abilitate soltanto queste funzioni. Vediamo quali sono: dapprima il "Centra nel form orizzontalmente". Questo ci permette di centrare nell'area della nostra finestra questo controllo. Per cui facciamo una prova: lo mettiamo in una posizione decentrata e clicchiamo su "centra nel form orizzontalmente". C'aspettiamo che la sua posizione cambi e sia allineata orizzontalmente nel form infatti vediamo che risulta proprio questo. Per avere il controllo posizionato esattamente nel punto centrale dovremmo fare un passo successivo cliccare il pulsante e che compare dopo "Centra nel form verticalmente". Adesso il controllo è esattamente nel punto centrale del form. Punto centrale che esclude sia il bordo del form, sia la barra del titolo, per cui la posizione è centrale rispetto soltanto l'area grigia. Vediamo adesso le altre due funzioni che compaiono successivamente "Porta in primo piano" "Porta in secondo piano" può infatti succedere qualche volta che due controlli siano sovrapposti uno sull'altro ad esempio Button1 è sovrapposto rispetto a Button1. Nel caso in cui invece volessimo che sia Button1 ad essere sovraesposto rispetto Button2, dovremmo cliccare sul primo pulsante "Porta in primo piano". Ecco che effettivamente Button1 compare e sopra Button2. Possiamo vedere che Button2 copre completamente o quasi Button1, possiamo riportare in primo piano Button2 cliccando sempre "Porta in primo piano". Siamo ritornati più o meno alla situazione precedente. Possiamo riportare Button2 dietro rispetto Button1 anche premendo l'altro pulsante "Porta in secondo piano". Così facendo ritroviamo Button1 in primo piano strettamente sui controlli com'erano prima quindi Button1 e Button2 con Button1 la metà di Button2. Clicchiamo su quest'ultimo pulsante "Ordine di tabulazione" ci mostra l'ordine di tabulazione dei controlli cioè l'ordine col quale verranno selezionati controlli il momento in cui si andrà a ripetutamente premere il pulsante TAB su questa finestra. Per cui un indice di tab pari a zero significa che il primo controllo e che riceverà il focus cioè che sarà attivato all'apertura della finestra premendo il tasto TAB il focus andrà posizionarsi sul controllo successivo. Controllo con un tabindex successivo cioè un tabindex successivo ce l'ha proprio Button2. Se avessimo un terzo controllo secondo la regola che abbiamo appena visto, andremo a prendere il tabindex ancora successivo rispetto all'ultimo controllo. Aggiungiamo una casella di testo questa casella di testo avrà un indice presumibilmente tre. Infatti è così. Possiamo anche modificare TabIndex di ciascun controllo o tramite la proprietà, quindi premendo su Button2 e selezionando le proprietà TabIndex, oppure cliccando su questa casella, fino a selezionare il TabIndex che ci interessa. Naturalmente più controlli possono avere lo stesso TabIndex. Adesso andiamo a vedere tutte le funzioni chein Visual Basic 2010 regolano il rapporto tra due o più controlli, ad esempio proviamo a selezionare il pulsante di Button2 cliccando il tasto sinistro del mouse. Premiamo quindi il tasto Control della tastiera e senza rilasciarlo clicchiamo su Button1, in modo da selezionare entrambi controlli. Possiamo vedere che vengono abilitate una serie di funzioni sulla toolbar Layout. Vediamole le principali. “Rimuovi spaziatura verticale”: questi si permette di rimuovere lo spazio che intercorre tra un controllo dell'altro verticalmente per cui lo spazio verticale che c'è tra un controllo all'altro. In questo caso c'aspetteremo che dopo aver cliccato questo pulsante Button1 e Button2 vadano ad unirsi verticalmente fino a toccarsi. Proviamo a verificare ed effettivamente è così. La funzione successiva, introdotta in Visual Basic 2010, permette di effettuare una rimozione progressiva dello della spaziatura verticale quindi diminuire piano piano la spaziatura verticale senza però annullarla immediatamente vediamo che cosa succede il pulsante Button2 comincia ad alzarsi finché alla terza alla quarta pressione di questo pulsante la spaziatura non sarà praticamente annullata. La successiva funzione permette invece di aumentare lo spazio verticale, per cui ci permette di aumentare lo spazio che intercorre tra questi due controlli. questo pulsante ci permette di rendere uguali e le spaziature fra tre controlli. Ad esempio proviamo a inserire un altro pulsante chiamato Button3. Ci aspettiamo che le spaziature tra Button1 e Button2 e tra Button2 e Button3 alla pressione di questo pulsante risultino uguali, ed effettivamente è proprio così. Questa serie di giochetti può essere fatta anche in orizzontale ad esempio per posizioniamo due controlli allineati orizzontalmente. Li selezioniamo entrambi clicchiamo su Button1, premiamo il tasto Control e senza rilasciarlo clicchiamo su Button2 e vediamo la prima funzione “Rimuovi spaziatura orizzontale”. C'aspettiamo che questa spaziatura scompaia. Riportiamo il controllo nella posizione originale e clicchiamo. Questo è stata la funzione la diminuzione della spaziatura orizzontale che non diminuirà totalmente la spaziatura ma la ridurrà man mano che si clicca sul pulsante. Per capire qual è il pulsante che si adatterà quell'altro basta vedere il colore e di questi quadrati di spostamento infatti il controllo che a questi quadrati di colore nero sarà quello che si adatterà a quello che i quadratini invece bianchi. Infatti se come nell'esempio precedente diminuiamo ora la spaziatura orizzontale sarà Button2, cioè quello con i quadratini neri a ridimensionarsi se se ne siamo proprio Button2 e poi di selezioniamo Button1. Quindi utilizziamo una selezione diversa rispetto alla nell'esempio precedente vediamo che avesse Button1 ad avere questi quadratini di ridimensionamento di colore nero per cui sarà lui che si adatterà alle dimensioni di Button1. Per cui diminuendo lo spazio si sposterà. Stessa cosa per l'aumento della spaziatura orizzontale il pulsante successivo, come abbiamo visto, richiede l'utilizzo di tre controlli per cui aggiungiamo un altro pulsante distanziato maggiormente rispetto Button1. C'aspettiamo che in questa distanza equivalga alla fine a questa distanza qua. Per cui selezioniamo Button1, poi clicchiamo su Button2 e Button3, premiamo pulsante “Rendi uguale spaziatura” e adesso effettivamente la spaziatura è uguale Vediamo gli altri e nelle altre funzioni della toolbar Layout. Selezioniamo Button1 e il tasto Control e clicchiamo su Button2. Button2 ha i riquadri neri e sarà lui quindi che si adatterà. Clicchiamo su “Rendi uguali”. C'aspettiamo che Button2, quello che appunto abbiamo detto si deve ridimensionare assumerà le stesse dimensioni di Button1. Verifichiamo se è vero, ed è esattamente così. Se facciamo l’inverso, cioè clicchiamo su Button2, tasto Control, e clicchiamo su Button1 adesso sarà Button1 che si dovrà ridimensionare. Premiamo il pulsante e si è effettivamente espanso. Adesso c'è il gruppo di comando dell'allineamento “Allinea all'asse orizzontale” permette di allineare due controlli sull’asse orizzontale delle e di una delle due controlli di sentirsi Button2 se fosse molto più alto di Button1 allora l'allineamento sull'asse orizzontale posizione avrebbe Button2 per presumibilmente su questa linea. Verifichiamo ed è effettivamente così. L'allineamento in basso l'alienerebbe sulla linea inferiore del controllo. l'allineamento superiore sulla linea superiore del controllo stessa cosa vale in senso verticale con l'allineamento verticale dei controlli per cui “Allinea a destra” allineerà sull'asse verticale destra a linea sinistra sull'asse verticale sinistra e “Allinea il centro” sulla linea centrale del controllo. Se proviamo adesso a ridimensionare in altezza soltanto uno dei due pulsante ad'esempio Button1 e carichiamo su Button2, tasto Control, selezioniamo Button1 premendo questo pulsante l'altezza di Button1 dovrebbe rispecchiare l'altezza di Button2. proviamo a verificare se così ed è effettivamente così. Anche facendo l'operazione inversa cioè selezione di Button1 contro l'selezione di Button2, sarebbe Button2 a prendere le dimensioni di Button1. Lo stesso vale per la dimensione orizzontale per cui selezione di Button1, tasto control selezioniamo Button2, assegna la stessa larghezza ed è proprio Button2 che si ridimensiona fino a raggiungere dimensioni orizzontali di Button1.

In this video we will see the Layout toolbar, which is a toolbar which contains a number of functions that allow us to easily and automatically organize the various controls that are on our Form, or resizing and moving, aligning, etc. . Thus we see a new project and call it the application layout. Then press the OK button and as usual we see reported in the design, the Visual Basic 2010. Our window we have to do now is to display this toolbar layout, so we go to the main menu click on View Toolbars, and there appears a list of toolbars that can be added to those already present in the designer. They are marked with a tick and now there is only so the Standard toolbar. We must add the toolbar layout, so click on the item layout. Now there appeared in the space of the toolbar, just the toolbar layout that interested us. Then the button of this toolbar or this we can see that all are disabled because they are all gray. We can see the difference with the top toolbar, which instead has the colored buttons. This means they are not enabled. These buttons are grayed out because they are related controls are a series of actions that can be performed on the controls on the Form, but not being already then controls all the functions are of course disabled. To re-enable the buttons, so we have to add some controls on the Forms Take for example a button and the second button, as we did in the previous Button2 extend horizontally so that it is more or less double the Button1. We can see that if we select the control functions are now enabled. Some features available on this toolbar are applicable only to a control, other functions are applicable to both controls. That is, apply in the comparison between the two checks. If in fact select both controls, here is that some functions are now enabled. But start from the beginning: we select the first check that Button2. Only these functions are enabled. Let us consider: first the "Centered in the form horizontally. This allows us to center in the area of our window this control. So we do a test: put him in a difficult angle and click on "form in horizontally centered." Expect that changes its position and is aligned horizontally in the form we see that it is just that. To control precisely positioned in the central point we should make a next step and click the button that appears after "Centered in the vertical format. Now the control is exactly the midpoint of the form. Central point which excludes both the edge of the form, both the title bar, so the location is central to the only gray area. Now let's see the other two functions that appear after "Bring to Front" "Send to" may in fact happen that two checks are sometimes superimposed on each other for example is superimposed over Button1 Button1. In the event that it wanted instead to be overexposed than Button1 Button2, we should first click on the button "Bring to Front." Here and above that actually appears Button1 Button2. We can see that completely covers or almost Button2 Button1, Button2 we can bring to the fore always click "Bring to Front." We returned at about the previous situation. We can bring back respect Button1 Button2 by pressing the other button "Send to Back." In doing so we find Button1 Featured strictly controls as they were before and then Button1 Button2 Button1 with half of Button2. We click on that button "Tab Order" shows us the tab order of controls that is the order in which controls are selected the moment when you will repeatedly press the TAB button on this window. So a tab index of zero means that the first check and will receive the focus that is to be activated by opening the window by pressing the tab key the focus will move to the next control. Control with a following that is a tabindex tabindex have it right next Button2. If we had control under the third rule we have just seen, we're going to take the next tabindex yet since the last inspection. Add a text box this text box will presumably an index three. Indeed it is. We can also change the TabIndex of each control or through the property, and then clicking on Button2 and selecting the TabIndex property, or clicking on this box to select the TabIndex that interests us. Of course, many controls can have the same TabIndex. Now we look at all the functions that regulate the relationship between two or more controls, such as we try to select the button Button2 clicking the left mouse button. Then press the Control key on your keyboard and hold it and click on Button1, to select both controls. We can see that you enable a range of functions on the Layout toolbar. Let's look at the main. "Remove the vertical spacing": They can remove the space between a check of the other vertically so the vertical space between a control to another. In this case, expect that after clicking this button Button1, Button2 and go to join vertically to touch. Let's check and you'd be. The next function allows for a gradual removal of the vertical spacing and then slowly decrease the vertical spacing but did not cancel it immediately see what happens on Button2 begins to rise until the third to fourth this button spacing will not be practically annulled. The next function is used instead of increasing the vertical space, so we can increase the space between these two controls. This button allows us to make the same and the spacing between the three controls. For example, let's add another button named Button3. We expect that the spacing between and among Button1 Button2 and Button3 Button2 and pressing this button showing the same, and indeed it is. This series of tricks can be done horizontally, for example to place two controls aligned horizontally. Li select either click on Button1, press and hold the Control key and click on Button2 and we see first the "Remove horizontal spacing. Expect that this spacing disappears. Returns control to its original position and click. This function was the decrease in horizontal spacing that will not diminish completely but will reduce the spacing as you click the button. To understand what is the button that will suit other one just to see the color of these squares and move it to the control of these squares will be black that will adapt to what the white squares instead. Indeed, if as in the previous hours diminish the horizontal spacing is Button2, the one with the handles to resize if blacks if we are right and then select Button1 Button2. So we use a different selection than the previous example we see that he Button1 to have these handles will be black so he will adapt to the size of Button1. so reducing the space will move. Same thing for increasing the horizontal spacing the next button, as we have seen, requires the use of three controls that add another button distances than Button1. Expect that this distance is equivalent to the end of this distance here. So we select Button1, Button2, and then click on Button3, press button "Make equal spacing and the spacing is the same now actually we see others and in other functions of the toolbar layout. Select button1 and the Control key and click on Button2. Button2 blacks have the boxes and he will then that will fit. Click on "Make the same." Button2 expect that, exactly what we said we must take the same size scale of Button1. We check if it is true, and that's exactly the case. If we do the reverse, ie click on Button2, Control key and click on Button1 Button1 now is that you will have to resize. Press the button and you are actually expanded. Now there is the drive unit alignment Align the horizontal axis "to align the two controls on the horizontal axis and one of the two controls Button2 feel if it were much higher then the alignment on Button1 ' horizontal position would probably for Button2 on this line. We check and it is indeed the case. This alignment in low alienation on the bottom line of control. alignment than on the top line of control is the same thing vertically with the vertical alignment of controls that "Align right" align the vertical axis on the vertical line left to right and left "Align center" on center line of the control. If we try now to only resize the height of a two button and load up ad'esempio Button1 Button2, Control key, select this button by pressing Button1 Button1 should reflect the height of the height of Button2. and we try to check if it is indeed the case. Even doing the reverse of that selection against the selection of Button2 Button1, Button2 would take the size of Button1. The same applies to the horizontal dimension for which selection of Button1, Button2 control key select, assign the same width and it is Button2 you resize up to horizontal dimensions of Button1.