Los controles principales

Transcripción

1 Los controles principales En el anterior capítulo se han estudiado las clases principales para el diseño de aplicaciones Windows. A continuación se describen los controles más utilizados para este tipo de aplicaciones. Las clases RadioButton y CheckBox La clase base de estos dos controles, al igual que el de la clase Button es ButtonBase. El control RadioButton se utiliza cuando se pretende elegir una única opción entre varias. Un buen ejemplo lo constituye un formulario en que el usuario debe elegir, al rellenar sus datos personales, si es hombre o mujer. Un RadioButton sólo puede tener dos estados: seleccionado o no seleccionado. Los controles RadioButton deben ser mutuamente excluyentes entre sí. Esto se consigue haciendo que pertenezcan a una misma unidad lógica por medio de un control GroupBox, o bien, si únicamente es una unidad, el formulario que los contiene los agrupa. Para hacer esto, se ubica en primer lugar en el formulario el control GroupBox y posteriormente, se van colocando en su interior los controles RadioButton que deban estar ligados entre sí. Si no se hace de esta manera, pueden elegirse varias opciones RadioButton de manera simultánea, es decir, no serán excluyentes entre sí. Un CheckBox permite elegir varias opciones que no sean mutuamente excluyentes. Un buen ejemplo, es un formulario en el que se pregunte acerca de los idiomas que se habla. A diferencia de un RadioButton, este control puede tener tres estado: seleccionado, no seleccionado e inhabilitado, que es un estado en el cual el control se dibuja en gris y no tiene ningún efecto hacer click sobre él. A continuación se estudian las propiedades y eventos más importantes y se realizará un sencillo ejemplo. Propiedades Appearance AutoCheck Checked CheckState ThreeState Define la apariencia del control, bien con apariencia estándar o bien con apariencia de un botón en 3D. Hace que el control cambie de estado siempre que se haga click sobre él. Indica si el control está en estado seleccionado o no. Indica el estado de selección del control. Sólo para el CheckBox. Puede ser Unchecked, Checked o Indeterminate. En este último, el control se dibuja en gris. (Sólo CheckBox) Propiedad booleana. A False no se permite el estado Indeterminate. A True, se permiten los tres estados 1/48

2 Eventos Los eventos más utilizados por supuesto que también son eventos de estos controles todos los que se derivan de la clase Control- son los siguientes: CheckedChanged Ocurre cuando cambia la propiedad Checked. Es el evento por defecto. Click Ocurre al realizar un click de ratón sobre el control. CheckedStateChanged Ocurre cuando cambia la propiedad CheckedState (Sólo CheckBox) La clase GroupBox Cuando se coloca sobre un formulario un control, el formulario es el padre parent- de ese control y éste es hijo. Algunas de las propiedades del formulario tipos de letra, colores, etc...- pasan de manera automática del padre al hijo. Si se cambian en el padre, cambiarán también en el hijo. Sólo si se cambian éstas propiedades en el hijo, dejarán de tener el mismo comportamiento que en el padre. Lo mismo ocurre cuando se sitúan una serie de controles en un control GroupBox. Éste es el padre de todos los controles que se sitúen en él y su comportamiento en algunas propiedades es idéntico. Por eso, cuando se mueve un control GroupBox, se desplazan también con él todos los controles que contiene. Si se inhabilita un control GroupBox, todos los controles hijo se inhabilitarán con él. Lo mismo sucede al cambiar el color del fondo o el tipo de letra. Estos controles se utilizan para agrupar controles. Si contiene controles RadioButton, serán mutuamente excluyentes entre sí. No se estudian aquí ninguna propiedad porque las hereda todas de la clase Control. La clase ToolTip En general, las aplicaciones más recientes incorporan una pequeña etiqueta autoexplicativa de la funcionalidad de los controles cuando se deja el ratón inmóvil sobre ellos durante un breve espacio de tiempo. Es muy sencillo añadir esta característica a las aplicaciones de Windows. Para ello, se debe añadir un control ToolTip al formulario y de manera automática se añade una nueva propiedad en todos los controles de ese formulario denominada ToolTip on.... Basta entonces con definir un texto en la ventana de propiedades de cada control. Cuando se ejecute la aplicación, se habrá añadido esta característica. Son pocas las propiedades y métodos de esta aplicación y no se suelen modificar. Las más importantes de esta clase son: 2/48

3 Propiedades Active AutomaticDelay AutoPopDelay InitialDelay ReshowDelay Define si el control está activo o no. Es el tiempo en milisegundos, que transcurre antes de que se visualice la etiqueta. Es el tiempo en milisegundos, que permanece visible la etiqueta. Es el tiempo en milisegundos, que el cursor debe estar inmóvil para que se visualice la etiqueta. Es el tiempo en milisegundos, que transcurre antes de que se visualice la etiqueta cuando se pasa de una región a otra. Métodos string GetToolTip(Control c) SetToolTip(Control c, straing str) Obtiene el texto de un ToolTip asociado a un determinado control. Define el texto de un ToolTip asociado a un determinado control. Observación: la clase ToolTip no deriva de la clase Control, sino de la clase Component. Las clases ListBox y CheckListBox Un control ListBox permite presentar una lista de elementos que el usuario puede seleccionar pulsando con el ratón o con el teclado. Tiene dos modos de selección: simple o múltiple. El modo selección se define en la propiedad SelectionMode. Puede también tener una o varias columnas -propiedad MultiColumn - Un control CheckListBox es una lista que tiene un control CheckBox en la parte izquierda de cada elemento, indicando si está seleccionado o no. Un ejemplo es el de la figura Estas dos clases se estudian juntas porque su funcionalidad es muy parecida y, por lo tanto, coinciden muchas de sus propiedades y eventos. La jerarquía de clases es la de la figura 16.1: Control ListControl ListBox 3/48 ComboBox

