50 respuestas en este tema

[dooper]

Probando con los componentes Tbutton, tbitbtn, ttoogle no consigo fabricar un menu vertical que al pasar por el subitem me

marque por completo con un recuadro o selección de un color el subitem donde está elcursor.

Algo semejante a esto o si hay alguna manera en Lazarus con algun componente concreto (no Jvxpbar)

 

He intentado con muchos pero no consigo el resultado esperado.

 

 

 

 

Archivos adjuntos

•  menu.bmp   53,96KB   37 descargas

[escafandra]

¿Has probado TMainMenu o TPopUpMenu?

 

Saludos.

[Delphius]

¿Has probado TMainMenu o TPopUpMenu?

 

Saludos.

 

Me parece que drooper lo que busca es justamente recrear un menú vertical. Porque el componente que menciona imita justamente el diseño del menú emergente del estilo de XP que aparece al costado izquierdo.

Y en la imagen que adjuntó se ve una especie de menú resaltado con los bordes.

 

Dropper, una posible alternativa (aunque requiere de un poco de trabajo) es disponer de tantos TButton como necesites, uno abajo del otro, aprovechando el uso de Aling y los Frames. Como te enseñé en otro momento.

Luego es cosa de jugar con los eventos OnMouseMove, OnMouseLeave, OnMouseUp, OnMouseDown, etc y cambiar el color, la fuente, o darle algún toque visual como para resaltar cuando el mouse pasa por encima de éstos, se hace clic, etc. No necesitas implementar el mismo código como respuesta a los eventos por cada uno. Simplemente puedes  crear tu propia respuesta para evento de interés y luego asignarles éste a cada botón.

Cuando sos relativamente pocos basta algo como por ejemplo:

delphi

unit Unit1;
 
{$mode objfpc}{$H+}
 
interface
 
uses
  Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs,
  StdCtrls;
 
type
 
  { TForm1 }
 
  TForm1 = class(TForm)
    Button1: TButton;
    Button2: TButton;
    Button3: TButton;
    procedure Button1Click(Sender: TObject);
    procedure Button1MouseLeave(Sender: TObject);
    procedure Button1MouseMove(Sender: TObject; Shift: TShiftState; X,
      Y: Integer);
    procedure FormCreate(Sender: TObject);
  private
    { private declarations }
  public
    { public declarations }
  end;
 
var
  Form1: TForm1;
 
implementation
 
{$R *.lfm}
 
{ TForm1 }
 
procedure TForm1.Button1Click(Sender: TObject);
begin
  ShowMessage('Se hizo clic en ' + (Sender as TButton).Name);
end;
 
procedure TForm1.Button1MouseLeave(Sender: TObject);
begin
  (Sender as TButton).Color:= clDefault;
end;
 
procedure TForm1.Button1MouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Integer);
begin
  (Sender as TButton).Color := clSkyBlue;
end;
 
procedure TForm1.FormCreate(Sender: TObject);
begin
  Button2.OnMouseLeave:= Button1.OnMouseLeave;
  Button2.OnMouseMove:= Button1.OnMouseMove;
  Button2.OnClick:= Button1.OnClick;
  Button3.OnMouseLeave:= Button1.OnMouseLeave;
  Button3.OnMouseMove:= Button1.OnMouseMove;
  Button3.OnClick:= Button1.OnClick;
end;
 
end.

En esa muestra simplemente implementé el evento OnMouseClick, OnMouseLeave y OnMouseMove en Button1 y por código al crearse el form le asigné estas mismas implementaciones para Button2 y Button3. El form es muy básico, en tiempo de diseño dispuse 3 botones con su propiedad Aling en alTop.

 

Prueba el código, observa como cambian de colores según como el mouse pasa por encima de ellos. Haz clic en cualquiera. Notarás que si bien la implementación es única es posible identificar a cada uno.

 

Esto se puede llevar al siguiente nivel obviamente, y crear botones de forma dinámica, tener una implementación ya definida para ciertos eventos y asignar en tiempo de ejecución.

 

A lo que voy es que hay opciones, con un poco de maña se puede llegar a resultados notables.

 

