uniovi Diseño es - Departamento de Informática - Iniciodi002.edv.uniovi.es/~benja/cs/presentaciones/8-InterfacesyMenus.pdf · Redefine otros eventos para el manejo de la entrada

Cod. 1728.61Cod. 1728.61PLATAFORMA .NET Y PLATAFORMA .NET Y SERVICIOS WEBSERVICIOS WEB

AnaAna Belén Martínez PrietoBelén Martínez Prietobelenbelen@@lsilsi..unioviuniovi..eses

Cursos de Verano 2002Cursos de Verano 2002UNIVERSIDAD DE OVIEDOUNIVERSIDAD DE OVIEDO

DiseñoDiseño de Interfaces yde Interfaces y MenúsMenús

Dpto. de InformáticaDpto. de InformáticaOOTOOTLabLab -- Laboratorio de Tecnologías de Orientación a ObjetosLaboratorio de Tecnologías de Orientación a Objetos

http://http://wwwwww..ootlabootlab..unioviuniovi.es.es


Diseño de Interfaces y MenúsDiseño de Interfaces y MenúsAna Belén Martínez PrietoAna Belén Martínez Prieto

ContenidosContenidos

IntroducciónIntroducciónAplicaciones con Interfaces Aplicaciones con Interfaces Gráficas de UsuarioGráficas de UsuarioControlesControlesEjemplosEjemplos



ContenidosContenidos

IntroducciónIntroducciónConceptos BásicosConceptos BásicosWindowWindow –– Control Control –– FormFormLa clase ControlLa clase ControlLa claseLa clase FormForm

Aplicaciones con Interfaces Gráficas de UsuarioAplicaciones con Interfaces Gráficas de UsuarioControlesControlesEjemplosEjemplos



Conceptos BásicosConceptos Básicos

Windows Windows Application ProgrammingApplication Programming Interface Interface ((APIAPI))

CC

Windows Windows Forms Forms (parte del (parte del framework framework .NET).NET)C# o C++C# o C++

Microsoft Microsoft Foundation Class Foundation Class ((MFCMFC) ) LibraryLibraryC++C++

InterfazInterfazLenguajeLenguaje

Sistema Operativo WindowsSistema Operativo Windows��No es orientado a objetosNo es orientado a objetos��Elemento fundamental: Elemento fundamental: VentanaVentana



Conceptos Básicos (II)Conceptos Básicos (II)

•• FrameworkFramework ..netnet–– Colección de clases que proporciona la Colección de clases que proporciona la

funcionalidad necesaria para la construcción de funcionalidad necesaria para la construcción de aplicaciones Web, Internet y Windows.aplicaciones Web, Internet y Windows.

•• WindowsWindows FormsForms–– Librería de clases que permite la creación de Librería de clases que permite la creación de

aplicaciones Windows tradicionales.aplicaciones Windows tradicionales.–– Es independiente de los lenguajesEs independiente de los lenguajes

✤✤ No da soporte multimediaNo da soporte multimedia



WindowWindow –– Control Control -- FormFormSystemSystem..ObjectObject

ControlControl

ScrollableControlScrollableControl........

ContainerControlContainerControl

UserControlUserControlFormForm

PanelPanel

ButtonButton

Button Button BaseBase

CheckBoxCheckBox

RadioButtonRadioButton

TextBoxBaseTextBoxBase

RichTextBoxRichTextBox

TextBoxTextBox

......Implementa la funcionalidad Implementa la funcionalidad básica que es requerida por las básica que es requerida por las clases que muestran clases que muestran información al usuario (teclado, información al usuario (teclado, ratón, mensajes de ratón, mensajes de windowswindows))

Gestiona la generación y el Gestiona la generación y el display display de las barras de de las barras de desplazamiento para permitir al desplazamiento para permitir al usuario tener acceso a la usuario tener acceso a la totalidad de la pantallatotalidad de la pantalla

Gestiona la funcionalidad Gestiona la funcionalidad requerida por un control para requerida por un control para actuar como un contenedor actuar como un contenedor de otros controles. de otros controles.

Es empleada para crear Es empleada para crear cualquier clase de ventanas: cualquier clase de ventanas: estándar, cuadros de diálogo, estándar, cuadros de diálogo, MDIMDI



La clase ControlLa clase Control

•• Implementa la funcionalidad básica para las clases que Implementa la funcionalidad básica para las clases que muestran información al usuario.muestran información al usuario.–– Métodos y propiedadesMétodos y propiedades

•• Color,Color, PositionPosition,, SizeSize,, ControlsControls,, CanFocusCanFocus,, ParentParent,, TabStopTabStop,...,...–– Funcionalidad añadidaFuncionalidad añadida

•• ‘‘Docking’Docking’ y ‘y ‘Anchoring’Anchoring’•• Gestión de controles hijos Gestión de controles hijos

–– No implementa el ‘No implementa el ‘paint’paint’•• Representa la clase base para las clases predefinidasRepresenta la clase base para las clases predefinidas

–– Es la clase base indirecta para los controles de usuario Es la clase base indirecta para los controles de usuario ((UserControlUserControl))



La claseLa clase FormForm•• Diferentes tipos de ventanas:Diferentes tipos de ventanas:

– Estándar– Diálogos– MDI

•• Atributos especialesAtributos especiales– MaximizeBox y MinimizeBox– DesktopLocation– AcceptButton y CancelButton– ShowDialog()– Eventos