4 Figura 16.1 Las propiedades Items, SelectedItems y SelectedIndices dan acceso a las tres colecciones que controlan la información de un ListBox, que son las que a continuación se indican: ListBox.ObjectCollection Es la colección que contiene todos los elementos del control ListBox. ListBox.SelectedObjectCollection Es la colección que contiene todos los elementos seleccionados del control ListBox. ListBox.SelectedIndexCollection Es la colección que contiene todos los índices de los elementos seleccionados. Suponga, por ejemplo, que se tiene un ListBox con los cinco elementos de la tabla siguiente. Indice Item Estado en el ListBox 0 objeto1 No seleccionado 1 objeto2 Seleccionado 2 objeto3 No seleccionado 3 objeto4 Seleccionado 4 objeto5 Seleccionado La colección ListBox.ObjectCollection contiene los cinco objetos. La colección ListBox.SelectedObjectCollection almacena los siguientes objetos: Indice Item 0 objeto2 1 objeto4 2 objeto5 La colección ListBox.SelectedIndexCollection almacena los siguientes índices: Indice Indice del elemento 0 2 4/48

5 Los métodos comunes a todas las colecciones Add, Remove, Insert, etc- permiten trabajar con este control de una manera muy sencilla. A continuación se especifican las propiedades más importantes: Propiedades Items Es la colección que contiene todos los items o elementos de la lista. Esta propiedad se utiliza para añadir, insertar o eliminar elementos de la lista, por medio de los métodos Add, Insert, Remove, etc... En tiempo de diseño tiene un editor de la colección, para añadir, insertar o eliminar los elementos que estarán presente es al comienzo de la ejecución de la aplicación. SelectedIndex Es un valor entero que indica el índice del elemento seleccionado. Si su valor es 1, no hay ningún elemento seleccionado. SelectedItem Es el item o elemento seleccionado en la lista. SelectedIndices Devuelve una colección con una lista de índices de los elementos de la lista seleccionados. SelectedItems Devuelve una lista de los elementos o items seleccionados. SelectionMode Indica el modo de selección de la lista. Tiene cuatro posibles valores: None: No se puede seleccionar ningún item. One: Sólo es posible seleccionar un elemento. MultipleSimple: se pueden seleccionar varios items de manera simultánea MultiExtended: Igual que la anterior, pero el usuario puede utilizar las teclas CTRL, SHIFT y las flechas para hacer sus selecciones. MultiColumn Define el número de columnas de la lista. ColumnWidth En una lista de varias columna, esta propiedad define el ancho de ellas Sorted Propiedad booleana que indica si la lista está ordenada por orden alfabético. Además de estas propiedades, la clase CheckListBox tiene otras cuatro importantes propiedades que se explican a continuación. CheckedIndices CheckedItems CheckedOnClick ThreeDCheckBoxes Es una colección que contiene los elementos de la lista que están en estado Checked o Indeterminate. Es la colección de los elementos de la lista que están en estado Checked o Indeterminate. Propiedad booleana que indica si un item cambiará de estado cuando el usuario pulse con el ratón en él. Indica si la apariencia del control es 3D Métodos 5/48

6 Hay varios métodos muy interesantes a la hora de trabajar con estos controles. ClearSelected() Anula la selección de la lista FindString(string str) Busca la primera cadena de la lista que comience con el string especificado. FindStringExact(string str) Busca la primera cadena que coincida con la cadena especificada. GetSelected(int n) Devuelve un valor booleano indicando si el item n está seleccionado. SetSelected(int n, bool b) Selecciona o anula la selección del elemento de índice n dependiendo del valor booleano pasado, b. GetItemChecked(int n) Devuelve un valor booleano indicando si el item n está o no seleccionado. (Sólo CheckListBox) GetItemCheckState(int n) Devuelve un valor indicando el estado del item n. (Sólo CheckListBox) Eventos Además del resto de los eventos que heredan de la clase Control, estas clases tienen dos eventos específicos: ItemCheck Ocurre cuando cambia el estado de uno de los elemento de la lista. SelectedIndexChanged Ocurre cuando cambia el índice del elemento seleccionado. Es el evento por defecto. Ejemplo: trabajando con el control ListBox. 6/48

7 Figura 16.2 Se trata de una aplicación que tiene dos controles ListBox, de nombres lbi y lbd, dos cajas de texto, con propiedades Name textoi y textod y siete botones, cuatro de ellos para intercambiar elementos entre las listas, de propiedad Name btnd, btndd, btnii y btni, y de propiedades Text >, >>, << y <, dos más para añadir elementos a las listas, de propiedad Name btnanadiri y btnanadird y de propiedad Text Añadir y un botón que servirá para terminar la aplicación de propiedad Name btncerrar y propiedad Text Cerrar. La aplicación debe realizar las siguientes tareas: Añadir los nombres de ciudades escritos en las cajas de texto textoi o textod situados en la parte inferior de los ListBox al pulsar los botones btnañadiri o btnañadird respectivamente. Si se selecciona una ciudad en el ListBox de la izquierda y se pulsa el botón > o < dicho elemento pasará de una lista a otra. Si se pulsa >> o << pasan todos los elementos a la otra lista. Haciendo doble click en una lista, pasa el elemento que se ha pulsado a la otra lista. Pulsando el botón Cerrar, concluye la aplicación. En primer lugar hay que diseñar gráficamente la aplicación y asignar las propiedades Name y Text correspondientes y a continuación escribir el código de los distintos eventos. 7/48

8 Utilizando el editor que proporciona este control pulse sobre los puntos suspensivos correspondientes a la propiedad Items del ListBox- escriba algunos elementos, para que estén presentes al comienzo de la aplicación (Figura 16.2). Items a) El botón btnanadird debe: Recoger el texto en la propiedad Text de la caja textoi y añadirlo al lbi con el método Add de Items. Borrar el texto de la caja de texto Devolver el foco a la caja de texto. El código correspondiente es: lbi.items.add(textoi.text); textoi.clear(); textoi.focus(); b) Botón btnd: //Se recoge el elemento seleccionado en el lbi con la propiedad SelectedItem //y se añade al lbd con el método Add de Items lbd.items.add(lbi.selecteditem); //Se borra el elemento seleccionado, con el método Remove de lbi.items.remove(lbd.selecteditem); c) Botón btndd: Se recogen en un array de objetos todos los elementos de la lbi con la propiedad All de Items. Se recorre el array y se van añadiendo al lbd,con la propiedad Add de Items. Se borran todos los elementos del lbi con el método Clear de Items. object[] arrayobjetos=lbi.items.all; foreach(object i in arrayobjetos) lbd.items.add(i); lbi.items.clear(); d) Evento doble-click en la lista lbi: El código será el mismo que el del botón btnd, así que en lugar de escribirlo de nuevo, se selecciona el evento doble-click del lbi y se selecciona el evento de nombre btnd_click. e) Para cerrar la aplicación, basta incluir el código siguiente del btncerrar: Application.Exit(); Los códigos de los demás botones y el hecho de considerar la posibilidad de que se pulse el btnd por ejemplo- sin estar seleccionado ningún elemento de la lista -que lleva consigo un error en tiempo de ejecución se dejan al lector. 8/48

