Pontificia Universidad Catolica de Chile Escuela de Ingeniera Departamento de Ciencia de la Computacion

Rev : 2365

IIC1222 Programacin Avanzada (I/2009) o

Tutorial 04 - Controles adicionales

Realizado por Juan Pablo Canepa (complementado por Andrea Vsquez) a

1.

Introduccin o

En este documento se presentarn controles existentes en el namespace System.Windows.Forms que pueden resula tarles de utilidad a la hora de desarrollar su proyecto, pero para los cuales no hay suciente tiempo de clases como para detenerse en ellos. As mismo, se presentan algunas capacidades de formularios y controles que les pueden resultar de utilidad. El resto de este documento se organiza como se explica a continuacin. En la seccin 2 se presentan algunos controles o o de los existentes por defecto en el .NET Framework, que no fueron vistos en clases. En la seccin 3 se introduce y o explica el concepto de formulario MDI. En la seccin 4 se presentan algunos cuadros de dilogo de utilidad general, y o a nalmente en la seccin 5 se hacen referencia a ciertas facilidades que nos provee Visual Studio para manejar el layout o o distribucin de los controles de la aplicacin. o o

2.

Controles

La siguiente no es una lista exhaustiva de los controles existentes ni de sus propiedades. Simplemente se presentan un subconjunto (tanto de los controles como de las propiedades de cada uno) para servir de referencia a la hora de programar. El resto de los controles y sus particularidades son parte de lo que deben investigar como grupo. Se presentan simplemente los casos ms bsicos, no anlisis exhaustivos. a a a

2.1.

CheckedListBox

Un CheckedListBox es esencialmente lo mismo que un listbox, con la diferencia que cada item de la lista se muestra con un checkbox a su lado. Esto permite tener una lista de elementos de los cuales es posible activar un subconjunto (ver gura 1).

Figura 1: Un CheckedListBox con 3 elementos, 2 de los cuales marcados. La operacin de este control, por heredar de ListBox es la misma que para esta, con la direferencia de la adicin o o del evento ItemCheck que se gatilla cuando el checkbox de un elemento de la lista es seleccionado/deseleccionado.

2.2.

ProgressBar

Un ProgressBar es una barra que sirve para mostrar el avance de algn proceso (como la aplicacin de un ltro o u o el guardado a archivo, ver gura 2). Esta tiene como propiedades principales: int Value Determina que tan llena est la barra. Tiene que estar entre Minimum y Maximum a 1

int Maximum Es mximo valor que puede el Value del ProgressBar. a int Minimum Es m nimo valor que puede el Value del ProgressBar. ProgressBarStyle Style Especica como se tiene que ver la barra, si como bloques (ver gura 2(a)) o continua (ver gura 2(b))

(a) ProgressBar con propiedad Style establecida ProgressBarStyle.Blocks

la en

(b) ProgressBar con propiedad Style establecida ProgressBarStyle.Continuous

la en

Figura 2: ProgressBar con m nimo 0, mximo 100 y valor 50 , y diferentes estilos. a

2.3.

NumericUpDown

Un NumericUpDown permite elegir un nmero de entre un conjunto pre denido (establecido como un m u nimo, mximo y un incremento) en forma secuencial. Las propiedades Maximum, Minimum y Value tienen la misma semntica a a que en el caso de ProgressBar, siendo Value el valor que actualmente muestra el control. La propiedad restantes interesante es: decimal Increment Determina cuantos nmeros debe avanzar el control a partir del valor de Value cuando u el usuario hace click en las echas hacia arriba y hacia abajo (ver gura 3).

Figura 3: Un NumericUpdown con valor 0

2.4.

ToolStrip

Un ToolStrip les provee de una barra de herramientas, como las de todas las aplicaciones de windows. Cuando la arrastran desde el toolbox hacia el formulario (en el editor del Visual Studio), esta se pega a la parte superior del formulario que la contiene, y est inicialmente vac Al seleccionarla (ver gura 4(a)) aparece el botn que permite a a. o agregar un elemento. Hacerle click hace que se agregue un nuevo botn a la barra. Si se le hace click a la echa de al o lado se puede elegir qu tipo de elemento se quiere insertar (ver gura 4(b)). e