Mi mayor consejo, leyendo un repaso por los hilos en donde hemos intervenido, es que en cuestiones de interfaz no vale la pena destinar mucho esfuerzo. Es más importante que lo de adentro funcione. Un programa podrá tener muchas lucecitas, pero si tiene defectos y errores internos, de nada sirve. Controla la lógica, luego ya piensa en la intefaz y en cómo ésta se comunica con la lógica y presenta los resultados, etc. Si seguimos el Principio de Pareto: destinar 80% del esfuerzo en la Lógica, 20% en la Intefaz.

 

Saludos,

[Delphius]

Aquí te dejo justamente un ejemplo de lo último que comenté: hace lo mismo que el primero unicamente que todo es en tiempo de ejecución. El form está vacio. Ningún control tiene en tiempo de diseño. En ejecución se hace todo.

delphi

unit Unit1;
 
{$mode objfpc}{$H+}
 
interface
 
uses
  Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs,
  StdCtrls;
 
type
 
  { TForm1 }
 
  TForm1 = class(TForm)
    procedure FormClose(Sender: TObject; var CloseAction: TCloseAction);
    procedure FormCreate(Sender: TObject);
  private
    { private declarations }
    procedure MiClick(Sender: TObject);
    procedure MiMouseLeave(Sender: TObject);
    procedure MiMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);
  public
    { public declarations }
  end;
 
var
  Form1: TForm1;
 
implementation
 
{$R *.lfm}
 
procedure TForm1.FormClose(Sender: TObject; var CloseAction: TCloseAction);
begin
  CloseAction := caFree;
end;
 
{ TForm1 }
procedure TForm1.FormCreate(Sender: TObject);
var boton: TButton;
    i: integer;
begin
  for i := 1 to 10 do
  begin
    boton := TButton.Create(Form1);
    boton.Parent := form1;
    boton.Name := 'Boton' + IntToStr(i);
    boton.Align := alTop;
    boton.OnClick := @MiClick;
    boton.OnMouseMove := @MiMouseMove;
    boton.OnMouseLeave := @MiMouseLeave;
  end;
end;
 
procedure TForm1.MiClick(Sender: TObject);
begin
  ShowMessage('Clic en ' + (Sender as TButton).Name);
end;
 
procedure TForm1.MiMouseLeave(Sender: TObject);
begin
  (Sender as TButton).Color := clDefault;
end;
 
procedure TForm1.MiMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer
  );
begin
  (Sender as TButton).Color := clSkyBlue;
end;
 
end.

Saludos,

[Delphius]

Hay... pucha... eso me pasa por pasar código sin probar y escribir de memoria.   Efectivamente funciona, pero por cosas de diseño de los temas de Windows no se verá los cambios.

Me había olvidado de ese detalle. Cambiando botón por panel y teniendo en cuenta que en tiempo de ejecución debe implementarse un pequeño "hack" al momento de crearlos todo funciona:

delphi

procedure TForm1.FormCreate(Sender: TObject);
var Panel: TPanel;
   i: integer;
begin
 for i := 1 to 10 do
 begin
   Panel := TPanel.Create(Form1);
   Panel.Parent := form1;
   Panel.Name := '';
   Panel.Name := 'Panel' + IntToStr(i);
   Panel.Align := alTop;
   Panel.OnClick := @MiClick;
   Panel.OnMouseMove := @MiMouseMove;
   Panel.OnMouseLeave := @MiMouseLeave;
 end;
end;

Pero la idea es esa, puede usarse varios controles... la imaginación es el limite. Hay en CT algunos botones extras además del TButton tradicional, que agregan un toque "moderno" es cosa de explorar la cantidad de componentes, y como dije: la imaginación es el límite.

 

Saludos,

[dooper]

Gracias como siempre Delphius probaré a ver que sale. Gracias escafandra por tu aporte, intentaré igualmente ver los componentes que indicas. El primero ya lo he usado para la barra horizontal pero no sabía si así me lo indicas, usar un Tmain en vertical, no se si se podrá implementarla verticalmente. Toma en consideración Delphius tus consejos de la primera respuesta, totalmente deacuerdo en ello, pero tambien me baso en ir proyectando

visualmente un interfaz que te haga ilusionarte con seguir avanznado y encontrarte con problemas que de un modo u otro se puedan ir solventando.

 

