Controles fundamentales en WPF para desarrolladores principiantes

Espacios de nombres en XAML

En WPF, los espacios de nombres se definen en los archivos XAML utilizando la sintaxis xmlns. Para mapear clases personalizadas o ensamblados, se usa la sintaxis clr-namespace con el nombre del ensamblado.

Estructura de una aplicación WPF

Una aplicación WPF típica incluye archivos como App.config para configuraciones, App.xaml para definir recursos de la aplicación y el archivo de inicio, y MainWindow.xaml para la interfaz de usuario. Cada archivo XAML requiere al menos dos espacios de nombres predeterminados.

Componentes de la ventana

La clase Window en WPF es un control de contenido que aloja un único elemento principal, como un Grid. Propiedades comunes incluyen ShowInTaskbar para la barra de tareas, WindowStartupLocation para la posición inicial y WindowState para el estado de la ventana. El diseño sin bordes se logra con propiedades como WindowStyle="None" y AllowsTransparency="True".

Eventos importantes de Window son Loaded para la carga inicial, Closing para el cierre y MouseDoubleClick para interacciones de ratón.

Controles básicos

Label y TextBox

El control Label muestra texto estático, mientras que TextBox permite la edición y visualización de contenido. Propiedades como TextWrapping facilitan el ajuste de texto.

PasswordBox

Para capturar contraseñas, se usa PasswordBox con la propiedad PasswordChar. El acceso al valor se realiza mediante la propiedad Password.

Button

Los botones en WPF admiten propiedades como Content para el texto, Background para el color de fondo y BorderThickness para el grosor del borde. La activación por teclado se controla con IsDefault e IsCancel.

RadioButton y CheckBox

RadioButton crea opciones mutuamente exclusivas, agrupadas con GroupName. CheckBox permite selecciones múltiples, con soporte para tres estados mediante IsThreeState.

Ejemplo de código para obtener el contenido de CheckBox seleccionados:

private void ObtenerContenidoMarcado(object sender, RoutedEventArgs e)
{
    var elementosSeleccionados = new List<string>();
    foreach (UIElement child in panelContenedor.Children)
    {
        if (child is CheckBox cb && cb.IsChecked == true)
        {
            elementosSeleccionados.Add(cb.Content.ToString());
        }
    }
    MessageBox.Show(string.Join(", ", elementosSeleccionados));
}

Para agregar CheckBox dinámicamente:

private void CrearCasillasDinamicas(object sender, RoutedEventArgs e)
{
    string[] etiquetas = { "Deporte2", "Canto2", "Baile2" };
    for (int idx = 0; idx < etiquetas.Length; idx++)
    {
        var nuevaCasilla = new CheckBox
        {
            Content = etiquetas[idx],
            Margin = new Thickness(10 + idx * 80, 50, 0, 0)
        };
        panelContenedor.Children.Add(nuevaCasilla);
    }
}

Image

El control Image muestra gráficos con propiedades Stretch para el ajuste. La carga de imágenes puede hacerse mediante rutas relativas o absolutas usando BitmapImage.

Ejemplo de carga de imagen:

private void CargarImagen(object sender, RoutedEventArgs e)
{
    var uriImagen = new Uri("pack://application:,,,/Recursos/imagen.png");
    imagenControl.Source = new BitmapImage(uriImagen);
}

Para imágenes circulares, se puede usar Border con CornerRadius y un ImageBrush.

Border

Border envuelve elementos con bordes personalizados, como color y grosor. Se usa comúnmente para efectos visuales como sombras.

<Border Margin="5" Background="White" CornerRadius="10">
    <Border.Effect>
        <DropShadowEffect Color="Red" BlurRadius="5" Opacity="0.3"/>
    </Border.Effect>
</Border>

ComboBox y ListBox

ComboBox es un control desplegable con propiedades como IsEditable. Los datos se enlazan mediante ItemsSource o DataContext. ListBox permite selección única o múltiple.

Ejemplo de enlace de datos para ComboBox:

private void ConfigurarComboBox(object sender, RoutedEventArgs e)
{
    var datos = new List<ClaseInfo>
    {
        new ClaseInfo { IdClase = 0, NombreClase = "Primero" },
        new ClaseInfo { IdClase = 1, NombreClase = "Segundo" }
    };
    comboCursos.DisplayMemberPath = "NombreClase";
    comboCursos.SelectedValuePath = "IdClase";
    comboCursos.ItemsSource = datos;
}

DatePicker y Calendar

DatePicker permite seleccionar fechas con formatos personalizables. Calendar ofrece una vista de calendario interactivo con modos de visualización.

Slider y ProgressBar

Slider se usa para seleccionar valores en un rango, con propiedades como Minimum y Maximum. ProgressBar muestra el progreso de operaciones.

Canvas

Canvas es un panel de posicionamiento absoluto donde los elemantos se colocan mediante coordenadas. Las propiedades adicionales como Canvas.Left y Canvas.Top controlan la ubicación.

<Canvas ClipToBounds="True">
    <Button Content="Botón" Canvas.Left="50" Canvas.Top="30"/>
</Canvas>

GroupBox y Expander

GroupBox agrupa controles con un título. Expander permite contraer y expandir contenido, con propiedades como IsExpanded y ExpandDirection.

<Expander Header="Opciones" IsExpanded="True">
    <StackPanel>
        <CheckBox Content="Opción 1"/>
        <CheckBox Content="Opción 2"/>
    </StackPanel>
</Expander>

Propiedades de diseño comunes

Propiedades como HorizontalAlignment, VerticalAlignment, Margin y Padding controlan el diseño y espaciado de los elementos en WPF.

Etiquetas: WPF XAML C# controles WPF interfaz gráfica

Publicado el 6-29 18:20