(a) ToolStrip inicial seleccionado

(b) Eligiendo el tipo de elemento a agregar al ToolStrip

Figura 4: ToolStrip en proceso de agregar un elemento . Cada uno de los elementos agregados tiene los atributos, propiedades y eventos t picos que les corresponde. Al seleccionar cada uno de ellos se puede acceder a sus propiedades y eventos, como con cualquier control. En la parte inferior de la ventana del editor se muestra un elemento que representa la instancia del ToolStrip mismo. 2

2.5.

StatusStrip

Un StatusStrip es un elemento que se encuentra en la parte inferior del formulario y que se usa para presentar informacin en l o nea al usuario (la posicin del mouse, ayuda contextual, etc.). La forma de usarlo con el editor del o Visual Studio es la misma que para un ToolStrip, como se puede ver en las guras 5(a) y 5(b).

(a) StatusStrip inicial seleccionado

(b) Eligiendo el tipo de elemento a agregar al StatusStrip

Figura 5: StatusStrip en proceso de agregar un elemento .

2.6.

MenuStrip

MenuStrip provee la capacidad de crear y mostrar elementos de tipo men en las aplicaciones. Al arrastrarlo u sobre el formulario, est inicialmente vac Tras seleccionarlo (ver gura 6(a)) podemos ingresar elementos nuevos. a o. Nuevamente podemos usar la echa al costado del campo Type Here para elegir un tipo particular de elemento a agregar (ver gura 6(b)). Si simplemente se hace click sobre el campo Type Here, se puede escribir el nombre del men y se abre la posibilidad de escribir submenues y otros paralelos (ver gura 6(c)). u

(a) MenuStrip inicial seleccionado

(b) Eligiendo el tipo de elemento a agregar al MenuStrip

(c) Agregando una entrada de texto al MenuStrip

Figura 6: StatusStrip en proceso de agregar un elemento . De nuevo, cada elemento de cada men tiene eventos y propiedades que se pueden establecer a travs del editor u e del Visual Studio. En particular, en el caso de los elemtos de los men importa el evento Click. u

3.

Formularios MDI

Un formulario MDI (Multiple Document Interface) es un formulario capaz de contener (y mostrar al interior de si) otros formularios en su interior1 , como es tan comn en las aplicaiones windows (ver gura 7). u Un formulario al cual se le establece la propiedad IsMdiContainer (ver gura 8) en true pasa a ser un formulario MDI padre (se ve como en la gura 9), capaz de contener otros formularios. Ntese que es el formulario padre el que o tiene una caracter stica especial (IsMdiContainer en true), pero los formularios hijos son diseados como cualquier n otro normal.
1 Es decir, que los formularios hijos ocupan el espacio que normalmente ocupar an otros controles. Un formulario siempre puede contener otros (desde el punto de vista de composin en OOP), pero para que desplieguen al interior de otro formulario el padre tiene que o ser MDI.

Figura 7: Un formulario MDI padre, Form1, con dos instancias de Form2 como hijos .

Figura 8: Propiedad IsMdiContainer. Para asociar una instancia de un formulario normal (lase, no un MDI container) a un formulario MDI, hay que e asignarle a su propiedad MdiParent la instancia del formulario padre. Por ejemplo, para obtener el resultado mostrado en la gura 7, se escribi el cdigo de la gura 10. o o

4.

Cuadros de dialogo de uso frecuente