Mi única intención es implementar ese menu sin bordes, ni resaltes como si fuera de tlabels y al pasar por ellos te indique la opción en la que estás encima.

 

Voy a ver si consigo algo con vuestros sabios consejos.

 

PD: Disponemos de algun manual online donde se visualicen componentes C.T y que hacen, por su enorme repositorio de C.T?

 

Un saludo

[Delphius]

Prueba con Paneles con sus propiedades BevelInner y BevelOuter en bvNone. Y para resaltar que el mouse pasa por encima cambiar el color de fondo, o poner la letra en negrita o cambiarle el color. O hasta incluso puedes cambiar la propiedad BorderStyle a bsSingle.

 

Ahora si quieres más versatilidad y flexibilidad en tomar el control de las apariencia tienes la posibilidad de jugar con la suite BGRA Controls. Tiene variedad de controles, todos muy estéticos. Necesariamente deberás jugar un buen rato. En el foro de Lazarus hay todo un foro dedicado a estos componentes por si tienes dificultades. Entre el equipo de desarrollo está el autor del "framework" BGRABitmap, su autor es Circular y es un miembro por demás activo y bastante amable.

 

Yo utilizo la clase TBGRABitmap en mis proyectos y hasta ahora estoy muy contento; aunque no he usado la suite BGRA Controls; pero estimo que está a la altura del profesionalismo que la del proyecto padre.

 

Saludos,

[dooper]

Tampoco quiero nada exagerado Delphius, es algo tan simple como el menu adjunto que subí.

Comentas que prueba con paneles? dirás que use paneles para insertar los Tbutton sobre los que implementar el menú...

La Suite BGRA ya la ví en su día, pero de momento a no ser que lo estime necesario y sea imposible adaptar un simple

menu de la forma que indico no optaré por tirar de ella, aunque si le daré un vistazo a la misma.

 

Sabes lo que ocurre que con tantos componentes, y sin tener claro como encauzarlo para que vaya tomando forma lo que

uno quiere plasmar, es muy complicado. He intentado ver opciones de otros foreros pero no veo nada asequible.

 

Voy a seguir haciendo pruebas a ver si saco mis propias conclusiones al respecto.

 

Saludos

[Delphius]

Tampoco quiero nada exagerado Delphius, es algo tan simple como el menu adjunto que subí.

Comentas que prueba con paneles? dirás que use paneles para insertar los Tbutton sobre los que implementar el menú...

La Suite BGRA ya la ví en su día, pero de momento a no ser que lo estime necesario y sea imposible adaptar un simple

menu de la forma que indico no optaré por tirar de ella, aunque si le daré un vistazo a la misma.

 

Sabes lo que ocurre que con tantos componentes, y sin tener claro como encauzarlo para que vaya tomando forma lo que

uno quiere plasmar, es muy complicado. He intentado ver opciones de otros foreros pero no veo nada asequible.

 

Voy a seguir haciendo pruebas a ver si saco mis propias conclusiones al respecto.

 

Saludos

 

Por prueba con paneles me refiero a que en lugar de que sea un menú a botones, puedes usar paneles. A los paneles los puedes cambiar las propiedades que he comentado y visualmente queda como un label. Luego es cosa de aprovechar los eventos OnMouseMove, OnMouseLeave  y/o otros de interés para que al pasar el mouse por encima de éstos y/o cuando el mouse abandona al panel este cambie de apariencia.

Ya sea que se resalte el fondo por un color, o que el texto cambie a negrita, etc. El TPanel tiene una propiedad BorderStyle que por defecto está en bsNone. Cuando se cambia a bsSingle alrededor del TPanel se marca un borde grisaseo. Esta es otra posibilidad de simular el "bordeado" que tu buscas, aunque no es posible cambiar el color de este borde (en realidad se puede, pero para ello ya hay que intervenir en el propio proceso de repintado del control)

 

Quizá no sea 100% como el del ejemplo que pones pero se aproxima un poco. Desconozco si entre la mar de componentes que hay habrá alguno que haga específicamente lo que buscas, pero al menos ya te he dado algunas otras alternativas para salir del paso. Ahora si te es tan necesario llegar a lo mismo, y no hay alguna vía directa o fácil no te quedará otra que la difícil y es justamente que tu mismo intervengas en el proceso de repintado y trabajar con y sobre el Canvas ya sea del form o de algún control que dispongas a modo de menú/item.

 