9 Se propone también la realización de esta misma aplicación pero en donde se permita la selección múltiple en los ListBox. Más adelante, al explicar la clase StatusBar se realiza un ejemplo que utiliza la clase CheckListBox. La clase ComboBox Al igual que la clase ListBox, esta clase deriva de la clase ListControl. El control correspondiente a esta clase combina tres controles: un TextBox, un Button y un ListBox. En este control la selección no puede ser múltiple y es posible, dependiendo del valor de algunas propiedades añadir elementos a través del TextBox. Generalmente se utiliza para seleccionar una entrada del usuario, pero ahorrando espacio en el formulario. Al hacer click en la flecha del ComboBox se despliega la lista y es posible hacer la selección. También se puede trabajar con el teclado. Propiedades Muchas de las propiedades coinciden con las de un TextBox y las de un ListBox. Por esto, la lista de propiedades de este control es muy extensa. Se señalan aquí las más comunes y utilizadas. DropownStyle DroppedDown Items MaxLength SelectedIndex SelectedItem SelectedText Especifica uno de los tres modos de presentación del control: DropDown: Se puede editar el TextBox y al pulsar la flecha del control, se despliega la lista. Simple: igual a DropDown, excepto que se despliega la lista de manera parecida a un ListBox. DropDownList: No puede editarse el TextBox y al pulsarse la flecha del control se despliega la lista. Propiedad booleana. Indica si el ComboBox está o no desplegado Es la colección de todos los elementos del control. A través de ella, pueden añadirse o eliminarse elementos de la lista. En tiempo de diseño, tiene un editor para añadir de manera muy sencilla elementos a la colección y por lo tanto al control. Especifica el número de caracteres que es posible introducir en el TextBox del control. Indica el índice del elemento seleccionado. Indica el elemento seleccionado. Es el texto seleccionado en el TextBox de la lista. SelectionStart Es el índice del primer carácter seleccionado en el TextBox. SelectionLength Es la longitud del texto seleccionado en el TexBox Sorted Propiedad booleana que indica si los elemento del control están ordenados. Eventos 9/48

10 Los eventos principales además de los heredados de Control- son: DropDown Ocurre cuando la lista del ComboBox se despliega SelectedIndexChanged Ocurre cuando cambia la selección de la lista. TextChanged Ocurre cuando cambia la propiedad Text cambia Ejemplo: trabajando con el control ComboBox. Cree un nuevo proyecto denominado ProyectoComboBox Añada un control ComboBox con las siguientes propiedades: Name: cbfutbol Items: Pulse en los puntos suspensivos y aparecerá el editor de la figura 16.3: Figura 16.3 Añada unos cuantos equipos de fútbol. Escriba en el constructor del formulario código para seleccionar uno de ellos. En este caso, se selecciona el primero índice 0-. public Form1() InitializeComponent(); cbfutbol.selectedindex=0; lequipo.text=cbfutbol.selecteditem.tostring(); 10/48

11 a) Añada una etiqueta y cambie sus propiedades: Name: lequipo Text: (Vacío) La ubicación de los elementos debe ser parecida a la de la figura 16.4: Figura 16.4 b) Se pretende que cuando el usuario cambie la selección en el ComboBox, el texto del elemento elegido se asigne a la propiedad Text de la etiqueta. Para ello, escriba el siguiente código en el método cbfutbol_selectedindexchanged que será el que maneje el evento SelectedIndexChanged: private void cbfutbol_selectedindexchanged(object sender, System.EventArgs e) lequipo.text = cbfutbol.selecteditem.tostring(); 11/48

12 Las clases NumericUpDown y DomainUpDown Son dos clases que permiten recorrer una lista de cadenas (DomainUpDown) o de números (NumericUpDown) para que el usuario realice una elección. Se recorre la lista de los valores por medio de un par de pequeños botones que indican si el desplazamientoes hacia arriba o hacia abajo. Un ejemplo de utilización de estos controles lo constituye la pantalla para configurar la impresión de documentos en Microsoft Word, en la opción número de copias que se desean hacer (figura 16.5). Se permite al usuario escribir el número en el control o bien, sin tener que utilizar el teclado, realizar la selección con pulsaciones sobre las flechas. Figura 16.5 DomainUpDown y NumericUpDown derivan de una clase común llamada UpDownBase que proporciona la funcionalidad básica a ambas. A su vez, ésta deriva de la clase ScrollableControl y ésta de Control. Por lo tanto, sus miembros son comunes a ambas. Propiedades Propiedades de UpDownBase: 12/48

13 bool InterceptArrowKeys bool ReadOnly string Text Indica si el usuario puede utilizar o no las flechas para seleccionar valores. Indica si el usuario puede introducir un dato para cambiar el texto del control escribiendo con el teclado. Texto del control Propiedades DomainUpDown DomainUpDownItemCollection Items int SelectedIndex object SelectedItem bool Sorted Colección de los elementos del control Índice del elemento seleccionado Elemento seleccionado Indica si los elementos están ordenados. Propiedades de NumericUpDown int DecimalPlaces bool ThousandsSeparator bool Hexadecimal decimal Increment decimal Minimun decimal Maximun decimal Value Configuran la presentación del número en el control. Incremento al pulsar el control. Por defecto es 1. Valores máximo y mínimos Valor del texto del control Se realiza un ejemplo con este control más adelante, al explicar el control TabControl. La clase Panel Esta clase deriva de la clase ScrollableControl y ésta de la clase Control. Un panel es un control que puede contener a otros controles. Se puede utilizar un panel para agrupar colecciones de controles como RadioButton. Como otros controles contenedores, si su propiedad Enabled es false, los controles que contiene también tendrán esa propiedad a false. Por defecto, se presenta sin bordes, aunque pueden definirse por medio de su propiedad BorderStyle. Panel deriva de la clase ScrollableControl y por ello proporciona la propiedad AutoScroll para disponer de barras de desplazamiento en el panel si se desea. Esto es muy útil cuando se tienen muchos controles y no pueden contenerse todos en un formulario por falta de espacio físico en la ventana que los contiene o bien si se tiene una imagen que ocupa una superficie mayor que el control que lo contiene. Esta es la 13/48