•• LoadLoad•• ClosedClosed yy ClosingClosing•• ActivatedActivated



La claseLa clase FormForm. Propiedades. Propiedades–– Localización y TamañoLocalización y Tamaño

Igual a Location.Y+Size.HeightIntBottomIgual a Location pero incluye barra tareasPointDesktopLocation

Igual a Rectangle (Location,Size)RectangleBoundsTamaño completo de la formSizeSize

Igual a Size.HeightIntHeightIgual a Size.WidthIntWidth

Relativa a la pantallaPointLocation

Igual a Location.XIntLeftIgual a Location.YIntTop

Rectangle

Int

TipoTipo

Igual a Bounds pero incluye barra tareasDesktopBounds

Igual a Location.X+Size.WidthRight

DescripciónDescripciónPropiedadPropiedadDesktopLocationDesktopLocation.X<.X<LocationLocation.X.X DesktopLocationDesktopLocation.Y<.Y<LocationLocation.Y.Y



La claseLa clase FormForm. Propiedades (II). Propiedades (II)

–– Área Cliente de una Área Cliente de una Form Form excluyeexcluye––Barra de TítuloBarra de Título––BordeBorde––Menú Menú ––Barra de desplazamientoBarra de desplazamiento

–– ClientSizeClientSize ((SizeSize)) proporciona la anchura y proporciona la anchura y altura en altura en pixels pixels del área clientedel área cliente

ClientSizeClientSize



La claseLa clase FormForm. Propiedades (III). Propiedades (III)

•• StartPositionStartPosition..–– AsignaAsigna lala posiciposicióón inicialn inicial de lade la fichaficha enen tiempotiempo dede

ejecuciejecucióónn–– CenterScreenCenterScreen, Manual,, Manual, CenterParentCenterParent,...,...

•• TopMostTopMost..–– Indica siIndica si lala ficha deberficha deberíía ser mostrada comoa ser mostrada como lala ficha mficha máás s

destacadadestacada de lade la aplicaciaplicacióónn•• TopLevelTopLevel..

–– Indica siIndica si la formla form es considerada como una ventanaes considerada como una ventana de de altoalto nivelnivel (MDI).(MDI).



ContenidosContenidosIntroducciónIntroducciónAplicaciones con Interfaces Gráficas de UsuarioAplicaciones con Interfaces Gráficas de Usuario

Creación de VentanasConstrucción de la aplicaciónRequerimientosIncorporación de controles a la VentanaDiálogos

ControlesControlesEjemplosEjemplos



Creación de VentanasCreación de Ventanas

–– FormForm•• Crear una instanciaCrear una instancia•• Llamar el método Llamar el método

–– Show (no modal)Show (no modal)–– ShowDialog (modal)ShowDialog (modal)

•• Usar propiedades y métodosUsar propiedades y métodos

FormForm frmfrm = new Form();= new Form();frmfrm.Text =.Text = ““CaptionCaption””;;frmfrm.Show();.Show();

FormForm frmfrm = new Form();= new Form();frmfrm.Text =.Text = ““CaptionCaption””;;frmfrm..FormBorderStyleFormBorderStyle == FormBorderStyleFormBorderStyle..FixedDialogFixedDialog;;frm.MinimizeBox = false;frm.MinimizeBox = false;frm.MaximizeBox = false;frm.MaximizeBox = false;frmfrm..ShowDialogShowDialog();();



Aplicaciones basadas en IGUAplicaciones basadas en IGU

•• Emplea Emplea SYSTEM.WINDOWS.FORMS.DLLSYSTEM.WINDOWS.FORMS.DLL•• La función Main() es el punto de entradaLa función Main() es el punto de entrada•• El método Run de la clase Application abre la form El método Run de la clase Application abre la form

principal. principal. •• Clase Form definida por el usuario para la ventana Clase Form definida por el usuario para la ventana

principalprincipal–– Redefine OnPaint Redefine OnPaint –– Redefine otros eventos para el manejo de la entradaRedefine otros eventos para el manejo de la entrada

public static void Main()public static void Main(){{FormForm frmfrm = new Form();= new Form();frmfrm.Text =.Text = ““CaptionCaption””;;frmfrm..FormBorderStyleFormBorderStyle == FormBorderStyleFormBorderStyle..FixedDialogFixedDialog;;Frm.MinimizeBox = false;Frm.MinimizeBox = false;frm.MaximizeBox = false;frm.MaximizeBox = false;Application.Run(Application.Run(frmfrm););

}}



Requerimientos de UsuarioRequerimientos de Usuario

•• Para compilar Para compilar –– Compilador C#Compilador C#

•• Para ejecutarPara ejecutar–– RuntimeRuntime .NET (CLR,.NET (CLR, Common Language RuntimeCommon Language Runtime))

•• Microsoft .NETMicrosoft .NET FrameworkFramework SDKSDK•• Microsoft Visual C#Microsoft Visual C#•• Microsoft Visual Studio .NETMicrosoft Visual Studio .NET

- C++- C#-Visual Basic

Herramientas



Incorporando controles a la VentanaIncorporando controles a la Ventana

•• 1.1.-- Crear la instancia del controlCrear la instancia del control•• 2.2.-- Asignar los atributos al control (Text, Asignar los atributos al control (Text,

BackColor,...)BackColor,...)•• 3.3.-- Asignar la localización y dimensiones del Asignar la localización y dimensiones del