Muchas veces, la interaccin de nuestros programas con el usuario involucran hacerle alguna pregunta sobre algn o u concepto en particular: qu color desea usar, qu archivo abrir, que hoja usar para imprimir. En el ambiente Windows e e existen una serie de cuadros de dilogo predenidos para estos propsitos. El usarlos nos permite ahorrar cdigo a o o repetitivo y adems nos asegura que nuestra aplicacin se vea en forma consistente con el resto de las aplicaciones del a o sistema. Antes de mencionar los existentes, es necesario entender la idea de cuadro de dilogo. En esencia un formulario es a un cuadro de dilogo si: a Al ser mostrado, no se puede realizar ninguna accin sobre la aplicacin que no involucre al cuadro mismo (se o o dice que el cuadro es modal). Existen cuadros de dialogo no modales, pero no es lo normal. La forma en la que se cierra tiene signicado para la aplicacin. Es decir, el usuario puede por ejemplo, cancelar el cuadro (con lo que normalmente la aplicacin ignora todo la informacin que puede haber sido ingresada en o o ste) o aceptarlo (con lo que se procede a hacer lo que sea que se pretend como abrir un archivo). e a, Todo formulario (clase derivada de Form) puede ser mostrado como un cuadro de dilogo. Para esto, en vez de llamar a a Show sobre el formulario, se llama a ShowDialog. Este mtodo retorna uno de los valores posibles de la enumeracin e o DialogResult (valor determinado por el formulario estableciendo el valor de su propiedad DialogResult) cuando el formulario es cerrado. En esta seccin exploraremos supercialmente algunos de los cuadros de dialogo predenidos por el .NET Frameo work. 4

Figura 9: Un formulario al que se le estableci IsMdiContainer en true. o

public class Form1 { Form2 [] forms = new Form2 [] { new Form2 () , new Form2 () }; public Form1 () { InitializeComponent (); foreach ( Form f in forms ) { f . MdiParent = this ; f . Show (); } } }

Figura 10: Cdigo necesario para generar el resultado de la gura 7. Por supuesto, en este listado se supone que ya se o estableci la propiedad IdMdiContainer en true o

4.1.

OpenFileDialog

Este cuadro de dilogo nos permite obtener del usuario el nombre de un archivo (ver gura 11(a)), pensando en a que ese archivo ser abierto. Algunas propiedades interesantes de este cuadro son: a string Title El t tulo del cuadro. bool CheckFileExists Si es establecida en true, el cuadro no permite que el usuario ingrese el nombre de un archivo que no exista ya. bool CheckPathExists Si es establecida en true, el cuadro no permite que el usuario ingrese el nombre de una ruta que no exista ya. bool MultiSelect Si es establecida en true, el cuadro permite seleccionar ms de un archivo. a string Filter Permite ingresar la lista de tipos de archivos que se pueden elegir, de manera de que el cuadro ltre la lista de archivos posibles. El formato de este string es un poco extrao: n "Nombre tipo archivo|filtro|nombre tipo archivo|filtro|..." Por ejemplo, para permitir seleccionar archivos de imgenes (jpg, bmp y png), archivos de texto y todos los a archivos, podr amos hacer: "Archivos de imagenes|*.bmp;*.jpg;*.png|Archivos de texto|*.txt|Todos los archivos|*.*" Esto generar la lista de ltros que se muestra en la gura 11(b). a

Una vez cerrado el cuadro, es posible recuperar las rutas a los archivos seleccionados usando las propiedades: string FileName Si es que se seleccion un unico archivo. o string[] FileNames Si es que se seleccionaron mltiples archivos. u

(a) Un OpenFileDialog.

(b) Lista de ltros.

Figura 11: OpenFileDialog y la lista de ltros.

4.2.

SaveFileDialog

Un SaveFileDialog es esencialmente lo mismo que un OpenFileDialog (y sus propiedades son muy similares). La diferencia radica en que SaveFileDialog se usa para que el usuario elija un nombre de archivo (y ubicacin) en el o cual se guardar un archivo. Una propiedad interesante de este es a bool OverwritePrompt Si es establecida en true, y el usuario elige un archivo que ya existe, el cuadro automticamente le advierte que el archivo existe y le pide conrmacin de si desea reemplazarlo. a o

4.3.

ColorDialog