14 gran diferencia con un control GroupBox. Sin embargo, la funcionalidad de ambas es igual ya que ambas se utilizan como contenedores de controles. La clase StatusBar (Barra de estado) El control StatusBar o barra de estado, se utiliza generalmente para proporcionar información al usuario acerca del estado de la aplicación. Dicha información se puede dividir en paneles. Puede tener tantos paneles como se desee y en ellos se puede presentar texto o imágenes (figura 16.6). Un ejemplo muy corriente lo constituye la barra de estado del procesador de texto Word de Microsoft, donde se informa de la página, la sección, el número total de páginas, la línea y columna dentro de la página actual, etc... Aunque generalmente se coloca en la parte inferior del un formulario, puede situarse en cualquier otro lugar. Figura 16.6 Esta clase deriva directamente de la clase Control. La clase StatusBar se usa para crear una barra de estado y la clase StatusBarPanel para crear paneles de la barra de estado. //Se crean una barra de estado y dos paneles this.statusbar1 = new System.Windows.Forms.StatusBar(); StatusBarPanel panel1 = new StatusBarPanel(); StatusBarPanel panel2 = new StatusBarPanel(); Para añadir paneles a la barra de estado, se ha de llamar al método StatusBar.Panels.AddRange. Por ejemplo: 14/48

15 statusbar1.panels.addrange( new StatusBarPanel[] panel1, panel2); Se puede escribir texto en una barra de estado, asignándoselo a la propiedad Text del control. Pero también es posible asignar varios paneles para presentar una información más rica en detalles. Como antes se ha mencionado, puede insertar imágenes en una barra de estado en el interior de un control Panel. Para ello, debe utilizarse la propiedad Icon del Panel. Icon icono = new Icon(@"c:\mouse.ico"); panel1.icon = icono; Podría añadirse información sobre la hora en el otro panel: panel2.text = DateTime.Now.ToString(); Propiedades Las propiedades más importantes de esta clase son las siguientes: Panels De sólo lectura. Es la colección de paneles de la barra de herramientas. Se utiliza para añadir o eliminar elementos del control. En tiempo de diseño se proporciona un pequeño editor que facilita enormemente la tarea de especificar el comportamiento de cada panel. Para llamar a cada panel, se puede hacer por su nombre o bien por medio de su índice: Panel[0], Panel[1],... El texto de cualquiera de ellos lo define la propiedad Text: Panel[0].Text, Panel[1].Text, etc. (Figura16.7) BacgroundImage Es posible asignar una imagen de fondo al control a través de esta propiedad. ShowPanels Propiedad booleana que permite o anula la posibilidad de presentar paneles en la barra. Text Es el texto que aparece en la barra de herramientas, sólo en el caso de que no haya paneles. Eventos No se suelen utilizar eventos en este control, aunque si se pretende dibujar un control manualmente, son necesarios los siguientes: DrawItem Panel_Click Ocurre cuando el panel que tiene el estilo OwnerDraw necesita ser redibujado Cuando se hace click sobre un panel de la barra de estado Para dibujar manualmente un panel es necesario tener la propiedad Style del panel a OwnerDraw y escribir el código en el evento DrawItem. 15/48

16 Como anteriormente se ha dicho, cada panel de la barra de estado es un objeto o instancia de la clase StatusBarPanel. Esta clase encapsula la información referida a cada uno de los paneles de la colección de paneles. Por ejemplo, permite definir si es un simple texto o el estilo del panel o un icono. Ejemplo: trabajando con barras de estado. La siguiente aplicación actualiza en la barra de estado las selecciones realizadas en diferentes controles. a) Cree un nuevo proyecto llamado ProyectoBarraDeEstado. Cambie la propiedad Name del formulario a FormularioPrincipal y modifique en el método Main() la línea Application.Run(new Form1()); por la línea: (OJO ver versión definitiva) Application.Run(new FormularioPrincipal()); Modifique la propiedad Text del formulario a Formulario Principal b) Añada al formulario los siguientes controles en la posición aproximada de la figura 16.8 y con las propiedades que se indican: ListBox Name: SelectMode: Items: lista One (Hacerlo con el editor) Jaén Sevilla Granada Córdoba Cádiz Huelva Almería GroupBox Name: groupbox1 Text: Sexo Añada a groupbox1 los siguientes controles: RadioButton: Name: rbhombre Text: Hombre Checked: True RadioButton: Name: rbmujer Text: Mujer Checked: False GroupBox Name: groupbox2 Text: Idiomas Añada a groupbox2 los siguientes controles: CheckBox: 16/48

17 Name: Text: Checked: CheckBox: Name: Text: Checked: CheckBox: Name: Text: Checked: cbingles Inglés False cbfrances Francés False cbaleman Alemán False CheckedListBox Name: clblenguaje CheckedOnClick: True Items: (Con el editor añada los siguientes strings) Java C# Pascal Fortran Cobol C++ C StatusBar Name: sbestado Panels: (Con el editor que se proporciona) Añadir los siguientes (Ver figura) Name: sbpciudad Name: sbpsexo Name: sbpidioma Name: sbplenguaje En todos: Text: (Vacío) ShowPanel: True Autosize: False en los dos primeros y True en los otros dos. 17/48

18 Figura 16.7 Más o menos, el aspecto final de la aplicación debe parecerse al de la figura 16.8: Figura 16.8 c) Se van a utilizar cuatro variables privadas de tipo string para cada uno de los paneles denominadas strciudad, strsexo, stridioma y strlenguaje. En el constructor del formulario se inicializan, como se indica a continuación: private string strciudad; private string strsexo; 18/48

