En este tutorial de programación de C #, me concentraré en los controles avanzados como ComboBoxes, Grids y ListViews y le mostraré la forma en que probablemente los usará. No estoy tocando datos y enlaces hasta un tutorial posterior. Comencemos con un control simple, un ComboBox.
En el corazón de un Combo hay una colección de artículos y la forma más sencilla de completar esto es soltar un combo en la pantalla, seleccionar propiedades (si no puede ver las ventanas de propiedades, haga clic en Ver en el menú superior y luego en Ventana de propiedades), busque elementos y haga clic en los puntos suspensivos botón. Luego puede escribir las cadenas, compilar el programa y arrastrar el combo hacia abajo para ver las opciones.
Ahora pare el programa y agregue algunos números más: cuatro, cinco... hasta diez. Cuando lo ejecute, solo verá 8 porque ese es el valor predeterminado de MaxDropDownItems. Siéntase libre de configurarlo en 20 o 3 y luego ejecutarlo para ver qué hace.
Es molesto que cuando se abre dice comboBox1 y puedes editarlo. Eso no es lo que queremos. Encuentre la propiedad DropDownStyle y cambie DropDown a DropDownList. (¡Es un combo!). Ahora no hay texto y no es editable. Puede seleccionar uno de los números, pero siempre se abre en blanco. ¿Cómo seleccionamos un número para comenzar? Bueno, no es una propiedad que puede establecer en tiempo de diseño, pero agregar esta línea lo hará.
Agregue esa línea en el constructor Form1 (). Debe ver el código del formulario (en el Explorador de soluciones, haga clic con el botón derecho en From1.cs y haga clic en Ver código. Encuentra InitializeComponent (); y agregue esa línea inmediatamente después de esto.
Si configura la propiedad DropDownStyle para el combo en Simple y ejecuta el programa, no obtendrá nada. No seleccionará ni hará clic ni responderá. ¿Por qué? Porque en el momento del diseño debe agarrar la manija inferior y hacer que todo el control sea más alto.
En el ejemplo 2, cambié el nombre de ComboBox a combo, cambié el combo DropDownStyle a DropDown para que pueda editarse y agregué un botón Agregar llamado btnAdd. Hice doble clic en el botón Agregar para crear un evento btnAdd_Click () controlador de eventos y agregué esta línea de evento.
Ahora, cuando ejecute el programa, escriba un nuevo número, diga Once y haga clic en Agregar. El controlador de eventos toma el texto que escribió (en combo. Texto) y lo agrega a la colección de elementos del Combo. Haga clic en el Combo y ahora tenemos una nueva entrada Once. Así es como agrega una nueva cadena a un Combo. Eliminar uno es un poco más complicado ya que debes encontrar el índice de la cadena que deseas eliminar y luego eliminarlo. El método RemoveAt que se muestra a continuación es un método de recopilación para hacer esto. solo tiene que especificar qué elemento en el parámetro Removeindex.
eliminará la cadena en la posición RemoveIndex. Si hay n elementos en el combo, los valores válidos son 0 a n-1. Para 10 artículos, valores 0..9.
Si esto no encuentra el texto, devuelve -1; de lo contrario, devuelve el índice basado en 0 de la cadena en la lista combinada. También hay un método sobrecargado de FindStringExact que le permite especificar desde dónde comenzar la búsqueda, para que pueda omitir el primero, etc. si tiene duplicados. Esto podría ser útil para eliminar duplicados en una lista.
Al hacer clic en btnAddMany_Click () se borra el texto del combo, luego se borra el contenido de la colección de elementos combinados y luego se llama al combo. AddRange (para agregar las cadenas de la matriz de valores. Después de hacer esto, establece el índice seleccionado del combo en 0. Esto muestra el primer elemento en el combo. Si está agregando o eliminando elementos en un ComboBox, entonces es mejor hacer un seguimiento de qué elemento está seleccionado. Establecer SelectedIndex en -1 oculta los elementos seleccionados.
El botón Agregar lotes borra la lista y agrega 10,000 números. He agregado combo. BeginUpdate () y combo, EndUpdate () invoca el ciclo para evitar que Windows parpadee intentando actualizar el control. En mi PC de tres años, solo toma más de un segundo agregar 100,000 números al combo.
Este es un control útil para mostrar datos tabulares sin la complejidad de una cuadrícula. Puede mostrar elementos como iconos grandes o pequeños, como una lista de iconos en una lista vertical o más útil como una lista de elementos y subelementos en una cuadrícula y eso es lo que haremos aquí.
Después de soltar un ListView en un formulario, haga clic en la propiedad de columnas y agregue 4 columnas. Estos serán TownName, X, Y y Pop. Establezca el texto para cada ColumnHeader. Si no puede ver los encabezados en ListView (después de haber agregado los 4), establezca la Propiedad de vista de ListView en Detalles. Si ve el código para este ejemplo, vaya a donde dice el código del Diseñador de formularios de Windows y expanda la región donde ve el código que crea el ListView. Es útil ver cómo funciona el sistema y puede copiar este código y usarlo usted mismo.
Puede establecer el ancho de cada columna manualmente moviendo el cursor sobre el encabezado y arrastrándolo. O puede hacerlo en el código visible después de expandir la región del diseñador de formularios. Deberías ver un código como este:
Para la columna de población, los cambios en el código se reflejan en el diseñador y viceversa. Tenga en cuenta que incluso si establece la propiedad Bloqueada en verdadero, esto solo afecta al diseñador y en tiempo de ejecución puede cambiar el tamaño de las columnas.
ListViews también viene con una serie de propiedades dinámicas. Haga clic en (Propiedades dinámicas) y marque la propiedad que desee. Cuando configura una propiedad para que sea dinámica, crea un archivo .config XML y lo agrega al Explorador de soluciones.
Hacer cambios en el tiempo de diseño es una cosa, pero realmente necesitamos hacerlo cuando el programa se está ejecutando. Un ListView se compone de 0 o más elementos. Cada elemento (un ListViewItem) tiene una propiedad de texto y una colección SubItems. La primera columna muestra el texto del Elemento, la siguiente columna muestra SubItem [0] .text luego SubItem [1] .text y así sucesivamente.
Agregué un botón para agregar una fila y un cuadro de edición para el Nombre de la ciudad. Ingrese cualquier nombre en el cuadro y haga clic en Agregar fila. Esto agrega una nueva fila a ListView con el nombre de la ciudad en la primera columna y las siguientes tres columnas (SubItems [0..2]) se rellenan con números aleatorios (convertidos en cadenas) agregando esas cadenas a ellos.
Ahora establezca la propiedad ListView Multiselect en false. Solo queremos seleccionar un elemento a la vez, aunque si desea eliminar más de una vez, es similar, excepto que debe recorrer en reversa. (Si realiza un bucle en orden normal y elimina elementos, los elementos posteriores no están sincronizados con los índices seleccionados).
El menú de clic derecho todavía no funciona, ya que no tenemos elementos de menú para mostrar en él. Por lo tanto, haga clic con el botón derecho en PopupMenu (debajo del formulario) y verá que aparece el menú contextual en la parte superior del formulario donde aparece el editor de menús normal. Haga clic y donde dice Escriba aquí, escriba Eliminar elemento. La ventana de propiedades mostrará un MenuItem, así que cámbiele el nombre a mniRemove. Haga doble clic en este elemento del menú y debería obtener la función de código del controlador de eventos menuItem1_Click. Agregue este código para que se vea así.
Si pierde de vista el elemento Eliminar, simplemente haga clic en el control PopupMenu por sí solo debajo del formulario en el Diseñador de formularios. Eso lo traerá de vuelta a la vista.
Sin embargo, si lo ejecuta y no agrega un elemento y lo selecciona, cuando hace clic derecho y obtiene el menú y hace clic en Eliminar elemento, dará una excepción porque no hay ningún elemento seleccionado. Esa es una mala programación, así que así es como lo arreglas. Haga doble clic en el evento emergente y agregue esta línea de código.
Un DataGridView es el componente más complejo y más útil proporcionado de forma gratuita con C #. Funciona con ambas fuentes de datos (es decir, datos de una base de datos) y sin ellos (es decir, datos que agrega mediante programación). Para el resto de este tutorial, mostraré cómo usarlo sin orígenes de datos. Para necesidades de visualización más simples, puede encontrar un ListView simple más adecuado.
Si ha utilizado un control DataGrid anterior, este es solo uno de los que usan esteroides: le brinda más tipos de columnas incorporadas, puede trabajar con datos internos y externos, más personalización de la pantalla (y eventos) y brinda más control sobre el manejo de celdas con filas congeladas y columnas
Cuando diseña formularios con datos de cuadrícula, lo más habitual es especificar diferentes tipos de columnas. Es posible que tenga casillas de verificación en una columna, texto de solo lectura o editable en otra y números de cursos. Estos tipos de columna también suelen estar alineados de manera diferente con números generalmente alineados a la derecha para que los puntos decimales se alineen. En el nivel de la columna, puede elegir entre Botón, casilla de verificación, Cuadro combinado, Imagen, Cuadro de texto y Enlaces. Si eso no es suficiente, puede definir sus propios tipos personalizados.
La forma más fácil de agregar columnas es diseñar en el IDE. Como hemos visto antes, esto solo escribe código para usted y cuando lo haya hecho varias veces, puede preferir agregar el código usted mismo. Una vez que haya hecho esto varias veces, le proporcionará información sobre cómo hacerlo mediante programación.
Comencemos agregando algunas columnas, suelte un DataGridView en el formulario y haga clic en la pequeña flecha en la esquina superior derecha. Luego haga clic en Agregar columna. Haz esto tres veces. Aparecerá un cuadro de diálogo Agregar columna donde establecerá el nombre de la columna, el texto que se mostrará en la parte superior de la columna y le permitirá elegir su tipo. La primera columna es YourName y es el TextBox predeterminado (dataGridViewTextBoxColumn). Establezca el Texto del encabezado a su nombre también. Haga que la segunda columna Age y use un ComboBox. La tercera columna está permitida y es una columna CheckBox.
Después de agregar los tres, debería ver una fila de tres columnas con un combo en el medio (Edad) y una casilla de verificación en la columna Permitido. Si hace clic en DataGridView, en el inspector de propiedades debe ubicar las columnas y hacer clic en (colección). Aparece un cuadro de diálogo donde puede establecer propiedades para cada columna, como colores de celda individuales, texto de información sobre herramientas, ancho, ancho mínimo, etc. Si compila y ejecuta, notará que puede cambiar el ancho de columna y el tiempo de ejecución. En el inspector de propiedades del DataGridView principal, puede configurar AllowUser para que resizeColumns sea falso para evitar eso.
Vamos a agregar filas al control DataGridView en el código y ex3.cs en el archivo de ejemplos tiene este código. Comenzando agregando un cuadro TextEdit, un ComboBox y un botón al formulario con DataGridView en él. Establezca la propiedad DataGridView AllowUserto AddRows en falso. También uso etiquetas y llamé al cuadro combinado cbAges, al botón btnAddRow y al TextBox tbName. También agregué un botón Cerrar para el formulario y lo hice doble clic para generar un esqueleto de controlador de eventos btnClose_Click. Agregar la palabra Cerrar () allí hace que funcione.
De manera predeterminada, la propiedad del botón Agregar fila habilitada se establece como falsa al inicio. No queremos agregar ninguna fila a DataGridView a menos que haya texto en el cuadro Name TextEdit y ComboBox. Creé el método CheckAddButton y luego generé un controlador de eventos Leave para el cuadro de edición Text Name haciendo doble clic al lado de la palabra Leave en las Propiedades cuando mostraba los eventos. El cuadro de propiedades muestra esto en la imagen de arriba. De forma predeterminada, el cuadro Propiedades muestra propiedades, pero puede ver los controladores de eventos haciendo clic en el botón del rayo.
En su lugar, podría haber utilizado el evento TextChanged, aunque esto llamará a CheckAddButton () método para cada pulsación de tecla en lugar de cuando el control se deja, es decir, cuando otro control gana atención. En el Combo de edades utilicé el evento TextChanged pero seleccioné el controlador de eventos tbName_Leave en lugar de hacer doble clic para crear un nuevo controlador de eventos.
No todos los eventos son compatibles porque algunos eventos proporcionan parámetros adicionales, pero si puede ver un controlador generado anteriormente, sí, puede usarlo. Es principalmente una cuestión de preferencia, puede tener un controlador de eventos separado para cada control que tenga usar o compartir controladores de eventos (como lo hice) cuando tienen una firma de evento común, es decir, los parámetros son mismo.
Cambié el nombre del componente DataGridView a dGView por brevedad e hice doble clic en AddRow para generar un esqueleto de controlador de eventos. Este código a continuación agrega una nueva fila en blanco, obtiene ese índice de filas (es RowCount-1 como acaba de agregarse y RowCount es 0 basado) y luego accede a esa fila a través de su índice y establece los valores en las celdas de esa fila para las columnas YourName y Años.
Al diseñar un formulario, debe pensar en términos de contenedores y controles y qué grupos de controles deben mantenerse juntos. De todos modos, en las culturas occidentales, la gente lee de arriba a abajo a la derecha, por lo que es más fácil leer de esa manera.
Un contenedor es cualquiera de los controles que pueden contener otros controles. Los que se encuentran en la Caja de herramientas incluyen Panel, FlowLayoutpanel, SplitContainer, TabControl y TableLayoutPanel. Si no puede ver la caja de herramientas, use el menú Ver y lo encontrará. Los contenedores mantienen los controles juntos y si mueve o cambia el tamaño del contenedor afectará el posicionamiento de los controles. Simplemente mueva los controles sobre el contenedor en el Diseñador de formularios y reconocerá que el Contenedor ahora está a cargo.
Un Panel es similar a un GroupBox, pero un GroupBox no puede desplazarse pero puede mostrar un título y tiene un borde por defecto. Los paneles pueden tener bordes, pero por defecto no. Uso GroupBoxes porque se ven mejor y esto es importante porque:
Los paneles también son útiles para agrupar contenedores, por lo que puede tener dos o más GroupBox en un panel.
Aquí va un consejo para trabajar con contenedores. Coloque un contenedor dividido en un formulario. Haga clic en el panel izquierdo y luego en el derecho. Ahora intente y elimine el SplitContainer del formulario. Es difícil hasta que haga clic derecho en uno de los paneles y luego haga clic en Seleccionar SplitContainer1. Una vez que esté todo seleccionado, puede eliminarlo. Otra forma que se aplica a todos los controles y contenedores es pulsa la tecla Esc para seleccionar el padre.
Los contenedores también pueden anidar uno dentro del otro. Simplemente arrastre uno pequeño encima de uno más grande y verá una línea vertical delgada que aparece brevemente para mostrar que uno está ahora dentro del otro. Cuando arrastra el contenedor primario, el secundario se mueve con él. El ejemplo 5 muestra esto. De forma predeterminada, el panel marrón claro no está dentro del contenedor, por lo que cuando hace clic en el botón mover, GroupBox se mueve pero el panel no. Ahora arrastre el panel sobre GroupBox para que quede completamente dentro de Groupbox. Cuando compila y ejecuta esta vez, al hacer clic en el botón Mover se mueven ambos juntos.
Un TableLayoutpanel es un contenedor interesante. Es una estructura de tabla organizada como una cuadrícula 2D de celdas donde cada celda contiene solo un control. No puede tener más de un control en una celda. Puede especificar cómo crece la tabla cuando se agregan más controles o incluso si no crece. Parece modelado en una tabla HTML porque las celdas pueden abarcar columnas o filas. Incluso el comportamiento de anclaje de los controles secundarios en el contenedor depende de la configuración de margen y relleno. Veremos más sobre las anclas en la página siguiente.
En el ejemplo Ex6.cs, comencé con una tabla básica de dos columnas y la especifiqué a través del cuadro de diálogo Estilos de control y fila (seleccione el control y haga clic en el pequeño triángulo apuntando a la derecha ubicado cerca de la esquina superior derecha para ver una lista de tareas y hacer clic en la última) que la columna izquierda es 40% y la columna derecha 60% del anchura. Le permite especificar anchos de columna en términos absolutos de píxeles, en porcentaje o simplemente puede dejar que AutoSize. Una forma más rápida de llegar a este cuadro de diálogo es simplemente hacer clic en la Colección junto a Columnas en la Ventana de propiedades.
Agregué un botón AddRow y dejé la propiedad GrowStyle con su valor AddRows predeterminado. Cuando la tabla se llena, agrega otra fila. Alternativamente, puede establecer sus valores en AddColumns y FixedSize para que no pueda crecer más. En Ex6, cuando hace clic en el botón Agregar controles, llama al método AddLabel () tres veces y AddCheckBox () una vez. Cada método crea una instancia del control y luego llama a tblPanel. Control S. Agregar () Después de agregar el segundo control, el tercer control hace que la tabla crezca. La imagen lo muestra después de hacer clic una vez en el botón Agregar control.
En caso de que se pregunte de dónde provienen los valores predeterminados en los métodos AddCheckbox () y AddLabel () que llamo, el control fue originalmente agregado manualmente a la tabla en el diseñador y luego el código para crearlo e inicializarlo se copió desde este región. Encontrará el código de inicialización en la llamada al método InitializeComponent una vez que haga clic en el + a la izquierda de la Región a continuación:
Puede seleccionar varios controles al mismo tiempo manteniendo presionada la tecla Mayús cuando selecciona el segundo control y los controles posteriores, incluso controles de diferentes tipos. La ventana Propiedades muestra solo las propiedades comunes a ambos, por lo que puede establecerlas en el mismo tamaño, color y campos de texto, etc. Incluso los mismos controladores de eventos pueden asignarse a múltiples controles.
Dependiendo del uso, algunos formularios a menudo terminarán siendo redimensionados por el usuario. Nada parece peor que cambiar el tamaño de una forma y ver que los controles permanecen en la misma posición. Todos los controles tienen anclajes que le permiten "adjuntarlos" a los 4 bordes para que el control se mueva o se estire cuando se mueve un borde adjunto. Esto lleva al siguiente comportamiento cuando un formulario se extiende desde el borde derecho:
Para botones como Cerrar, que tradicionalmente se encuentran en la parte inferior derecha, el comportamiento 3 es lo que se necesita. ListViews y DataGridViews son mejores con 2 si el número de columnas es suficiente para desbordar el formulario y necesita desplazamiento). Los anclajes superior e izquierdo son los predeterminados. La ventana de propiedades incluye un pequeño e ingenioso editor que se parece a la bandera de Inglaterra. Simplemente haga clic en cualquiera de las barras (dos horizontales y dos verticales) para establecer o borrar el ancla apropiada, como se muestra en la imagen de arriba.
Una propiedad que no recibe mucha mención es la propiedad Tag y, sin embargo, puede ser increíblemente útil. En la ventana Propiedades solo puede asignar texto, pero en su código puede tener cualquier valor que descienda del objeto.
He usado Tag para contener un objeto completo y solo mostrar algunas de sus propiedades en ListView. Por ejemplo, es posible que solo desee mostrar un Nombre y número de Cliente en una lista de Resumen de Cliente. Pero haga clic derecho en el cliente seleccionado y luego abra un formulario con todos los detalles del cliente. Esto es fácil si construye la lista de clientes leyendo todos los detalles del cliente en la memoria y asignando una referencia al Objeto de clase de cliente en la Etiqueta. Todos los controles tienen una etiqueta.
Un TabControl es una forma práctica de ahorrar espacio en el formulario al tener varias pestañas. Cada pestaña puede tener un icono o texto y puede seleccionar cualquier pestaña y mostrar sus controles. El TabControl es un contenedor pero solo contiene TabPages. Cada TabPage también es un contenedor al que se le pueden agregar controles normales.
En el ejemplo x7.cs, he creado un panel de página de dos pestañas con la primera pestaña llamada Controles que tiene tres botones y una casilla de verificación. La segunda pestaña está etiquetada como Logs y se usa para mostrar todas las acciones registradas que incluyen hacer clic en un botón o alternar una casilla de verificación. Se llama a un método llamado Log () para registrar cada clic de botón, etc. Agrega la cadena suministrada a un ListBox.
También agregué dos elementos de menú emergente del botón derecho al TabControl de la manera habitual. Primero agregue un ContextMenuStrip al formulario y configúrelo en la propiedad ContextStripMenu del TabControl. Las dos opciones de menú son Agregar nueva página y Eliminar esta página. Sin embargo, he restringido la eliminación de la página para que solo se puedan eliminar las pestañas recién agregadas y no las dos originales.
Esto es fácil, solo crea una nueva página de pestañas, dale un título de texto para la pestaña y luego agrégala a la colección de pestañas del control de pestañas
Eliminar una página es solo cuestión de llamar a TabPages. RemoveAt (), usando las pestañas. SelectedIndex para obtener la pestaña seleccionada actualmente.
En este tutorial hemos visto cómo funcionan algunos de los controles más sofisticados y cómo usarlos. En el siguiente tutorial, continuaré con el tema de la GUI y miraré el hilo de trabajo de fondo y mostraré cómo usarlo.