controlcontrol•• 4.4.-- Añadir manejadores de eventos para el controlAñadir manejadores de eventos para el control•• 5.5.-- Añadir el control a la colección de controles de Añadir el control a la colección de controles de

la form.la form.PrivatePrivate TextBox txtTextBox txt;;TextBox txtTextBox txt = new= new TextBoxTextBox();();TxtTxt.Text=.Text=““EjemploEjemplo””;;frmfrm.Controls.Add(.Controls.Add(txttxt););



DiálogosDiálogos

•• Un diUn diáálogo es una ventanalogo es una ventana concon una gestiuna gestióónn dedemensajesmensajes especial.especial.

•• Un diUn diáálogologo modalmodal impide las entradasimpide las entradas dede tecladoteclado y y dede ratratóón para todas las ventanas excepton para todas las ventanas excepto lalaventana del diventana del diáálogologo. .

•• En .NET seEn .NET se emplea el memplea el méétodo todo ShowDialogShowDialog()() para para abrir unaabrir una formform como un dicomo un diáálogologo..

•• ShowDialogShowDialog()() devuelve un valor devuelve un valor DialogResultDialogResult que que representa el resultadorepresenta el resultado..

FormForm frmfrm = new Form();= new Form();frmfrm.Text =.Text = ““CaptionCaption””;;frmfrm..FormBorderStyleFormBorderStyle == FormBorderStyleFormBorderStyle..FixedDialogFixedDialog;;frm.MinimizeBox = false;frm.MinimizeBox = false;frm.MaximizeBox = false;frm.MaximizeBox = false;frmfrm..ShowDialogShowDialog();();



Diálogos (II)Diálogos (II)

Devuelve IgnoreIgnoreDevuelve CancelCancel

No devuelve nada. Significa que aún está ejecutándoseNoneDevuelve NoNo

Devuelve AbortAbort

Devuelve OKOKDevuelve RetryRetryDevuelve YesYes

DescripciónDescripciónDialogResultDialogResult

••Valores de RetornoValores de Retorno•• DialogResult DialogResult úúnicamente informanicamente informa dede que botque botóónn haha cerradocerrado la la form, de formaform, de forma queque sese debendeben leerleer los valores desde los controleslos valores desde los controles. .



Diálogos (III)Diálogos (III)

•• MessageBoxMessageBox•• Este diálogo está encapsulado en la claseEste diálogo está encapsulado en la clase

MessageBoxMessageBox y es abierto por su método Show().y es abierto por su método Show().

DialogResult drDialogResult dr == MessagBoxMessagBox.Show(“Introduzca valor:”.Show(“Introduzca valor:”,”Título”,”Título”,,MessageBoxButtonsMessageBoxButtons..OkCancelOkCancel,,MessageBoxIconMessageBoxIcon..HandHand))