19 private string stridioma; private string strlenguaje; public FormularioPrincipal() InitializeComponent(); strciudad="jaén"; strsexo="hombre"; stridioma="ninguno"; strlenguaje="ninguno"; lista.selectedindex=0; ActualizarBarra(); En la última línea, se añade un método que recoge la selección de cada control y la escribe en cada panel. Su código es: public void ActualizarBarra() sbestado.panels[0].text=strciudad; sbestado.panels[1].text=strsexo; sbestado.panels[2].text=stridioma; sbestado.panels[3].text=strlenguaje; d) Para recoger el ítem cada vez que se cambie la selección de la lista se debe tratar el evento SelectedIndexChanged. Escriba el siguiente código e) private void lista_selectedindexchanged(object sender, EventArgs strciudad=lista.selecteditem.tostring(); ActualizarBarra(); e) En los controles RadioButton, se obtiene el elemento seleccionado tratando el evento CheckedChanged. Este método trata el cambio de estado en cualquiera de los dos controles y por eso, hay que definir el mismo método para los dos. En este caso se ha dado a los dos el nombre del primero de ellos rbhombre_checkedchanged: private void rbhombre_checkedchanged(object sender, EventArgs e) if(rbhombre.checked) strsexo=rbhombre.text; else strsexo=rbmujer.text; ActualizarBarra(); f) La misma idea se utilizará para los siguientes controles CheckBox. El método común que tratará a los tres controles se llamará cb_checkedchanged. e) private void cb_checkedchanged(object sender, System.EventArgs stridioma=""; 19/48

20 if(cbingles.checked) stridioma+=cbingles.text+" "; if(cbfrances.checked) stridioma+=cbfrances.text+ " "; if(cbaleman.checked) stridioma+=cbaleman.text; ActualizarBarra(); g) Por último, se recogen las elecciones en el control CheckListBox, tratando el evento SelectedIndexChanged mediante el método clblenguaje_selectedindexchanged private void clblenguaje_selectedindexchanged(object sender, System.EventArgs e) strlenguaje=""; foreach(string str in clblenguaje.checkeditems) strlenguaje+=str + " "; ActualizarBarra(); En este método se recorre toda la colección de los items que tienen el estado a Checked y se añade su texto al string correspondiente. Luego se actualiza la barra. La clase TabControl Es un control que se utiliza cuando se quiere organizar mucha información de manera relacionada. Un buen ejemplo lo constituye, la ventana de opciones de Microsoft Word (figura 16.9). 20/48

21 Figura 16.9: ventana de opciones de Microsoft Word. Este control tiene varios TabPage o pestañas que trabajan de manera similar a un GroupBox. Para utilizar este control, se deben añadir el número de pestañas que se deseen a una colección del control llamada TabPages. Visual Studio proporciona un editor para añadir o eliminar las pestañas de la colección de manera gráfica, rápida e intuitiva. Se puede acceder a él a través de la propiedad TabPages del control. Posteriormente se van colocando los controles en cada pestaña. Propiedades Las propiedades más importantes son: Alignment Determina si las etiquetas son desplegadas en la parte superior, izquierda, derecha o inferior opciones Top, Left, Rigth y Bottom- del control. Appearance Determina la apariencia de las etiquetas: botones 3D, botones estándar o pestañas normales. HotTrack Propiedad booleana. Indica si la apariencia de la pestaña cambia al pasar con el ratón sobre el nombre de la pestaña. RowCount Número de filas de etiquetas en el control. TabCount Número de etiquetas del control TabPages Colección de pestañas. Se utiliza para añadir o eliminar 21/48

22 elementos del control. Además de lo indicado hasta el momento es importante recalcar que cada pestaña trabaja como un contenedor de controles como un GroupBox- y no como formularios distintos. Por eso, puede accederse desde un control de una pestaña a otro control de otra pestaña, cosa que no se puede hacer entre dos formularios diferentes. Sin embargo, lo más habitual será situar este control en una caja de diálogo y pasar los datos que se hayan seleccionado al formulario. Ejemplo: trabajando con el control TabControl. Esta aplicación figura simula la configuración de la impresión. En este ejemplo, sólo se intenta que la configuración elegida se presente en los controles de texto de la parte derecha de la ventana y no configura la impresión. a) Cree un nuevo proyecto que se llame ProyectoTabControl b) Modifique las propiedades del formulario: Name: formopciones Text: Opciones de configuración Modifique la línea del método Main() Application.Run(new Form1()); por la línea Application.Run(new FormOpciones()); Figura /48

23 c) Añada un control TabControl al formulario y modifique su propiedad Name a tcopciones (figura 16.10). d) Pulse sobre la propiedad TabPages y trabaje con el editor de las páginas del control para añadir dos pestañas (figura 16.11). Figura Pulse sucesivamente el botón Agregar cada vez que desee añadir una pestaña. Si se equivoca siempre puede pulsar el botón Eliminar y comenzar de nuevo. Name: Text: Name: Text: tpimprimir Imprimir tportografia Ortografía e) Cierre la ventana del editor. A continuación, desde la ventana de diseño, en la primera etiqueta vaya añadiendo los controles que se indican situándolos aproximadamente en posiciones que se aproximen a las de las figuras y 16.12: 23/48

24 Figura e.1) En la TabPage tpimprimir, añada los controles siguientes: GroupBox Name: groupbox1 Text: Impresora En groupbox1 sitúe tres etiquetas y un ComboBox con las propiedades: o o o o Label Name: label1 Text: Nombre Autosize: True Label Name: ltipodeimpresora Text: Tipo Autosize: True Label Name: label3 Text: (Vacío) Autosize: False ComboBox Name: cbimpresoras Text: HP LaserJet 1100 Items: HP LaserJet 1100 Canon Jet BCJ 4000 HP DeskJet 843C GroupBox 24/48

25 Name: groupbox2 Text: Intervalo de páginas En groupbox2 sitúe cuatro RadioButton y un TextBox con las propiedades: RadioButton o Name: rbtodo o Checked: True o Text: Todo RadioButton o Name: rbpaginaactual o Checked: False o Text: Página actual RadioButton o Name: rbpaginas o Checked: False o Text: Páginas RadioButton o Name: rbseleccion o Checked: False o Text: Selección TextBox o Name: txtseleccion o Text: (Vacío) GroupBox Name: groupbox3 Text: Copias En groupbox1 sitúe una etiqueta, tres CheckBox y un NumericUpDown: o Label Name: label3 Text: Número de copias Autosize: True o NumericUpDown Name: nudcopias Increment 1 Value: 1 Minimum: 1 Maximum: 100 o CheckBox Name: cbdoscaras Texto: Imprimir por las dos caras o CheckBox Name: cbcolor Texto: Imprimir en color o CheckBox Name: cbborrador Texto: Calidad borrador 25/48