La suite BGRA Controls puede marear un poco, pero por ejemplo su TBGRAButton permite que uno establezca entre tantas cosas como ha de ser el estilo y forma de borde cuando se presiona, se pasa el mouse por encima, etc. Nada impide que pongas que tenga un color y un sistema de gradiente en "transparente" (o mejor dicho en None) y con esto se vea el color del form y dejar que sólo los bordes cambie de color, etc. Esta es otra forma de conseguir el "mismo efecto" Lo que tienes que cuidar es la alineación ¡Juega con los controles!

 

La lección es que no siempre se puede pretender que con puro 2 clics (y sin casi nada de código) y cambiar alguna que otra propiedad mágicamente consigas las cosas. BGRA Controls lo logra bastante bien pero no con pocos clics... hay que toquetear unas cuantas propiedades que controlan la apriencia para cada estado del botón.

 

Saludos,

[Delphius]

Mira la imagen que adjunto. Dispuse un TBGRAButton con propiedad alTop en Aling. Obviamente tu tendrás que disponer un panel u otro control a modo de "contenedor" alineado a la izquierda o derecha y dentro de éste si los botones/items que hacen al menú.

Lo configuré para que no tenga otro color más que sólo el estilo de borde en su estado normal, al pasar el mouse y cuando se clickea. No hizo falta aprovechar ningún evento para que cambie de apariencia. Todo se configura en tiempo de diseño.

El truco está en configurar sabiamente las propiedades "Body". En BodyNormal el borde está en color clForm para que adopte justamente el color del form, cuando se pasa el mouse (BodyHover) cambia a clBlue y al presionar (BodyClicked) en clTeal. Las subpropiedades Color (ojo, no confudas con BorderColor) está en clNone, y además los gradientes (subpropiedad Gradient1 y Gradiendt2) para cada estado tienen en su propiedad Style el valor bbsClear y en color clNone para el color de inicio y fin (cada gradiente se compone de 2 colores) respectivamente.

Nota como sólo en las subpropiedades BorderColor de cada Body se le ha definido color: los que he comentado.

 

¿No crees que se acerca a lo que buscas?

 

Saludos,

Archivos adjuntos

•  BGRAButton.jpg   20,29KB   4 descargas

[dooper]

Voy a ver eso Delphius como dices, muy buena descripción. Como ya te comenté y leyendo vuestros gratos y sabios consejos en cuanto a que la apariencia es lo menos importante, pensé que usar componentes tipo (jvxpbar, o este que comentas) podría suplirlos con algo más sencillo y que

visualmente parezca un menu vertical sin necesidad de usar nada más que algun componente standar (ttbutton, etc...).

 

Apunto tus comentarios, porque voy a probar eso mismo que comentas a ver que resultado obtengo, supongo que se podría incluir un icono en ese boton que te permita presionar como en tu ejemplo.

 

Según vaya sacando conclusiones, iré exponiendo mis resultados y dudas.

 

Soy una persona que si puedo ayudar a novatos lo he hecho y en estas circusntancias como novato, aún no puedo aportar mi experiencia, ni llegar a vuestro nivel como y solo me quedan preguntas y más preguntas como principiante, y todo porque leo que en el pie de respuestas que escribes: "Se enseña por amor a los demás, se aprende por amor a la verdad...", simplemente decirte como forero: Mil Gracias por ser fiel a ese frase!

 

Un saludo

[Delphius]

No te creas que soy un gran experto, Hay muchísimas cosas que desconozco de CT y de Lazarus. Yo estoy en el mismo tren que tu, voy aprendiendo en la marcha. Quizá esté unos vagones más adelante pero tampoco es mucha la ventaja. Es que yo vengo ya de unos cuantos años de conocer Delphi y algunas mañas las tengo adaptadas a Lazarus.

Y el resto es animarse y empezar a probar, investigar, volver a probar, y ¡seguir probando!

 