Como su nombre lo indica, un ColorDialog es un cuadro de dilogo que permite al usuario seleccionar un color a para utilizar (que signica utilizar depende de la aplicacin particular). Algunas propiedades interesantes: o bool FullOpen Si es establecida en true, el cuadro aparece completamente abierto a penas es mostrado (como en la gura 12). Color Color El color elegido por el usuario. Tambin permite denir el color seleccionado si se dene antes e de abrir el dilogo. a int[] CustomColors Lista de colores personalizados que pueden ser denidos por el usuario. La lista se compone por enteros de 32 bits en el formato ARGB.

Figura 12: ColorDialog abierto completamente.

5.

Layout

Todos los controles que se han mencionado hasta el momento tienen, entre otras propiedades en comn, un tamao u n y una posicin. Visual Studio nos provee de varias funcionalidades que facilitan un manejo preciso de ellas, en particular o el evento OnLayout y los controles TableLayoutPanel y FlowLayoutPanel

5.1.

Evento Layout

El evento Layout es lanzado cuando se agrega o quita un control, al cambiar el tamao del control y en general n cuando ocurra algo que cambie la distribucin de los elementos dentro del control. El EventHandler recibe un objeto o del tipo LayoutEventArgs, el cual tiene las siguientes propiedades: AffectedControl Retorna el control afectado por el cambio. AffectedProperty Retorna la propiedad afectada por el cambio. Es claro que este evento puede resultar util para manejar, por ejemplo, la posicin de los controles al cambiar el o tamao del contenedor, o la distribucin de stos cuando se agrega un control nuevo. n o e

5.2.

TableLayoutPanel

Permite ordenar controles dentro de una tabla, con las y columnas. Cada celda puede tener un control, y se pueden agregar todas las las y columnas que se deseen. La ventaja de TableLayoutPanel es que nos permite mantener ordenado el conjunto de controles, y simplica la tarea de insertar un control entre medio de controles existentes previamente ordenados (ver gura 13). Adems, a TableLayoutPanel permite que los controles que contiene cambien de tamao proporcionalmente con respecto a ellos n o con respecto al contenedor. Otra cosa importante de notar es el hecho que un TableLayoutPanel puede contener a otro TableLayoutPanel, lo que permite crear distribuciones de controles ms complejas. a

Figura 13: Cmo agregar un control a un TableLayoutPanel manipulando las las y columnas o Algunas propiedades: ColumnCount Retorna o setea la cantidad de columnas RowCount Retorna o setea la cantidad de las GrowStyle Indica si el control debe expandirse o no para agregar celdas nuevas, en caso de estar lleno. Por defecto, agrega una la. RowStyle (ColumnStyle) Permite especicar el tamao de la la (columna) segn porcentaje, relativo al n u espacio con otras las o columnas, o por el tamao en pixeles (ver gura 14) n RowSpan (ColumnSpan) Esta propiedad no es de TableLayoutPanel, pero s de los controles a los que contiene. Permite unir dos las (columnas), de tal manera que entre ellas contengan a un mismo control (ver gura 15)

Figura 14: Ventana de edicin de propiedades ColumnRowStyles o

Figura 15: Un Picture Box con RowSpan=1, y despus de setear a RowSpan=2 e

5.3.

FlowLayoutPanel

FlowLayoutPanel mantiene ordenados consistentemente a los controles que contiene, de manera horizontal o vertical. Esto puede ser especialmente util cuando se necesita que los controles se vayan reacomodando a medida que cambia el tamao del contenedor, expandindose o contrayndose. Esto se logra poniendo en true la propiedad Dock n e e in parent container (ver gura 16).

Figura 16: Cmo hacer Dock de un FlowLayoutPanel con respecto a su contenedor. o Revisaremos a continuacin otras de las propiedades ms importantes de FlowLayoutPanel. o a FlowDirection Indica la direccin de posicin que se considerar consecutiva. Puede ser o o a LeftToRight TopDown RightToLeft BottomUp WrapContent Indica si el control debe ajustar su contenido o permitir que se recorte

Figura 17: Un control con FlowLayoutPanel y su efecto al cambiar el tamao del Form que lo contiene. n