26 g) En la otra TabPage, tportografia, añada únicamente un control CheckedListBox con las propiedades siguientes: CheckedListBox Name: clbortografia Items: (utilice el pequeño editor que aparece al pulsar sobre la propiedad) Corregir uso accidental de bloq myus Corregir dos MAyusculas SEguidas Poner en mayúscula la primera letra de una oración Cambiar las b por v No cometer ninguna falta de ortografía Reemplazar mientras se escribe ThreeDCheckBoxes:True CheckOnClick: True h) Sitúe fuera del control TabControl, dos etiquetas explicativas de dos cajas de texto donde se escribirá la configuración seleccionada. Label Name: label4 Text: Opciones de impresión elegidas Label Name: label5 Text: Opciones de ortografía seleccionadas TextBox Name: txtopcionesimpresion Text: (Vacío) Multiline: True TextBox Name: txtopcionesortografia Text: (Vacío) Multiline: True Para actualizar las cajas de texto de la derecha. Se crean tres variables de tipo string y se les da unos valores iniciales en el constructor del formulario: //Declaracion de miembros de la Clase FormOpciones string nombreimpresora; string intervalopaginas; string opcionescopias; string ncopias; string strortografia; private System.ComponentModel.Container components = null; public FormOpciones() nombreimpresora="hp LaserJet 1100"; intervalopaginas=" Todo"; opcionescopias = " "; ncopias =" 1"; strortografia=""; 26/48

27 InitializeComponent(); Cree un método público que facilite la actualización de la caja de texto txtopcionesimpresion. Este método simplemente devuelve la concatenación de los resultados de cada grupo de opciones. public string ActualizarOpciones() return (nombreimpresora+intervalopaginas+opcionescopias+ncopias); En el evento SelectedIndexChanged del ComboBox cbimpresoras, escriba el siguiente código: private void cbimpresoras_selectedindexchanged(object sender, EventArgs e) nombreimpresora=cbimpresoras.selecteditem.tostring(); ltipodeimpresora.text=nombreimpresora; txtopcionesimpresion.text=actualizaropciones(); La primera línea recoge el ítem seleccionado como string. Después se escribe la etiqueta que recoge el resultado de la elección y posteriormente se llama al método ActualizarOpciones() para actualizar la caja de texto txtopcionesimpresion. A continuación se escribe el código del evento CheckedChanged de los RadioButton. Para ello añada este evento en uno de los controles, con el nombre rb_checkedchanged y escriba el siguiente código. private void rb_checkedchanged(object sender, System.EventArgs e) if(rbtodo.checked) intervalopaginas="imprimir Todo"; else if(rbpaginaactual.checked) intervalopaginas="imprimir página actual"; else if(rbpaginas.checked) intervalopaginas="imprimir paginas: " + txtseleccion.text; else if(rbseleccion.checked) intervalopaginas="imprimir selección"; txtopcionesimpresion.text=actualizaropciones(); Posteriormente, añada este mismo evento a los otros tres controles RadioButton, para que todos estén tratados por el mismo método manipulador. También se pretende que cuando se escriba algo en la caja de texto txtseleccion, se seleccione el RadioButton correspondiente, rbpaginas. Para ello, escriba el siguiente código en el evento TextChanged del TextBox: private void txtseleccion_textchanged(object sender, System.EventArgs e) 27/48

28 if(txtseleccion.text.length>0) rbpaginas.checked=true; intervalopaginas="imprimir paginas: " + txtseleccion.text; txtopcionesimpresion.text=actualizaropciones(); Se propone al lector que mejore el programa para que cuando se selcciona otro ComboBox, se borre el contenido de la caja de texto txtseleccion. Ahora seleccione los tres controles CheckBox, y con ellos seleccionados vaya a la Ventana de propiedades, y en la pestaña correspondiente a eventos, haga doble-click sobre el evento CheckedChanged con lo que los eventos de los tres serán tratados por el mismo manipulador cbdoscaras_checkedchanged. Esta es otra manera de hacer lo que antes se ha realizado control a control con los RadioButton. Escriba el siguiente código en el evento: private void cbdoscaras_checkedchanged(object sender, System.EventArgs e) opcionescopias=""; if(cbdoscaras.checked) opcionescopias+=" Dos caras "; if(cbborrador.checked) opcionescopias+=" borrador "; if(cbcolor.checked) opcionescopias+=" color "; txtopcionesimpresion.text=actualizaropciones(); Ahora añada el número de copias, del valor obtenido del control NumericUpDown. Para ello, en el evento nudcopias_valuechanged se escribe el siguiente código: private void nudcopias_valuechanged(object sender, System.EventArgs e) ncopias=nudcopias.value.tostring(); txtopcionesimpresion.text=actualizaropciones(); Ahora ya sólo queda tratar el control situado en la otra pestaña. Se tartará el evento SelectedIndexChanged que ocurre siempre que se cambia algunos de los elementos seleccionados. Para ello, se borra la variable strortografia, y se recorre la colección de todos los elementos seleccionados. Se obtiene el ítem correspondiente y se almacena en la variable. Por último, se asigna a la caja de texto el contenido de la variable. private void clbortografía_selectedindexchanged(object sender, System.EventArgs e) strortografia=""; foreach(string item in clbortografía.checkeditems) strortografia+=item; txtopcionesortografia.text=strortografia; 28/48

29 La clase TrackBar El control TrackBar -también llamado "slider"- se utiliza para navegar a través de una gran cantidad de información y/o para ajustar visualmente un determinado valor. Consta de dos partes: una es el propio slider o marcador y las propias marcas. El slider puede ser ajustado a un determinado valor y su posición corresponde a ese valor que se asigna a la propiedad Value. El marcador se mueve en incrementos que se pueden especificar. Las propiedades más importantes de este control son: Value, TickFrequency, Minimum, y Maximum. TickFrequency es el espaciamiento entre las marcas. Minimum y Maximum son los valores mínimo y máximo que puede representar el control. También tienen importancia las propiedades SmallChange y LargeChange, que representan el número de posiciones que se moverá el marcador en respuesta a pulsar las teclas izquierda o derecha y PAGE UP o PAGE DOWN -y también a un click de ratón en el propio control- respectivamente. Esta clase deriva directamente de la clase Control. Propiedades AutoSize LargeChange Maximum Minimum Orientation SmallChange TickFrequency TickStyle Value Define si el control se ajusta en tamaño automáticamente. Valor que se añade o resta a la propiedad Value cuando se mueve el slider por un click de ratón o con las teclas AV PAG o RE PAG. Límite superior de la propiedad Value. Límite inferior de la propiedad Value. Orientación del TrackBar Valor que se añade o resta a la propiedad Value cuando se mueve el slider desde el teclado con las teclas izquierda o derecha.. Es el incremento de valor entre las pequeñas marcas dibujadas en el control. Indica el modo de visualización del control. Es el valor numérico que representa la posición actual del slider. Eventos Scroll ValueChanged Ocurre cuando el slider se mueve por accion del ratón o por el teclado. Ocurre cuando la propiedad Value cambia. 29/48