Ambas frases son de San Agustín, patrono de los Canónigos Regulares de Letrán, y además  por consiguiente, es patrono del Colegio del cual egresé. A pesar de haber estudiado casi la mayor parte de mi vida en establecimintos educativos religioso (católico apostólico romano) muy devoto no soy. Y comparto algo del estilo de vida del propio San Agustín... se lo reconoce por ser el más "rebelde" y el menos "santo" de entre todos   

 

Saludos,

[dooper]

Siguiendo con lo mismo y viendo algo de luz (estoy usando paneles para ir desarrollando los subitem) aunque creo que lo mejor seria los Tbutton, cuando termine de lograr el proposito con estos dos componentes veré el TBGRAButton.

 

Pero se puede insertar un Timagen dentro de un Tpanel? así lo tengo para ir insertando los iconos al lado del nombre y desaparece el icono al insertar

el Timagen dentro de Tpanel (ya que este no tiene ningun propiedad que lo permita segun veo), si lo saco, vuelve a aparecer. Estoy trasteando a ver si alguna opción hay activar en este último, pero no sea que haya

problemas. En el caso del TButton esto no creo que me ocurra.

 

saludos,

[Delphius]

Siguiendo con lo mismo y viendo algo de luz (estoy usando paneles para ir desarrollando los subitem) aunque creo que lo mejor seria los Tbutton, cuando termine de lograr el proposito con estos dos componentes veré el TBGRAButton.

 

Pero se puede insertar un Timagen dentro de un Tpanel? así lo tengo para ir insertando los iconos al lado del nombre y desaparece el icono al insertar

el Timagen dentro de Tpanel (ya que este no tiene ningun propiedad que lo permita segun veo), si lo saco, vuelve a aparecer. Estoy trasteando a ver si alguna opción hay activar en este último, pero no sea que haya

problemas. En el caso del TButton esto no creo que me ocurra.

 

saludos,

 

El problema de usar TButton es que no se le puede cambiar el color, por más que su propiedad Color se le asigne otro. Es cosa de Windows y sus temas, mientras que en otro SO no hay drama.

La única forma de "editar" la apariencia del TButton es intervenir el proceso de pintado del botón y darle justo la apariencia que uno quiera.

Con los TPanels al menos uno puede definir el color. El TPanel puede contener cualquier componente, y los TImage no son excepción asi que si puedes ponerlos.

 

Lo que no entiendo es el problema que comentas, pero lo que me parece que intentas hacer es que tengan una imagen al costado de cada botón/item. Esto se consigue con TBitBtn y no con TButton. Aunque esto también tiene el mismo problema del TButton y lo de temas de Windows.

 

El TBGRAButton tiene la misma propiedad Glyph que tiene el TBitBtn lo que te permite añadir una imagen al costado izquierdo. La verdad es que no me he fijado si hay algún componente que extienda la capacidad del TBitBtn tradicional y permita cambiar el color y otras cosas, pero al menos el BGRButton de BGRA Controls tiene mucha versatilidad para adaptarse a diferentes situaciones... tiene incluso la posibilidad de adquirir la forma DropDown, que le permite mostrar un popumenu a su costado derecho.

 

Saludos,

[dooper]

Avanzando algo en el tema del menu vertical, como indicas Delphius que no hay problemas en insertar un Timage dentro un Tpanel, en mi caso al hacerlo con un icono previamente insertado en el Timage, este icono desaparece de escena cuando se inserta en el panel. Si hago lo contrario vuelve aparecer.

 

Estoy usando el codigo siguiente parar dar un color de borde al panel pero no funciona (usando el borderstyle=bsSingle a true), es más con esta opción activada ya por defecto el panel se bordea con un color inicial, efecto que quiero pero al pasar con el ratón por encima.

delphi

procedure TForm1.Panel1MouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Integer);
begin
   (Sender as Tpanel).Color:= clred; // cambia a color rojo el panel entero al pasar por el.
 
   (Sender as Tpanel).Canvas.Pen.Color:= clblue; // debería cambiar a color azul los bordes del panel al pasar por el, pero no hace nada!
end;

                        

[Delphius]

Edité tu mensaje para darle formato al código. Recuerda que cuando coloques código puedes etiquetarlo para que luego al leerlo se resalte y sea más fácil identificarlo para quienes te leen.

