miércoles, 19 de junio de 2019

Crear Barra de Título Personalizada

Crear Toolbar Personalizada

A veces nos preguntamos como haremos para cambiar la barra de la parte superior de nuestros programas y ponerlo de una forma mas personalizada y que no aparezca el zorro, pues he aquí la respuesta a esta solución.

Así que crearemos una clase que nos permita poder cambiar este tipo de barra
a nuestro antojo.

Paso 1: Creando una Clase para mostrar barras de titulo.

Create class titulo of controles as container


En el paso 1 la clase se llamará titulo y la biblioteca de clases se llama controles, estos nombres pueden ser cambiados y puedes colocarles el nombre de tu preferencia.

Paso 2:El siguiente paso haremos que el container sea transparente cambiando la propiedad del control.

Backstyle   =0
Borderwidth =0
width       =540

Paso 3:Ahora insertaremos un control shape dentro de la clase titulo.

Propiedades del control shape1

Backcolor   = 0,221,192
curvature   =20
height      =28
left        =0
top         =0
width       =540


Paso 4:El siguiente paso insertaremos el control label en la clase título.

Propiedades del control label1.

Backstyle      0
caption = "Mi propia Barra Superior"
Fontbold =.t.
Fontsize =12
Forecolor=255,255,216
Height   =18
Left     =10
Top      =5
Width    =450

imagen

Paso 5:A continuación agregaremos tres controles de imagen en el cual mostraremos las opciones de minimizar,maximizar y salir del formulario.

Propiedades del control image1.

Height      =24
Left        =466
Picture     =minimizar.png
Stretch     =2
Top         =2
Width       =24

Propiedades del control image2.

Height      =24
Left        =490
Picture     =maximizar.png
Stretch     =2
Top         =2
Width       =24

Propiedades del control image3.

Height      =24
Left        =514
Picture     =salir.png
Stretch     =2
Top         =2
Width       =24

El siguiente paso es colocar el código en los eventos init,resize
del título,mousemove del label1 y click de las imágenes correspondiente.

Paso 6 : Método init de la clase titulo.

This.width =this.parent.width
return

Paso 7: Método Resize de la clase título.

with This
    .Shape1.Width = .Width
    .Label1.Width = .Width - 20
    .Image1.Left = .Width - .Image1.Width - .Image2.Width - .Image3.Width
    .Image2.Left = .Image1.Left + .Image1.Width
    .Image3.Left = .Image2.Left + .Image2.Width
  endwith

Return

Paso 8:Método MOUSEMOVE() del control LABEL1.

LPARAMETERS nButton, nShift, nXCoord, nYCoord

  with ThisForm
    do while MDown()
      .Move(.Left + MCol(.Name, 3) - nXCoord, .Top + MRow(.Name, 3) - nYCoord)
    enddo
  endwith
return

Paso 9:Método CLICK() del control IMAGE1

  This.Parent.Parent.WindowState = 1     && Minimizado
return

Paso 10:Método CLICK() del control IMAGE2.

  If This.Parent.Parent.WindowState=0
This.Parent.Parent.WindowState = 2     && Maximizado
Return
Endif

En este paso decidí agregar estas líneas de tal manera de que si el usuario desea volver al estado original de la pantalla pueda hacerlo. La pantalla pasa del estado maximizado al normal.

If This.Parent.Parent.WindowState=2
This.Parent.Parent.WindowState = 0     && Normal
Return
Endif 
Return 

Paso 11:Método CLICK() del control IMAGE3

  This.Parent.Parent.Release()

Return

Paso 12: Cambiando la propiedad HEIGHT de la clase TITULO

Height = 28

De esta forma quedará nuestro formulario.



Ahora crearemos un formulario e insertaremos la clase elaborada anteriormente.

Para insertar a la clase TITULO en un formulario:

Abrir un formulario (MODIFY FORM MiFormulario)

Clic en View del menú principal del Visual FoxPro
Clic en Form Controls Toolbar
Clic en View Classes
Clic en Add…
Clic en CONTROLES.VCX
Clic en Titulo

Paso 13: Propiedades de la clase Titulo1

Left = 0
Top  = 0

Paso 14:Propiedades del formulario

TitleBar =  0 - Off

Paso 15:Método RESIZE() del formulario

  This.Titulo1.Width = This.Width

Return




0 comentarios:

Publicar un comentario