ifif ((drdr====DialogResultDialogResult.OK).OK){{

// lo que sea// lo que sea}}

OkCancelOkCancelYesNoCancelYesNoCancelYesNoYesNo......

HandHandStopStopErrorErrorQuestionQuestionExclamationExclamation



ContenidosContenidosIntroducciónIntroducciónAplicaciones con Interfaces Gráficas de UsuarioAplicaciones con Interfaces Gráficas de UsuarioControlesControles

LayoutBotonesControles de Texto (Text Controls)Controles de Lista (List Controls)MenúsBarras de Estados y HerramientasDiálogos ComunesOtros Controles

EjemplosEjemplos



LayoutLayout•• Cambiar la posición y dimensiones de los Cambiar la posición y dimensiones de los

controles en tiempo de ejecucióncontroles en tiempo de ejecución–– Posibilidad: Calcular y moverPosibilidad: Calcular y mover–– ..NET: Anchoring y DockingNET: Anchoring y Docking

•• AnchorAnchor–– Distancia fijada a los bordesDistancia fijada a los bordes

•• DockDock–– Conexión a un bordeConexión a un borde

•• SplitterSplitter



AnchoringAnchoring

•• Cuando unCuando un controlcontrol eses ‘‘ancladoanclado’’ ((‘‘anchoringanchoring’’) ) aa una fichauna ficha (o a(o a otro contenedorotro contenedor),), sisi la formla formes redimensionadaes redimensionada,, elel controlcontrol mantienemantiene laladistancia entre eldistancia entre el control ycontrol y las posiciones las posiciones ancladasancladas..

•• EnEn definitivadefinitiva,, fijafija lala distanciadistancia aa los bordes los bordes del contenedordel contenedor

•• PropiedadPropiedad: Anchor.: Anchor. AnchorStyleValues



DockingDocking•• ConsisteConsiste enen acoplar unacoplar un control con doscontrol con dos bordes bordes

del contenedordel contenedor, de forma, de forma que elque el control secontrol seredimensiona cuando el contenedor es redimensiona cuando el contenedor es redimensionadoredimensionado..

•• PropiedadPropiedad: Dock: Dock

•• Un casoUn caso especialespecial es es DockStyleDockStyle.Fill.Fill.. Acopla elAcopla elcontrol concontrol con todos los bordestodos los bordes. El control. El control llena el llena el áárea cliente del contenedorrea cliente del contenedor..

AnchorStyleValues



SplitterSplitter

•• Permite que el usuario redimensione Permite que el usuario redimensione elementos acopladoselementos acoplados (docked) en(docked) en tiempotiempo dedeejecuciejecucióónn..

•• Para usar unPara usar un SplitterSplitter•• -- Acoplar unAcoplar un control contracontrol contra el bordeel borde dede un un

contenedorcontenedor•• -- Acoplar elAcoplar el Splitter contraSplitter contra el mismo bordeel mismo borde





EjemplosEjemplos



BotonesBotones

ButtonButton

Button Button BaseBase

CheckBoxCheckBox

RadioButtonRadioButton



Botones de comandoBotones de comando

–– LaLa claseclase ButtonButton representa unrepresenta un ‘‘push buttonpush button’’ oobotbotóónn dede comandocomando ((tradicionaltradicional).).

–– Funciones bFunciones báásicassicas sonson implementadasimplementadas en laen laclaseclase control.control.

–– PropiedadPropiedad :: DialogResultDialogResult

Si se asigna esta propiedad a un valor distinto de Si se asigna esta propiedad a un valor distinto de DialogResultDialogResult..NoneNone, , ShowDialogShowDialog() devuelve este () devuelve este valor si se hace valor si se hace clickclick en el botónen el botón



Botones de ChequeoBotones de Chequeo•• Soportan Soportan onon//offoff para opciones que son para opciones que son no exclusivasno exclusivas•• Se aconseja emplear mnemotSe aconseja emplear mnemotéécnicos en las etiquetascnicos en las etiquetas•• CapitalizaciCapitalizacióón de sentencias cuando haya mn de sentencias cuando haya máás de una s de una

palabra. Se aconseja una palabra. Se aconseja una úúnica lnica líínea de textonea de texto•• Si hay un gran nSi hay un gran núúmero de opciones o mero de opciones o ééste varia ste varia

conviene emplear un conviene emplear un listlist box de seleccibox de seleccióón mn múúltipleltiple•• Emplear la apariencia mixta cuando los valores para Emplear la apariencia mixta cuando los valores para

esa propiedad difierenesa propiedad difieren•• Posibles usosPosibles usos

–– Filtrar el contenido de una listaFiltrar el contenido de una lista



Botones de chequeoBotones de chequeo

CheckBox muestra una marca pero sombreadaIndeterminateCheckBox está vacioUncheckedCheckBox muestra una marcaChecked

DescripciónDescripciónCheckStateCheckState

–– PropiedadPropiedad : : Checked y AppearanceChecked y Appearance–– Para quePara que tometome un tercer valorun tercer valor ((indeterminadoindeterminado):):

–– ThreeStateThreeState-->True>True–– CheckStateCheckState ((examinar el estadoexaminar el estado))

Eventos:Eventos:

••CheckedChanged, cambia el valor de CheckedCheckedChanged, cambia el valor de Checked••CheckStatedChanged, cambia el valor de CheckStateCheckStatedChanged, cambia el valor de CheckState



Botones de Opción o de RadioBotones de Opción o de Radio•• Representan una opciRepresentan una opcióón simple dentro de un conjunto n simple dentro de un conjunto

limitado de opciones limitado de opciones mutuamente exclusivasmutuamente exclusivas•• Debe evitar usarse para desencadenar una acciDebe evitar usarse para desencadenar una accióón.n.•• 2>= n2>= núúmero opciones<=7mero opciones<=7•• Se aconseja emplear mnemotSe aconseja emplear mnemotéécnicos en las etiquetas cnicos en las etiquetas

asociadas a los botonesasociadas a los botones•• CapitalizaciCapitalizacióón de sentenciasn de sentencias•• Agrupamiento mediante un Agrupamiento mediante un GroupGroup BoxBox•• Posibles usos:Posibles usos:

–– Representar un conjunto de opciones para una Representar un conjunto de opciones para una propiedadpropiedad



Botones de RadioBotones de Radio

–– SSóólo admite valoreslo admite valores on/off.on/off.

–– PropiedadPropiedad: Checked. : Checked.

–– No hayNo hay propiedad ThreeStatepropiedad ThreeState..



EtiquetasEtiquetas

–– Se utilizan para mostrar información de sólo Se utilizan para mostrar información de sólo lectura (texto o lectura (texto o imágenesimágenes))

–– No pueden recibir el focoNo pueden recibir el foco–– Se emplean para proporcionar texto descriptivo Se emplean para proporcionar texto descriptivo

para otros controles. para otros controles. Incluir :Incluir :–– Propiedad:Propiedad: UseMnemonicUseMnemonic



ToolTipsToolTips

–– Ventana pequeña que muestra información útil cuando el Ventana pequeña que muestra información útil cuando el puntero del ratón está sobre un control concretopuntero del ratón está sobre un control concreto

–– Se debe definir un ToolTip para cada ventana (siempre que Se debe definir un ToolTip para cada ventana (siempre que existan controles distintos de ToolBar y StatusBar ya que existan controles distintos de ToolBar y StatusBar ya que estos tienen sus propios tooltips).estos tienen sus propios tooltips).

–– PropiedadesPropiedades•• AutomaticDelayAutomaticDelay•• InitialDelay, tiempo hasta que aparece el tooltipInitialDelay, tiempo hasta que aparece el tooltip•• ReshowDelayReshowDelay•• AutoPopDelay, tiempo que permanece mostradoAutoPopDelay, tiempo que permanece mostrado

ToolTip tp = new ToolTip();ToolTip tp = new ToolTip();tp.SetToolTip(button1,tp.SetToolTip(button1, ““GuardarGuardar””););Tp.SetToolTip(button2,Tp.SetToolTip(button2,””SalirSalir””););





EjemplosEjemplos



Controles de TextoControles de Texto

TextBoxBaseTextBoxBase

RichTextBoxRichTextBox

TextBoxTextBox

--LinesLines--SelectionStartSelectionStart--SelectionLengthSelectionLength--SelectedTextSelectedText--AcceptsTabAcceptsTab--ModifiedModified--AppendTextAppendText--ClearClear--ClearUndoClearUndo--SelectSelect--SelectAllSelectAll



TextBoxBaseTextBoxBase•• Permiten introducir, mostrar o editar un texto. Algunos de Permiten introducir, mostrar o editar un texto. Algunos de

estos estos texttext fieldsfields combinan campos de introducción de texto combinan campos de introducción de texto con otro tipo de controlescon otro tipo de controles

•• Deben emplearse etiquetas para clarificar el campo de Deben emplearse etiquetas para clarificar el campo de texto. Estas etiquetas seguirán la texto. Estas etiquetas seguirán la capitalización de capitalización de sentenciassentencias y permitirán el y permitirán el empleo de teclas de accesoempleo de teclas de acceso

•• Cuando en el campo de texto se tenga que introducir un Cuando en el campo de texto se tenga que introducir un conjunto restringido de valores hay que validar la entrada conjunto restringido de valores hay que validar la entrada del usuario inmediatamente, ignorando los caracteres del usuario inmediatamente, ignorando los caracteres inapropiados o indicando que el valor es inválidoinapropiados o indicando que el valor es inválido



TextBoxTextBox•• Es un control rectangular donde el usuario introduce o edita Es un control rectangular donde el usuario introduce o edita

textotexto•• Soporta Soporta una o varias líneas de textouna o varias líneas de texto

–– MultilineMultiline-->>TrueTrue

•• Puede emplearse para mostrar Puede emplearse para mostrar texto de sólo lecturatexto de sólo lectura que que no es no es editableeditable pero si pero si seleccionableseleccionable..–– ReadOnlyReadOnly-->>TrueTrue

•• Se puede Se puede limitar el número de caracteres a introducirlimitar el número de caracteres a introducir–– MaxLengthMaxLength-->45>45

•• Se puede soportar la autoSe puede soportar la auto--salida, pero con cuidado porque salida, pero con cuidado porque puede sorprender al usuariopuede sorprender al usuario

•• El formateo afecta a todo el documentoEl formateo afecta a todo el documento



TextBoxTextBox (II)(II)

•• Ofrece algunas otras propiedades interesantesOfrece algunas otras propiedades interesantes::

–– AcceptReturnAcceptReturn.. Indica si al presionar ENTER en un TextBoxmultilínea se crea una nueva línea o bien se activa el botón pordefecto de la form.

–– AcceptTabsAcceptTabs. . Indica si va a funcionar el TAB dentro del TextBox.

–– CharacterCasingCharacterCasing.. Si modifica los caracteres para ponerlos en mayúsculas, minúsculas,...

–– PasswordCharPasswordChar. . Asigna el carácter usado para enmascarar unapassword en un TextBox simple..



RichTextBoxRichTextBox•• Permite al usuario introducir y editar texto proporcionando Permite al usuario introducir y editar texto proporcionando

características más avanzadas para dar formato al características más avanzadas para dar formato al documento que eldocumento que el TextBoxTextBox..–– SelectionFontSelectionFont,, SelectionColorSelectionColor,, SelectionAlignmentSelectionAlignment,, Selection Selection

IndentIndent–– OnSelectionChangeOnSelectionChange

•• El texto puede ser asignado directamente al control o El texto puede ser asignado directamente al control o puede ser cargado desde un fichero de texto o RTF.puede ser cargado desde un fichero de texto o RTF.

•• El formateo del texto puede aplicarse a un carácter o a un El formateo del texto puede aplicarse a un carácter o a un párrafo.párrafo.

•• Propiedades específicas:Propiedades específicas:•• AutoWordSelectionAutoWordSelection. Indica si se permite la selección . Indica si se permite la selección

automática de palabras.automática de palabras.•• DetectUrlsDetectUrls, indica si el, indica si el RichTextBoxRichTextBox formateará formateará

automáticamente una URL cuando se teclee dentro del control.automáticamente una URL cuando se teclee dentro del control.





EjemplosEjemplos



ListasListas•• Es un control que muestra una lista de opciones para el Es un control que muestra una lista de opciones para el

usuario y soporta la usuario y soporta la selecciseleccióón de un n de un íítem o variostem o varios de la de la listalista

•• Apropiado para mostrar un gran nApropiado para mostrar un gran núúmero de opciones mero de opciones que varque varíían en nan en núúmero y contenidomero y contenido

•• Si una opciSi una opcióón no estn no estáá disponible hay que quitarla de la disponible hay que quitarla de la listalista

•• Ordenar adecuadamente las opciones de la listaOrdenar adecuadamente las opciones de la lista



Listas (II)Listas (II)•• No llevan incorporadas sus propias etiquetasNo llevan incorporadas sus propias etiquetas•• Asociar una etiqueta Asociar una etiqueta

–– permite acceso por teclado al controlpermite acceso por teclado al control–– con capitalizacicon capitalizacióón de sentenciasn de sentencias–– que debe aparecer en estado no disponible si el que debe aparecer en estado no disponible si el

listboxlistbox estestáá deshabilitadodeshabilitado•• Se clasifican atendiendo a cSe clasifican atendiendo a cóómo muestran la lista y a mo muestran la lista y a

ccóómo permiten la seleccimo permiten la seleccióónn



Listas SimplesListas Simples

–– ListBoxListBox

–– Combo Combo BoxesBoxes

–– CheckedListBoxesCheckedListBoxes

–– OwnerDrawModeOwnerDrawMode



ListBoxListBox

–– Representa una listaRepresenta una lista de Itemsde Items–– Permite selecciPermite seleccióón n

•• Simple.Simple. SelectedItemSelectedItem ((--1 = no hay1 = no hay ninguno seleccionadoninguno seleccionado))•• MMúúltipleltiple

–– MultiSimpleMultiSimple,, íítemstems nono consecutivosconsecutivos–– MultiExtendedMultiExtended,, rangorango dede íítemstems

–– Tres coleccionesTres colecciones::•• ItemsItems•• SelectedItemsSelectedItems•• SelectedIndicesSelectedIndices

–– EventosEventos•• SelectIndexChangedSelectIndexChanged•• SelectValueChangedSelectValueChanged

–– 3>= n3>= núúmero demero de íítemstems visibles<=8visibles<=8

textBox1textBox1..TextText=(=(StringString))listBox1listBox1..ItemsItems[[listBox1listBox1..SelectedIndexSelectedIndex];];



ComboBoxComboBox

–– ComboBoxComboBox==ListBoxListBox++TextBoxTextBox–– PropiedadesPropiedades yy funcionesfunciones dede ambos tiposambos tipos–– EventosEventos

•• OnTextChangedOnTextChanged -->> recorre recorre íítemstems oo escribeescribe enen el campoel campo dede ediciedicióónn•• OnSelectIndexChangedOnSelectIndexChanged -->> recorre los recorre los íítemstems•• OnSelectionChangeCommittedOnSelectionChangeCommitted -->> cerrarcerrar lala listalista

DropDownListDropDownSimple

DropDownStyleDropDownStyle

NOSISI

EditableEditable

PlegadaPlegadaVisible

ListaLista



CheckedListBoxesCheckedListBoxes

–– Derivado de unDerivado de un ListBoxListBox

–– Cada ítem de la lista es unCada ítem de la lista es unCheckBoxCheckBox..

–– CheckedListBoxCheckedListBox ofrece ofrece métodos y propiedades métodos y propiedades para trabajar con estospara trabajar con estoscheckboxescheckboxes..



OwnerDrawModeOwnerDrawMode

•• UnUn ListBoxListBox puede presentar también otrospuede presentar también otros ítemsítems(no texto)(no texto)

•• Para ello:Para ello:–– Asignar la propiedadAsignar la propiedad DrawModeDrawMode

•• OwnerDrawVariableOwnerDrawVariable ((ítemsítems pueden tener diferentes alturas)pueden tener diferentes alturas)•• OwnerDrawFixedOwnerDrawFixed ((ítemsítems la misma altura)la misma altura)

–– Redefinir los métodosRedefinir los métodos•• OnMeasureItemOnMeasureItem, determina la, determina la aturaatura de losde los ítemsítems•• OnDrawItemOnDrawItem, dibuja un ítem., dibuja un ítem.



Listas ComplejasListas Complejas

–– TreeViewTreeView

–– ListViewListView

–– ImageListImageList



ListViewListView•• Un ListView puede mostrar datos Un ListView puede mostrar datos de de cuatro cuatro

formas:formas:–– ListList–– SmallSmall–– IconsIcons–– DetailsDetails

•• Cada Cada íítem muestra un ttem muestra un tíítulo tulo y y una imagenuna imagen..•• La La clase ListView utiliza clase ListView utiliza la la clase ListViewItem para clase ListViewItem para

almacenar los valores almacenar los valores de de los los íítems y colecciones:tems y colecciones:– ListView.ListViewItemCollection – ListView.SelectedIndexCollection – ListView.SelectedListViewItemCollection– ListView.CheckedIndexCollection– ListView.CheckedListViewItemCollection– ListView.ColubmnHeaderCollection



TreeViewTreeView

–– Muestra una lista jerMuestra una lista jeráárquica rquica de de íítems tems o o nodosnodos..–– Cada nodo incluyeCada nodo incluye

•• Un tUn tíítulotulo•• Una imagen Una imagen ((opcionalopcional))•• Si tiene Si tiene subsub--nodos nodos se se puedenpueden

expandir expandir o o esconder esconder (collapse).(collapse).–– Los Los valores valores de de un TreeView un TreeView son son

almacenadosalmacenados en en objetosobjetosTreeNodeTreeNode. .



ImageListImageList

–– Es Es un contenedor para imun contenedor para imáágenesgenes..–– Componente Componente invisible invisible que almacena imque almacena imáágenes genes

para otros controlespara otros controles–– Hay Hay que incorporar las imque incorporar las imáágenes genes a la a la lista lista y y

asignar posteriormenteasignar posteriormente a a los los íítems el tems el ííndice ndice de de la la imagen que les correspondeimagen que les corresponde..





EjemplosEjemplos



MenusMenus

•• Se constituyen mediante una jerarquía de Se constituyen mediante una jerarquía de clases:clases:–– Clase base abstracta Clase base abstracta MenuMenu–– Clase MenuItem para ítems simplesClase MenuItem para ítems simples–– Clase MainMenu para los menús principalesClase MainMenu para los menús principales–– Clase ContextMenu para los menús Clase ContextMenu para los menús

contextualescontextuales



MenuItemMenuItem

–– La La claseclase MenuItemMenuItem eses la la claseclase mmááss relevanterelevante..–– ActActúúaa comocomo unun elementoelemento de de menmenúú simple, simple, aunqueaunque

puedepuede contenercontener subsubíítemstems ((representadosrepresentados porporMenuItemsMenuItems). ).

–– EventosEventos•• OnclickOnclick•• Popup, Popup, permite hacer tareas permite hacer tareas antes de antes de que el menque el menúú sea sea

mostradomostrado. . •• Select, Select, permite hacer tareas mientras el usuario coloca el permite hacer tareas mientras el usuario coloca el

cursor cursor sobre un MenuItemsobre un MenuItem. .



MenuItemMenuItem (II)(II)

Combinación de teclas de acceso rápido asociadaShortCutSi muestra o no los ShortCutShowShortCutIndica si muestra un radio botón en vez de una marca de chequeo

RadioCheck

Indica el nemotécnico asociado con esteMnemonic

Indica si mostrará la lista de las ventanas hijas en el caso de una aplicación MDI.

MdiList

Indica si está activoEnabledAparece √CheckedDescripciónDescripciónValorValor



MenusMenus -- ContextMenuContextMenu

–– La La clase ContexMenu representa los menclase ContexMenu representa los menúús que aparecen cuando s que aparecen cuando el usuario pulsa el botel usuario pulsa el botóón derecho del ratn derecho del ratóón sobre un n sobre un control.control.

–– Controles tienen una propiedad ContextMenu Controles tienen una propiedad ContextMenu a la a la que que se se puede puede asociar esta clase asociar esta clase de de menmenúúss..

–– EventosEventos::•• ContextMenuChangedContextMenuChanged, , si si la la propiedad ContextMenu estpropiedad ContextMenu estáá asignadaasignada•• MenuStartMenuStart, , cuando cuando se se hace hace click click sobre un elemento sobre un elemento de de menmenúú..•• MenuCompleteMenuComplete, se genera , se genera cuando todos los mencuando todos los menúús ests estáán cerradosn cerrados





EjemplosEjemplos



Barras de Estados y de HerramientasBarras de Estados y de Herramientas• Cuando el usuario interacciona con controles que reflejan propiedades

en una barra de herramientas o barra de estados cualquier cambio es directamente aplicado a la selección actual (sin confirmación), excepto si el control requiere una entrada adicional del usuario

• Los controles que aparecen en una barra de herramientas o de estados y no llevan etiqueta deben proporcionar tooltips

• Las barras de herramientas y de estados deben ser configurables para dar mayor flexibilidad al usuario

– visualizarlas y ocultarlas– ordenar y organizar los elementos



Barras de EstadosBarras de Estados

–– UnaUna barrabarra de de estados estados ((StatusBarStatusBar) ) puedepuede serser divididadivididaen en partespartes parapara mostrarmostrar mmááss de de unun tipotipo de de informaciinformacióónn. .

–– El framework .NET El framework .NET ofrece el ofrece el control control StatusBar para StatusBar para la la barra barra de de estados estados y y el el control control StatusBarPanel para los StatusBarPanel para los paneles individualespaneles individuales. .

•• PanelsPanels–– SizeSize–– AlignmentAlignment–– TextText

•• ShowPanelsShowPanels-->True>True



Barras de HerramientasBarras de Herramientas

•• 2 classes: ToolBar + ToolBarButton2 classes: ToolBar + ToolBarButton•• Botones con diferentes estilosBotones con diferentes estilos

–– Soporta menús DropdownSoporta menús Dropdown–– Soporta botones de conmutación (toggle)Soporta botones de conmutación (toggle)

•• EventosEventos–– ButtonClick + ButtonClick + ButtonDropDownButtonDropDown



Barras de Herramientas (II)Barras de Herramientas (II)

•• Cada botCada botóón puede tener su propia apariencian puede tener su propia apariencia..

•• LasLas imimáágenesgenes son son almacenadasalmacenadas en en unun ImageList ImageList •• Para asignar un tooltip para un botPara asignar un tooltip para un botóónn::

•• ShowToolTips ShowToolTips --> true> true•• ToolTipTextToolTipText--> > escribir el textoescribir el texto

Separación entre botonesSeparatorBotón de conmutaciónToggleButton

Botón tradicionalPushButton

Botón que muestra un menú u otra ventana al presionarlo

DropDownButton

DescripciónDescripciónValorValor



Barras de Herramientas (III)Barras de Herramientas (III)

•• Si el estilo es DropDownButtonSi el estilo es DropDownButton•• Asignar Asignar la la propiedad DropDownMenupropiedad DropDownMenu•• Asignar Asignar la la propiedad DropDownArrowspropiedad DropDownArrows

•• Al Al hacer hacer click en click en un botun botóón n se genera se genera un evento un evento ButtonClick pero es un evento ButtonClick pero es un evento de la de la barrabarra..

•• El El evento ButtonDropDown evento ButtonDropDown se produce se produce cuando cuando se se presiona presiona la la flechaflecha..





EjemplosEjemplos



Diálogos ComunesDiálogos Comunes

–– WindowsWindows ofrece algunos diofrece algunos diáálogos comuneslogos comunes..–– El framework .NET encapsulaEl framework .NET encapsula esta funcionalidadesta funcionalidad enen algunas clasesalgunas clases. . –– En la baseEn la base estestáá lala clase abstracta CommonDialogclase abstracta CommonDialog..

Permite seleccionar márgenes y orientación de la páginaPageSetupDialogSelección de la impresora y la parte del documento a imprimir

PrintDialog

Selección de un fichero. Base para OpenFileDialog ySaveFileDialog

FileDialog

Muestra la lista de fuentes instalados en el sistemaFontDialogMuestra la lista de colores posiblesColorDialog

DescripciónDescripciónClaseClase



Diálogos ComunesDiálogos Comunes

–– SeSe muestranmuestran concon el mel méétodo ShowDialogtodo ShowDialog().().–– OpenFileDialogOpenFileDialog

•• MMéétodo OpenFiletodo OpenFile,, abre el fichero seleccionado por el abre el fichero seleccionado por el usuariousuario ((LecturaLectura))

–– FontDialog FontDialog •• GeneraGenera el eventoel evento ApplyApply cuandocuando alal presionar el botpresionar el botóónn

Apply. SeApply. Se puede utilizar para unpuede utilizar para un preview con lapreview con la letra letra seleccionadaseleccionada..





EjemplosEjemplos



TabcontrolsTabcontrols yy TabPagesTabPages

–– Permite definir mPermite definir múúltiples pltiples pááginas (ginas (TabPagesTabPages) ) para una misma ventana para una misma ventana o o cuadro cuadro de de didiáálogo.logo.

–– Cada pCada páágina contiene un grupo gina contiene un grupo de de controles controles que que la la aplicaciaplicacióón muestra cuando el usuario n muestra cuando el usuario selecciona selecciona la la pestapestaññaa correspondientecorrespondiente. .



TabcontrolsTabcontrols yy TabPagesTabPages (II)(II)•• Las etiquetas delLas etiquetas del TabTab pueden incluir texto, pueden incluir texto,

informaciinformacióón grn grááfica o ambasfica o ambas•• Si lleva texto: capitalizaciSi lleva texto: capitalizacióón de sentenciasn de sentencias

•• Si lleva sSi lleva sóólo grlo grááfico: emplearfico: emplear tooltipstooltips

•• Un controlUn control TabTab (por defecto) s(por defecto) sóólo muestra una fila lo muestra una fila dede tabstabs y aunque permite my aunque permite múúltiples filas hay que ltiples filas hay que evitarlo porque hace mevitarlo porque hace máás difs difíícil acceder a uncil acceder a un tabtabparticular.particular.

•• Se puede colocar el foco sobre un control Se puede colocar el foco sobre un control particular de la pparticular de la páágina, pero si no hay un control gina, pero si no hay un control apropiado se puede dejar en el propioapropiado se puede dejar en el propio tabtab



OtrosOtros Contoles Contoles

–– PictureBoxPictureBox: : •• RepresentaRepresenta unun control control queque permitepermite visualizarvisualizar unauna

imagenimagen (bitmap, icon, JPEG, GIF,...)(bitmap, icon, JPEG, GIF,...)

–– Timer:Timer:•• Implementa un temporizador que Implementa un temporizador que genera genera un evento un evento

para intervalospara intervalos de de tiempo definidos por el usuariotiempo definidos por el usuario..•• Debe ser empleado Debe ser empleado en en una ventanauna ventana. .



OtrosOtros ContolesContoles (II)(II)

–– ScrollBarScrollBar: : •• Implementa Implementa la la funcionalidad bfuncionalidad báásica sica de de una barra una barra de de

desplazamientodesplazamiento. . –– ValueValue–– Minimum (0), Maximum(100)Minimum (0), Maximum(100)–– SmallChangeSmallChange(1), (1), LargeChangeLargeChange(10)(10)

–– TrackBarTrackBar::•• Es similar al Es similar al ScrollBar pero tiene una interfaz ScrollBar pero tiene una interfaz de de usuario usuario

diferentediferente. .



OtrosOtros ContolesContoles (III)(III)

–– NumericUpDownNumericUpDown::•• RepresentaRepresenta unun control control queque muestramuestra valoresvalores numnumééricosricos. .

–– ValueValue–– Minimum y MaximumMinimum y Maximum–– IncrementIncrement–– Eventos: ValueChangedEventos: ValueChanged

–– DomainUpDown:DomainUpDown:–– Igual al anterior pero con StringsIgual al anterior pero con Strings

–– ProgressBarProgressBar::•• Representa una barra Representa una barra de de progresoprogreso



OtrosOtros ContolesContoles (IV)(IV)

–– LinkLabelLinkLabel::•• Control Control que puede mostrar hiperenlacesque puede mostrar hiperenlaces

–– MonthCalendarMonthCalendar: : •• Control Control que que encapsula encapsula el calendario por meses el calendario por meses de de

Windows.Windows.

–– DateTimePickerDateTimePicker::•• Control Control que permite seleccionar que permite seleccionar la la fecha fecha y y horahora



EjemplosEjemplos

Documents

uniovi Diseño es - Departamento de Informática - Iniciodi002.edv.uniovi.es/~benja/cs/presentaciones/8-InterfacesyMenus.pdf · Redefine otros eventos para el manejo de la entrada