Para darle formato al código presiona en el botón <>, luego pega el código en el memo que te aparece y opcionalmente (recomendado) selecciona el Lenguaje Delphi (que sirve también para Lazarus). Ve la imagen que adjunto, está resaltado el botón de etiquetado.

 

Tu código no cambiará el color de borde porque sólo cambiaste el color a clBlue la "brocha" pero no has dicho que tiene que pintar con ella. Funcionará el cambio de color a rojo como primera instrucción, pero para poder ver cambios de color de borde ahora es tu trabajo justamente después de cambiar el color de la brocha indicar que pintar. El asunto es que el TPanel no tiene una propiedad que identifique al canvas del borde... ¡el canvas es todo el lienzo! Todo el área que ocupa el componente.

No lo he probado pero podrías probar con Canvas.Rectangule() teniendo en cuenta obviamente las dimensiones del TPanel y el aparente grosor (esto se define en .Pen) de éste.

 

Ten en cuenta que por defecto el color de borde es dado por el tema de Windows asi que si inicialmente quieres que tenga otro color necesitarás un poco de trabajo adicional y repintar al comienzo, cuando se pasa el mouse y cuando el mouse abandona el área para volver al estado anterior. Opcionalmente también puedes pintarlo de otro color o tono cuando se hace clic en él. El código posiblemente sea bastante similar para los 3 o 4 eventos, así que quizá sea conveniente un procedimiento que haga todo el trabajo y que reciba como parámetro el "estado" y que los eventos lo invoquen a su modo. Algo como:

php

Type
  MouseState = (msNormal, msMouseMove, msMouseLeave, msMouseClick);
 
...
 
procedure TForm1.Panel1MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);
begin
  PaintState(msMouseMove);
end;

En este caso PaintState() simplemente es la rutina que se encarga de pintar el panel de acuerdo al valor pasado como parámetro. Puede ser útil definir un tipo enumerado que contemple los posibles estados. Los detalles internos de como será este PaintState() te lo dejo de tarea

 

Saludos,

Archivos adjuntos

•  etiqueta codigo.jpg   12,27KB   2 descargas

[dooper]

Gracias Delphius por el tema de etiquetado. Veré si consigo dar el asunto en cuestión a partir de tu aporte de idea.

 

Igual me ocurre, si quiero que al pasar el mouse por el Tpanel el texto que aparece en el, en su propiedad "Caption" se subraye, o se ponga en negrita

en fin dar "formato" al texto del Tpanel.

 

Un saludo

[dooper]

A ver porque me ocurre esto con un Tpanel y un Timage. Por fin solucioné el tema de dar formato al texto de un tpanel. Al insertar

un Timage con un icono en un el Tpanel desaparece icono, no se visualiza, si saco el Timage fuera vuelve aparecer el icono 

 

Adjunto dos fotos

 

 

 

 foto.bmp   88,89KB   10 descargas  foto2.bmp   41,62KB   10 descargas

 

[Delphius]

A ver porque me ocurre esto con un Tpanel y un Timage. Por fin solucioné el tema de dar formato al texto de un tpanel. Al insertar

un Timage con un icono en un el Tpanel desaparece icono, no se visualiza, si saco el Timage fuera vuelve aparecer el icono 

 

Adjunto dos fotos

 

 

 

foto.bmpfoto2.bmp

 

No es que desaparezca, es que te lo coloca detrás del panel, y creo que moviendo éste al fondo o bien mover al frente al TImage no hará que se respete el dibujado. Lo que te recomendiendo es que crees el TImage dentro del TPanel (recuerda: el TPanel es un contenedor) alineado a la izquierda, luego tu defines el ancho. Pon la propiedad Center del TImage en true y con eso deberia bastar para que se visualice bien.

 

Saludos,

[dooper]

Así ha sido, lo que hacía mal era que creaba el timage fuera  y luego lo movía al Tpanel, pero claro probé con la propiedad

tpanel.BringtoFront; y SendTobBack y ni así asi funciona. Ahora en el inspector de objetos me aparece el componente Timage dentro del Tpanel.

 

Pensaba que al mover el componente Timage dentro del panel este lo inscrutaría en el mismo, pero veo que no!

 

Gracias!

 

Un saludo y feliz año 2016, nos vemos el próximo año!!!!