30 Ejemplo: trabajando con el control TrackBar. En la siguiente aplicación las cajas de texto actualizan los valores de los TrackBar en cada momento. a) Cree un nuevo proyecto denominado BarrasDeDesplazamiento. b) Cambie el nombre del fichero Form1.cs a FormularioPrincipal.cs pulsando en la ventana Explorador de Soluciones y cambiando la propiedad Name del archivo por el nuevo nombre. c) Modifique el nombre de la clase Form1 a FormularioPrincipal. Para ello, pulse en la ventana Vista de clases, el ítem Form1 para que tenga el foco, cambie la propiedad Name del formulario de Form1 a FormularioPrincipal. d) Para ver el código de la aplicación pulse con el botón derecho el formulario y escoja la opción Ver código. e) Cambie esto es error de la beta- la línea Application.Run(new Form1()); por la línea Application.Run(new FormularioPrincipal()); f) Establezca la siguiente propiedad del formulario FormularioPrincipal Text: Aplicación demo de Barras de desplazamiento g) Sitúe dos controles TrackBar, en el formulario y haga que sean más o menos del mismo tamaño. h) A los dos controles TrackBar se les asignan las siguientes propiedades: Name: th y tv respectivamente, indicando que son dos TrackBar, uno horizontal y otro vertical. Orientation: Horizontal y Vertical respectivamente. Definen la orientación. Maximun: 100 Valor máximo del track. Minimum: 0 Valor mínimo del track. LargeChanged: 5 Incrementos grandes de valor. SmallChanged:1 Incrementos de valor. Value: 0 Indica el valor actual del track. Inicialmente, valor 0. TickFrecuency: 5 Frecuencia de las señales dibujadas en el track. TickStyle: BottomRight Estilo de la señal que indica el valor. i) Añada cajas de texto, del mismo tamaño, con las siguientes propiedades: Name: txtvalorbarrahorizontal y txtvalorbarravertical respectivamente. Text: 0 j) Añada dos etiquetas con las siguientes propiedades: AutoSize: True Text: Valor Barra Horizontal y Valor Barra Vertical, respectivamente 30/48

31 k) El aspecto final de la aplicación es el de la figura 16.14: Se puede ajustar los márgenes, tamaños y posiciones relativas con los controles situados en la barra de herramientas del IDE (figura 16.13) y con Crtl+flechas de posicionamiento Figura Figura l) Se pretende que cuando cambie el indicador de posición se indique su valor en los cuadros de texto. Para ello, Pulse sobre la barra vertical para tener el foco. En la ventana de propiedades, doble click sobre el evento ValueChanged del TrackBar Escriba el siguiente código: txtvalorbarrahorizontal.text = th.value.tostring(); y en otro control, txtvalorbarravertical.text = tv.value.tostring(); De esta manera se asigna a la propiedad Text de las cajas de texto los valores de los controles trackbar cada vez que éstos cambien. Observe el lector que se utiliza el 31/48

32 método ToString() que tiene cualquier objeto por heredarlo de la clase Object para convertir la cantidad que se obtiene de los trackbar a string. Compile y ejecute la aplicación. Se puede observar que esta aplicación queda un poco incompleta porque lo lógico sería que si el usuario cambia el valor de las cajas de texto, también cambiaran los valores en los TrackBar. Además sería conveniente controlar la entrada de la caja de texto para que sea numérica. No se ha hecho aquí para no complicar demasiado el código. Sin embargo, se realiza un ejemplo muy parecido al explicar la clase ScrollBar. La clase ScrollBar Muchos de los controles que precisan de barras de desplazamiento ya las proporcionan directamente. Esto sucede con los controles TextBox, ListBox y ComboBox. Este control se utiliza en aquéllos controles que no lo proporcionan directamente, como, por ejemplo, PictureBox. La jerarquía de esta clase es la siguiente: Control ScrollBar HScrollBar VScrollBar Figura Propiedades La propiedad principal es Value, que es el valor actual en la barra de desplazamiento. Además son también importantes las propiedades Minimum y Maximum que determinan el rango de los valores que el usuario puede seleccionar, LargeChange y SmallChange que definen el incremento cuando se produce incrementos grandes por pulsación del ratón en el control- y pequeños al pulsar en los extremos del control-. Eventos Scroll ValueChanged Ocurre cuando se mueve la barra de desplazamiento. Es el evento por defecto. Ocurre cuando cambia el valor de la propiedad Value. 32/48

33 Ejemplo: trabajando con el control ScrollBar. En esta aplicación se define el color de fondo de un panel a través de los valores numéricos correspondientes a las barras de desplazamiento (16.16). Figura Para ello cree un nuevo proyecto llamado DialogoColor y en el formulario principal sitúa los controles como aparecen en la figura Asigne las siguientes propiedades: -Formulario: Name: FormularioColor Text: Formulario de Color FormBorderStyle: FixedDialog Cambiar también (sólo en la versión beta) la línea de método Main(): Application.Run(new Form1()); por la línea: 33/48

34 Application.Run(new FormularioColor()); Añada un panel, tres etiquetas, tres cajas de texto y tres barras de desplazamiento con la situación de la figura anterior y con las propiedades siguientes: -panel: Name: panel BackColor: Black -Etiquetas: Name: los que vienen por defecto, o sea, label1, label2 y label3. Autosize: true -Cajas de texto: Name: txtrojo, txtverde y txtazul respectivamente. Text: 0 (en las tres) -Barras de desplazamiento (ScrollBar) Name: scbrojo, scbverde y scbazul. LargeChanged: 10 Maximun: 255 Minimun: 0 SmallChanged: 1 Value: 0 A continuación llame al evento ValueChanged de scbrojo y llámele scb_valuechanged. Las tres barras de desplazamiento compartirán el mismo método y código. Escriba el siguiente código: private void scb_valuechanged(object sender, System.EventArgs e) //Se recogen los valores de las barras de desplazamiento int nrojo=scbrojo.value; int nverde=scbverde.value; int nazul=scbazul.value; //Se asignan los valores a las cajas de texto txtrojo.text=nrojo.tostring(); txtverde.text=nverde.tostring(); txtazul.text=nazul.tostring(); //Se crea el color y se asigna al fondo del panel Color micolor=color.fromargb(nrojo,nverde,nazul); panel.backcolor=micolor; En el código anterior, en primer lugar se obtienen los valores de cada una de las barras de desplazamiento y se asignan a tres variables enteras. Posteriormente, se asignan estos valores a las cajas de texto, para que haya una correspondencia entre los valores de las barras y las cantidades de las cajas de texto. A continuación, en la línea: Color micolor=color.fromargb(nrojo,nverde,nazul); 34/48

