elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Rompecabezas de Bitcoin, Medio millón USD en premios


+  Foro de elhacker.net
|-+  Programación
| |-+  Programación General
| | |-+  .NET (C#, VB.NET, ASP) (Moderador: kub0x)
| | | |-+  ¿Como se hace un menú DE IMÁGENES colapsables?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: ¿Como se hace un menú DE IMÁGENES colapsables?  (Leído 3,376 veces)
Eleкtro
Ex-Staff
*
Desconectado Desconectado

Mensajes: 9.818



Ver Perfil
¿Como se hace un menú DE IMÁGENES colapsables?
« en: 21 Febrero 2013, 22:57 pm »

La idea que tengo es que al pulsar sobre el botón (1), se muestre una imagen (y otros controles que quiero usar) manteniendo la relación de aspecto entre el resto de elementos (2)

¿Debe haber algún control para hacer este tipo de diseño, no?

¿Como se puede hacer de una manera sencilla? (es decir, sin tener que posicionar los elementos todo el rato en el form con "control.location"...)







EDITO: Esto es lo más parecido que he encontrado, pero aparte de que no se adapta a lo que necesito (porque usa títulos, no imágenes) está escrito en C# y el VS ni me lo compila para que pueda aprender algo...
http://www.codeproject.com/Articles/53318/C-Custom-Control-Featuring-a-Collapsible-Panel

EDITO 2: Esta forma de hacerlo es la que quiero EVITAR, porque con varios elementos es un completo lío tener que estar resizando cada elemento:



« Última modificación: 21 Febrero 2013, 23:24 pm por EleKtro H@cker » En línea

_katze_

Desconectado Desconectado

Mensajes: 140



Ver Perfil WWW
Re: ¿Como se hace un menú DE IMÁGENES colapsables?
« Respuesta #1 en: 22 Febrero 2013, 13:35 pm »

esto es lo mas cercano a lo que necesitas, yo tenia mi version modificada y demas pero no la encuentro ya que esta se descontinuo.
http://www.vbforums.com/showthread.php?576403-Expandable-GroupBox


En línea

Eleкtro
Ex-Staff
*
Desconectado Desconectado

Mensajes: 9.818



Ver Perfil
Re: ¿Como se hace un menú DE IMÁGENES colapsables?
« Respuesta #2 en: 3 Marzo 2013, 19:26 pm »

nada _katze_ he estado probando pero ese control tampoco me sirve, al final lo he hecho manuálmente pero necesito ayuda para automatizar la taréa.





El tema es que necesito hacer un menú colapsable (no me sirve ningún control de terceros colapsables para hacer esto porque es un menú por imágenes y paneles)

Os dejo unas imagenes para que entendais lo que quiero hacer...

Yo esto se hacerlo de forma manual, es decir, en el evento "click" de un botón, al clickarlo, expandir manualmente el panel, osea redimensionar más colocarlo (control.size + control.location) y hacer lo mismo con todo el resto de elementos...

Pero esa manera es un verdadero fiasco porque tengo más de 60 elementos y necesito encontrar una forma dinámica de que todo se organize de un modo más automático, pero no llego a la solución ni a la conclusión de como se podría hacer esto, ni siquiera en pseudocódigo, nada, mi cabeza y mi creatividad no dán para más, jeje.

PD: en las imagenes los "elementos" son botones, pero en el code original son PictureBoxes, y lo verde serían paneles.

Ah, por cierto, el problema más grande creo que es que los "elementos" (los paneles) no pueden tener el mismo tamaño, algunos son más grandes que otros y esto no puedo cambiarlo de ninguna manera, por eso no he llegado a una solución matemática (que tampoco soy un génio) ni he podido sacar conclusiones en pseudocode. De otra forma creo que sería muy fácil, si todos los paneles fuesen del mismo tamaño sólo tendría que "handlear" todos los elementos en un sub, hacer una regla de trés con todos los elementos y restarle/sumarle el valor del tamaño del panel para resizarlos... en fín me valdría de ese valor para poder hacer todo de una forma más automática, pero es que no puedo hacerlo así.






En línea

Ari Slash


Desconectado Desconectado

Mensajes: 1.783



Ver Perfil WWW
Re: ¿Como se hace un menú DE IMÁGENES colapsables?
« Respuesta #3 en: 4 Marzo 2013, 16:50 pm »

Pues primero que nada te recomendaria crear los controles de forma dinamica, y con un correlativo y formato definido, luego a cada "boton" creado le enlazas un evento comun en el cual, tome el nombre del objeto (sender) y recorra todos los siguientes moviendo su posicion, extrayendo el correlativo del mismo nombre.

Si dejas cada fila de controles en un panel, debes solo reubicar ese panel, ya que los objetos internos a ese panel se reubican de acuerdo al panel.

Te dejo una funcion que hice hace mucho, a lo mejor se puede optimizar mas, en esta funcion tengo un check (tipo boton) que me desplega un richtext.

Espero que te sirva, saludos.

Código
  1. private void moverPaneles(object sender, EventArgs e)
  2.        {
  3.            int extender = this.altura_rich + 10;
  4.            int aspecto = int.Parse(((CheckBox)sender).Name.Replace("obsbtn", ""));
  5.            GroupBox grupo = (GroupBox)((Panel)((CheckBox)sender).Parent).Parent;
  6.            int n_grupo = int.Parse(grupo.Name.Replace("Grupo",""));
  7.            bool fin = false;
  8.  
  9.            if (((CheckBox)sender).Checked)
  10.            {
  11.                grupo.Height += extender;
  12.                ((Panel)grupo.Controls.Find("Panel" + aspecto, true)[0]).Height += extender;
  13.  
  14.                Panel panel;
  15.                aspecto++;
  16.                for (int i = aspecto; i <= this.total_aspectos; i++)
  17.                {
  18.                    try
  19.                    {
  20.                        panel = (Panel)grupo.Controls.Find("Panel" + i, true)[0];
  21.                        panel.Location = new Point(panel.Location.X, panel.Location.Y + extender);
  22.                    }
  23.                    catch (Exception ex)
  24.                    {
  25.                        fin = true;
  26.                        break;
  27.                    }
  28.                }
  29.  
  30.                if (fin)
  31.                {
  32.                    n_grupo++;
  33.                    for (int i = n_grupo; i <= this.total_grupos; i++)
  34.                    {
  35.                        try
  36.                        {
  37.                            grupo = (GroupBox)aspectosPanel.Controls.Find("Grupo" + i, true)[0];
  38.                            grupo.Location = new Point(grupo.Location.X, grupo.Location.Y + extender);
  39.                        }
  40.                        catch (Exception ex)
  41.                        {
  42.                            break;
  43.                        }
  44.                    }
  45.                }
  46.            }
  47.            else
  48.            {
  49.                grupo.Height -= extender;
  50.                ((Panel)grupo.Controls.Find("Panel" + aspecto, true)[0]).Height -= extender;
  51.  
  52.                Panel panel;
  53.                aspecto++;
  54.                for (int i = aspecto; i <= this.total_aspectos; i++)
  55.                {
  56.                    try
  57.                    {
  58.                        panel = (Panel)grupo.Controls.Find("Panel" + i, true)[0];
  59.                        panel.Location = new Point(panel.Location.X, panel.Location.Y - extender);
  60.                    }
  61.                    catch (Exception ex)
  62.                    {
  63.                        fin = true;
  64.                        break;
  65.                    }
  66.                }
  67.  
  68.                if (fin)
  69.                {
  70.                    n_grupo++;
  71.                    for (int i = n_grupo; i <= this.total_grupos; i++)
  72.                    {
  73.                        try
  74.                        {
  75.                            grupo = (GroupBox)aspectosPanel.Controls.Find("Grupo" + i, true)[0];
  76.                            grupo.Location = new Point(grupo.Location.X, grupo.Location.Y - extender);
  77.                        }
  78.                        catch (Exception ex)
  79.                        {
  80.                            break;
  81.                        }
  82.                    }
  83.                }
  84.            }
  85.  
  86.        }
  87.  
En línea

Eleкtro
Ex-Staff
*
Desconectado Desconectado

Mensajes: 9.818



Ver Perfil
Re: ¿Como se hace un menú DE IMÁGENES colapsables?
« Respuesta #4 en: 4 Marzo 2013, 17:06 pm »

Pues primero que nada te recomendaria crear los controles de forma dinamica, y con un correlativo y formato definido

luego a cada "boton" creado le enlazas un evento comun en el cual, tome el nombre del objeto (sender) y recorra todos los siguientes moviendo su posicion, extrayendo el correlativo del mismo nombre.

Muchas gracias por el code, de C# sólo entiendo un poco la sintaxis, tendré que pasarlo a VBNET a ver si saco algo en claro.

Lo de handlear todos los controles a un sub e interactuar con ellos mediante el sender se hacerlo, pero... ¿Como hago lo de mover sus posiciones sin saber las dimensiones exactas de cada elemento desplegable?, eso es lo que me reconcome la cabeza... y sé que se puede hacer, pero no tengo mucha capacidad resolutiva con este tipo de problemas que son más matemáticos que otra cosa xD.

Por cierto, lo que he subrayado de tu comentario, ¿me lo podrías explicar mejor?, creo que no lo he entendido ¿Crear controles de forma dinámica, correlativos y con formato definido?, no he entendido nada de esa parte, ¿Que me estás sugeriendo que haga?, ¿Donde busco información acerca de eso?.

Un saludo!
« Última modificación: 4 Marzo 2013, 17:10 pm por EleKtro H@cker » En línea

Ari Slash


Desconectado Desconectado

Mensajes: 1.783



Ver Perfil WWW
Re: ¿Como se hace un menú DE IMÁGENES colapsables?
« Respuesta #5 en: 4 Marzo 2013, 17:34 pm »

Bueno para saber las dimensiones solo llamas al objeto a traves de controls, y extraes su dimension. Usando Controls debes saber solo el nombre del objeto para tener acceso a sus propiedades,
algo asi (no tengo visual studio en este momento) esto es ficticio:

(imagen)((Panel)miform.Controls.find("panel1")).controls.find("imagen1").altura

por eso te digo que crees los controles con formato, me refiero a que por ejemplo la primera parte es un boton y una imagen dentro del panel,
entonces como son los primeros deberas llamarlos Panel1, imagen1, boton1, eso es un formato definido de nombres para los objetos.
Y de forma dinamica bueno no creo que sea necesario, me refiero a traves de un ciclo for crear los objetos y ubicarlos en tu formulario (todo por codigo) sin usar el diseñador, pero esto viendolo bien no es necesario.

Saludos
En línea

Eleкtro
Ex-Staff
*
Desconectado Desconectado

Mensajes: 9.818



Ver Perfil
Re: ¿Como se hace un menú DE IMÁGENES colapsables?
« Respuesta #6 en: 4 Marzo 2013, 19:34 pm »

uf... a ver, esto es lo que llevo intentando.

Quiero repetir que esto se hacerlo manuálmente, pero es un coñazo, y lo que pretendo es automatizarlo bastante, como por ejemplo especificando sólamente el tamaño del elemento a expandir, y esto es lo que he intentado en el siguiente code que voy a mostrar

Esto es un form con 4 botones y 4 paneles del mismo tamaño de Ancho, los paneles están detrás de los botones:



Todos los controles siguen este orden de nombre numérico:
Código:
Panel_X
Button_X

Bien, y esto es mi frustrado intento, he conseguido que funcione corréctamente el primer elemento ("Button_1"), es decir, que se expanda manteniendo la relación entre los otros elementos:





Pero si intento expandir otro elemento que no séa el "1", esto se convierte en un cáos:



Además, luego está el tema de revertir los cambios, es decir, si expando el elemento "1", y luego quiero expandir el "3", primero tengo que contraer el elemento que estaba abierto, el "1", para luego expandir el "3"... digo yo.

 
En fín, el código:
Código
  1. Public Class Form1
  2.  
  3.    Dim Selected_TAB As Integer ' El número del botón clickado
  4.    Dim Margin_TAB As Integer = 30 ' el margen de espacio que le quiero dar a los botones
  5.    Dim Element_Size_Y As Integer ' la altura del panel
  6.  
  7.    Private Sub sub_btn_sel(sender As Object, e As EventArgs) Handles Button_1.Click, Button_2.Click, Button_3.Click, Button_4.Click
  8.  
  9.        Selected_TAB = sender.name.split("_")(1)  ' El número del botón clickado
  10.        Dim Temp_Margin_TAB As Integer = Margin_TAB
  11.  
  12.        ' Estas son las dimensiones de altura de cada panel que quiero expandir/contraer
  13.        Select Case Selected_TAB
  14.            Case 1
  15.                Element_Size_Y = 25
  16.            Case 2
  17.                Element_Size_Y = 50
  18.            Case 3
  19.                Element_Size_Y = 80
  20.            Case 4
  21.                Element_Size_Y = 155
  22.            Case Else
  23.        End Select
  24.  
  25.        For Each Control In Panela.Controls
  26.            If Control.GetType.ToString.Contains("Button") Then
  27.                Dim Botoncito As Button = CType(Control, Button)
  28.                If Not Botoncito.Name = "Button_" & Selected_TAB Then
  29.                    Margin_TAB += Temp_Margin_TAB
  30.                    Botoncito.Location = New Point(Botoncito.Location.X, Element_Size_Y + Margin_TAB)
  31.                End If
  32.            End If
  33.        Next
  34.  
  35.        For Each Control In Panela.Controls
  36.            If Control.GetType.ToString.Contains("Panel") Then
  37.                Dim Panelito As Panel = CType(Control, Panel)
  38.                If Not Panelito.Name = "Panel_" & Selected_TAB Then
  39.                    Panelito.Visible = False
  40.                Else
  41.                    Panelito.Visible = True
  42.                    Panelito.Size = New Size(Panelito.Width, Element_Size_Y)
  43.                    Panelito.Location = New Point(Panelito.Location.X, Temp_Margin_TAB)
  44.                End If
  45.            End If
  46.        Next
  47.    End Sub
  48.  
  49. End Class
« Última modificación: 4 Marzo 2013, 19:39 pm por EleKtro H@cker » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines