Marcos en Formularios Visual Basic

Una Técnica para Programación de Formularios Visual Basic Implementando Marcos

Introducción

¡ Marcos en Formularios Visual Basic con código plano !. Esta implementación la logre hace poco, porque necesitaba colocar un TreeView de contenido en un marco izquierdo, y formularios de datos en el marco derecho. ¿El resultado?, una interfaz verdaderamente funcional y moderna. Muestra:

A mi modo de ver, esto rompe los esquemas y limitaciones de los formularios Visual Basic, y verdaderamente es un código del que me siento muy satisfecho.

Desarrollo

Simplemente necesitamos tres PictureBox y programar los eventos DragDrop de algunos controles y Resize del formulario. La implementación se logra siguiendo estos pasos:

1. Cree un formulario, agregue sobre el área del formulario tres PictureBox, llamalos pic_MarcoIzquierdo, pic_MarcoDerecho, y pic_Separador. Puede diseñar la interfaz que desee en cada marco, es decir una pic_MarcoIzquierdo y otra en pic_MarcoDerecho.

2. La propiedad DropMode de pic_Separador debe ser Automatic (valor 1). Pero el código hace todo esto. Simplemente agregue al módulo del formulario el código de doy al final de este articulo.

3. Por cada control en primer plano del marco izquierdo, adicionará una línea de código al evento DragDrop del control, por ejemplo digamos que coloco un CommandButton en el marco izquierdo, entonces:

   Prívate Sub Command1_DragDrop(Source As Control, X As Single, Y As Single)
       AjusteMarcoIzquierdo X
   End Sub

   Si creara Command1 en el marco derecho, usaría: 

   Prívate Sub Command1_DragDrop(Source As Control, X As Single, Y As Single)
       AjusteMarcoDerecho X
   End Sub

   Es decir, nada de código complicado. Si por ejemplo usara un TreeView sobre toda el área de un marco, digamos el izquierdo, simplemente urania un único evento DragDrop sobre ese marco, inclusive sobraría pic_MarcoIzquierdo_DragDrop ya que el arrastre y soltar se hace sobre un solo control (el TreeView) en primer plano.

Código de la Implementación

Este es el código de la implementación.

'//==========================================================
'  Marcos al estilo Internet Browser
'  Implementación original: Harvey Triana ©, Feb 1998
'//==========================================================
DefInt A-Z
Option Explicit

'//Tamaño relativo de los marcos (% de ventana)
Private Const PorcentajeMarcoIzquierdo = 30
'//Tamaño del borde del separador, 3 pixeles (recomendado)
Private Const TamañaDelSeparador = 45

Private Sub Form_Load()
    '//Personalizando...
    pic_MarcoIzquierdo.Top = 0
    pic_MarcoDerecho.Top = 0
    Set pic_MarcoDerecho.Picture = LoadPicture(App.Path + "/jen_2.jpg")
    
    '//Configura Separador
    With pic_Separador
        .Top = 0
        .Width = TamañaDelSeparador
        .BackColor = vbActiveBorder
        .MousePointer = vbSizeWE
        .DragMode = vbAutomatic
        .ZOrder 0
    End With
End Sub

Private Sub Form_Resize()
    Static EspacioIzquierdo As Single
    
    '//Espacio de porcentaje a twips
    EspacioIzquierdo = ScaleWidth / 100 * PorcentajeMarcoIzquierdo
    
    If Not WindowState = vbMinimized Then
       On Error Resume Next
       pic_MarcoIzquierdo.Height = ScaleHeight
       pic_MarcoIzquierdo.Width = EspacioIzquierdo - pic_Separador.Width
       
       pic_Separador.Height = ScaleHeight
       pic_Separador.Left = EspacioIzquierdo - pic_Separador.Width
       
       pic_MarcoDerecho.Height = ScaleHeight
       pic_MarcoDerecho.Left = pic_MarcoIzquierdo.Width + pic_Separador.Width
       pic_MarcoDerecho.Width = ScaleWidth - pic_Separador.Left - pic_Separador.Width
    End If
End Sub

Private Sub pic_MarcoDerecho_DragDrop(Source As Control, X As Single, Y As Single)
    '//Es necesario para todo control dentro de pic_MarcoDerecho
    AjusteMarcoDerecho X
End Sub

Private Sub pic_MarcoIzquierdo_DragDrop(Source As Control, X As Single, Y As Single)
    '//Es necesario para todo control dentro de pic_MarcoIzquierdo
    AjusteMarcoIzquierdo X
End Sub

Private Sub AjusteMarcoIzquierdo(X As Single)

    '//Redimensiona área de marco izquierdo
    On Error Resume Next
    pic_MarcoIzquierdo.Width = X
    pic_MarcoDerecho.Left = X + pic_Separador.Width
    pic_MarcoDerecho.Width = ScaleWidth - X - pic_Separador.Width
    pic_Separador.Left = X
End Sub

Private Sub AjusteMarcoDerecho(X As Single)
    '//Redimensiona área de marco derecho
    AjusteMarcoIzquierdo X + pic_MarcoIzquierdo.Width
End Sub

Èjemplo completo (vb_frames.zip 4k).