35 se asigna al objeto micolor de la estructura Color, un color con el método estático FromArgb() que devuelve un objeto de tipo Color formado por la mezcla de los colores rojo, verde y azul en cantidades que vienen indicadas en cada uno de los tres argumentos con cantidades comprendidas entre 0 y 255. La estructura Color se trata en el capítulo dedicado al GDI. El formato de este método es: public static Color FromArgb(int rojo, int verde, int azul); Posteriormente, este color se asigna a la propiedad BackColor de panel. Hay que considerar que este código sirve para los tres controles. Para esto, debe asociarse este mismo evento de nombre scb_valuechanged a los controles scbverde y scbazul. También se deben definir los eventos ValueChanged de las otras dos cajas de desplazamiento. Para ello, se debe hacer click en la ventana de propiedades del control scbverde, en el evento ValueChanged; pulse en la parte de la derecha; sobre la flecha situada al final de la línea del evento aparece el nombre scb_valuechanged. Pulse sobre él y de modo automático se asocia este mismo evento al control scbverde. Realice la misma operación con el control scbazul. Ahora hay que considerar el paso inverso. Se trata de que cuando se cambien las cantidades de las cajas de texto, se modifiquen automáticamente y se sitúen en los valores correspondientes las barras de desplazamiento y se asocie el color correspondiente a estas cantidades al panel. En este ejercicio no se van a considerar los posibles errores en la introducción de valores en las cajas de texto, para no complicar excesivamente el ejercicio. Además, se considerará que no se cambie el color hasta que no se pulse ENTER. Por eso, se trata el evento KeyPress. Como las tres cajas de texto tienen el mismo código, se compartirán el mismo nombre para las tres como se ha hecho anteriormente. Se sigue el mismo camino anterior: doble click sobre el evento KeyPress de uno de las tres cajas de texto por ejemplo la primera y de modo automático se asocia el nombre txtrojo_keypress al control, ya que éste es el control por defecto de este control. Vuelva a la ventana de propiedades, y cambie el nombre por uno un poco más general, como por ejemplo, txt_keypress o cualquier otro. Escriba el siguiente código en la primera de las cajas de texto. private void txt_keypress(object sender, KeyPressEventArgs e) //Aquí se debería controlar que la entrada sea numérica int n=int.parse(((textbox)sender).text); if(n<=255 && n>=0) if(e.keychar=='\r') int nrojo=int.parse(txtrojo.text); 35/48

36 else int nverde=int.parse(txtverde.text); int nazul=int.parse(txtazul.text); scbrojo.value=nrojo; scbverde.value=nverde; scbazul.value=nazul; Color micolor=color.fromargb(nrojo,nverde,nazul); panel.backcolor=micolor; MessageBox.Show("Introduce un número entre 0 y 255"); Observaciones: a) En la línea int.parse(txtrojo.text); se convierte la cantidad correspondiente a la caja de texto que es un string- a un entero. b) Se chequea si el número introducido está entre 0 y 255 c) En la línea if(e.keychar=='\r') se chequea si la tecla pulsada es un ENTER, que corresponde al carácter \r. d) Se actualizan los valores de las barras con las cantidades correspondientes de las cajas de texto La clase PictureBox Un PictureBox se utiliza para visualizar gráficos: bitmaps, iconos, ficheros JPEG, GIF u otros tipos de archivos. Esta clase deriva directamente de la clase Control. Su propiedad Image define la imagen que se visualiza. El tamaño y posicionamiento de la imagen en el control se pueden controlar por medio de la propiedad SizeMode que puede tomar valores de la enumeración PictureBoxSizeMode. El control PictureBox se visualiza por defecto sin bordes, pero se puede modificar con la propiedad BorderStyle. Propiedades BorderStyle Image SizeMode Define el borde del control. Puede ser None, FixedSimple y Fixed3D. La imagen que se visualiza en el control. Modo de posicionamiento y visualización de la imagen. A continuación se muestran los valores que puede tomar. Nota: Valores de la enumeración PictureBoxSizeMode: AutoSize CenterImage El tamaño del control se modifica hasta ajustarse al de la imagen. Si la imagen es más grande que el control se visualiza en el centro 36/48

37 Normal StretchImage de la imagen. En el caso contrario, se visualiza en el centro del control. La imagen se sitúa en la esquina superior izquierda del control. Si la imagen es más grande que el control, no se visualiza entera. Se modifica el tamaño de la imagen para que se ajuste al control. Ejemplo: trabajando con barras de desplazamiento y con el control PictureBox. Esta aplicación lee una imagen al hacer doble click sobre el formulario y cuando se cambia el tamaño del formulario se refresca la imagen. Es posible que no se entiendan bien algunas de las líneas de código, en concreto las que se refieren a la carga de la imagen. Se explicarán en detalle más adelante. Cree un nuevo proyecto denominado ProyectoScrollBar con un control PictureBox de nombre cajaimagen y con su propiedad Dock a Fill para que ocupe todo el formulario y dos barras de desplazamiento VScrollBar y HScrollBar, de nombres sbhor y sbver y con sus propiedades Dock a Left y Bottom respectivamente. Añada un control openfiledialog al formulario y cambie su propiedad Name a dlgabrir. Figura Al hacer doble click sobre el control PictureBox se carga una imagen. Para ello, escriba el siguiente código en el evento DoubleClick del PictureBox private void cajaimagen_doubleclick(object sender, System.EventArgs e) // Dialogo para abrir un fichero if(dlgabrir.showdialog()!= DialogResult.Cancel) 37/48