Archivo de la etiqueta: xaml

Scroll sincronizado en varios TextBox en WPF

Pues eso… que en el programa que publiqué ayer en mi sitio: Compilar y ejecutar (desde una aplicación) utilizo dos textbox con desplazamiento vertical sincronizado, es decir, cuando me desplazo por uno de los TextBox (sea pulsando en la barra de scroll o con la rueda del ratón o con pulsaciones de teclas) el otro se desplaza también.

Los preliminares

Aquí te voy a mostrar dos ejemplos, el primero como el de la aplicación esa que te he comentado antes (que solo usa dos controles TextBox, uno de ellos sin mostrar las barras de desplazamiento) (ver figura 1) y el otro en el que hay dos TextBox que se sincronizan tanto vertical como horizontalmente y un tercero que solo se sincroniza verticalmente (ver figura 2).

Figura 1. Dos textbox sincronizados con el scroll vertical
Figura 1. Dos textbox sincronizados con el scroll vertical
Figura 3. Tres textbox sincronizados, dos horizontalmente y los tres verticalmente

¿Qué hacer para sincronizar los TextBox?

Lo que necesitamos es detectar que se hace scroll (desplazamiento) en los controles a sincronizar. Yo he usado el objeto ScrollViewer que contiene un TextBox y por tanto se encarga de sincronizar el contenido del TextBox con las barras de desplazamiento.

Debemos añadir un evento que detecte que se ha desplazado la barra de scroll (por no repetir desplazamiento) y esto lo podemos hacer en el diseñador XAML indicando que queremos crear el evento que corresponda, en nuestro caso ScrollChanged.

Para hacerlo, escribimos el nombre del evento y el diseñador de WPF de Visual Studio nos muestra la opción de agregar uno nuevo o usar uno que ya exista (cuando muestra métodos de evento existentes será porque la firma es la misma, es decir, tiene los mismos tipos de argumentos). En la figura 3 puedes ver lo que te estoy comentado.

Figura 3. Indicamos el evento que queremos usar en un control.
Figura 3. Indicamos el evento que queremos usar en un control.

El evento de sincronización, perdón de desplazamiento, cambiado (ScrollChanged) lo tenemos que poner en todos los ScrollViewer que tengamos.

Y para nuestro ejemplo, solo necesitamos un método de evento, en él haremos las comprobaciones correspondientes para saber qué ScrollViewer ha lanzado el evento.

Nota:
Para poder detectar que ha cambiado el desplazamiento (con scroll en las barras) debemos poner el control que queramos (TextBox, ListBox, RichTextBox, etc.) dentro de un ScrollViewer. Ya que esos controles no implementan el evento ScrollChanged.

Si no quieres detectar ese evento, entonces no hace falta que lo pongas dentro de un ScrollViewer.

El código de VB y C# para sincronizar los TextBox

Aquí te muestro el código del evento ScrollChanged que hemos definido en los dos ScrollViewer que tenemos.
Este es el del ejemplo 1 (Figura 1) en el que solo tenemos dos cajas de texto, una para mostrar los números (así ves mejor que las líneas del otro TextBox están sincronizadas).

''' <summary>
''' Sincronizar el scroll vertical del código y las filas
''' </summary>
Private Sub SvFilas_ScrollChanged(sender As Object,
                                  e As ScrollChangedEventArgs)
    If inicializando Then Return

    inicializando = True

    Dim sv = TryCast(sender, ScrollViewer)
    If sv Is svFilas Then
        svCodigo.ScrollToVerticalOffset(e.VerticalOffset)
    Else
        svFilas.ScrollToVerticalOffset(e.VerticalOffset)
    End If

    inicializando = False
End Sub
/// <summary>
/// Sincronizar el scroll vertical del código y las filas
/// </summary>
private void SvFilas_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
    if (inicializando)
        return;

    inicializando = true;

    var sv = sender as ScrollViewer;
    if (sv == svFilas)
        svCodigo.ScrollToVerticalOffset(e.VerticalOffset);
    else
        svFilas.ScrollToVerticalOffset(e.VerticalOffset);

    inicializando = false;
}

Fíjate que tengo una variable llamada inicializando que he declarado a nivel de clase, esta nos servirá para que no se repita en cascada el evento. Yo normalmente la pongo a False cuando el formulario ha terminado de cargarse.

Como puedes comprobar lo que hacemos es cambiar o asignar el valor de la propiedad ScrollToVerticalOffset del otro ScrollViewer.

¡Así es como se sincronizan! Smile

Ajustar el contenido del TextBox con los números de líneas

En el ejemplo que estoy usando una de las cajas de texto muestra el número de línea en el que está actualmente. Esas líneas las tendremos que modificar en consonancia con las líneas que tenga el otro TextBox.

Así que, tendremos que detectar cuándo se cambia el contenido de la caja de textos normal y agregar las líneas a la otra.

Lo primero que tenemos que hacer es añadir un método para detectar que el contenido de la caja de textos txtCodigo ha cambiado y asignar a la otra los números para las líneas.

El evento en cuestión es TextChanged y el código a usar puede ser el que te muestro a continuación.

El código de VB y C# para procesar el evento TextChanged

En el siguiente código contaremos las líneas del TextBox utilizando la propiedad LineCount, la cual indica cuántas líneas tiene el control, al menos si es multilínea, es decir, que tenga más de una línea, eso se consigue con la propiedad TextWrapping con un valor Wrap o WrapWithOverflow, el valor predeterminado es NoWrap, que no vale para este ejemplo.

Nota:
Los TextBox multilínea de WindowsForms tienen una propiedad Lines que devuelve un array de tipo String con el texto del control. cosa que no ocurre con los TextBox de WPF que solo puedes saber el número de líneas que tiene.

''' <summary>
''' Al cambiar el texto del código actualizar el número de líneas
''' </summary>
Private Sub TxtCodigo_TextChanged(sender As Object,
                                  e As TextChangedEventArgs)
    ' Contar las líneas
    Dim lin = txtCodigo.LineCount
    txtFilas.Text = ""
    For i = 1 To lin
        ' Indentar el texto a la derecha
        txtFilas.Text &= i.ToString("0").PadLeft(4) & vbCr
    Next
End Sub
/// <summary>
/// Al cambiar el texto del código actualizar el número de líneas
/// </summary>
private void TxtCodigo_TextChanged(object sender, TextChangedEventArgs e)
{
    // Contar las líneas
    var lin = txtCodigo.LineCount;
    txtFilas.Text = "";
    for (var i = 1; i <= lin; i++)
        // Indentar el texto a la derecha
        txtFilas.Text += i.ToString("0").PadLeft(4) + "\r";
}

El PadLeft es para añadir espacios a la izquierda de forma que tenga la cantidad que indicamos, de esta forma los números se alinean bien. No te lo puedo demostrar con las imágenes que he puesto, ya que ninguna empieza por líneas con menos de 2 cifras Smile with tongue out

El código XAML completo

Aquí tienes todo el código Xaml para que veas cómo están configurados los controles y de paso te sirva para tener una idea (si no la tienes ya) de cómo ajustar los controles al Grid.

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_scroll_dos_textbox_vb"
        mc:Ignorable="d"
        Title="WPF Scroll sincronizado con dos TextBox (VB)" 
        Height="450" Width="800"
        WindowStartupLocation="CenterScreen"
        ResizeMode="CanResizeWithGrip" 
        WindowStyle="ThreeDBorderWindow"
        Loaded="Window_Loaded">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" MinWidth="36"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" MinHeight="24"/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition Height="Auto" MinHeight="24" MaxHeight="40"/>
        </Grid.RowDefinitions>
        <Label x:Name="lblInfo" 
               Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"
               Background="{DynamicResource {x:Static SystemColors.InfoBrushKey}}"
               Margin="4,0" HorizontalContentAlignment="Center"
               Content="Dos TextBox sincronizados verticalmente"/>
        
        <!-- Si no queremos que se vean las barras de desplazamiento
             las ocultamos en el ScrollViewer 
             (aunque estén ocultas siguen funcionando) -->
        <ScrollViewer x:Name="svFilas" 
                      Grid.Column="0" Grid.Row="1" Grid.RowSpan="2" 
                      Focusable="False"
                      HorizontalScrollBarVisibility="Hidden"
                      VerticalScrollBarVisibility="Hidden"
                      ScrollChanged="SvFilas_ScrollChanged">
            
            <!-- Si el TextBox está contenido en un ScrollViewer
                no hace falta indicar en qué columna o fila del Grid está. -->
            <TextBox x:Name="txtFilas" 
                     TextWrapping="Wrap" 
                     FontFamily="Consolas" FontSize="12" 
                     Foreground="DarkCyan"
                     AllowDrop="False" Focusable="False" IsTabStop="False"/>
        </ScrollViewer>
        <ScrollViewer x:Name="svCodigo" 
                      Grid.Column="1" Grid.Row="1" 
                      Grid.ColumnSpan="2" Grid.RowSpan="2"
                      ScrollChanged="SvFilas_ScrollChanged">
            <TextBox x:Name="txtCodigo" 
                     Margin="0,0,2,0" Padding="4,0"
                     TextWrapping="Wrap" 
                     FontFamily="Consolas" FontSize="12" 
                     Text="Aquí irá el texto a mostrar"
                     AcceptsReturn="True" 
                     AcceptsTab="True" 
                     TextChanged="TxtCodigo_TextChanged"/>
        </ScrollViewer>
        <Label x:Name="lblInfo2" 
               Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3"
               Background="{DynamicResource {x:Static SystemColors.InfoBrushKey}}"
               Margin="4,0" HorizontalContentAlignment="Center"
               Content="Mueve el scroll vertical o la rueda del ratón en el texto, el de la izquierda no es visible, pero puedes desplazarte por el contenido."/>
    </Grid>
</Window>

El código de VB y C# ya está casi completo y como lo que yo he añadido es un texto de ejemplo que ocupa mucho, pues… me lo ahorro. Ese código lol asigno en el evento Load (Window_Loaded).

Y esto es todo. Espero que lo sincronices bien Winking smile

Que no, que no me he olvidado del otro ejemplo con tres controles y la sincronización tanto vertical como horizontal. Pero lo dejo para otro post, que este ya está bien cargadito Smile

En el otro post (pondré aquí el enlace) te pondré un ZIP con el código completo tanto para Visual Basic como C# en una solución para Visual Studio 2017 con .NET 4.7.2.

Ahora voy a comer algo y después sigo con el otro post o entrada del blog.
¡Buen provecho!
¡Gracias!

Nos vemos.
Guillermo

Recomendaciones para adaptar los controles (y la fuente) en aplicaciones WPF (2ª parte el código para C#)

Pues eso… lo prometido es deuda… aquí tienes el código para C# de las Recomendaciones para adaptar los controles (y la fuente) en aplicaciones WPF.
También te enseñaré el código XAML modificado o rectificado desde la última vez, es decir, desde que ayer publiqué el original Winking smile

Esta es la ventana de la aplicación en modo diseño (figura 1).

Figura 1. La ventana principal en modo diseño
Figura 1. La ventana principal en modo diseño

Los cambios en el código XAML que he puesto son menores, para que los botones de seleccionar de los paneles superiores no se peguen demasiado a las esquinas de la derecha, para ello he cambiado el valor de Padding del control GroupBox y he reducido el margen (Margin) de la parte izquierda de los botones. También he puesto el ancho de la primera columna del ListView a 220, ya que hay espacio suficiente (la ventana principal tiene asignado un valor mínimo de 830 de ancho.

Por si te sirve de ayuda, sobre todo si has usado padding y margin en los estilos CSS.

Comentarte que los valores de Padding y Margin en Xaml se refieren a las posiciones:
left, top, right, bottom,
a diferencia de las usadas en los estilos CSS, que hacen referencia a:
top right bottom left.
De nada Be right back

Aquí tienes el código XAML (del diseñador de WPF) del panel superior izquierdo, el de la derecha es prácticamente igual.

<GroupBox Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" 
          Header="Unidad 1" Margin="0" Padding="0,0,4,0">
    <Grid DockPanel.Dock="Top" Margin="0" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="4"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Label Content="Directorio:" Grid.ColumnSpan="1" Margin="0,4,0,0" />
        <TextBox Name="txtDir1" Grid.Row="0" Grid.Column="1" 
                 Grid.ColumnSpan="3" Grid.RowSpan="1"
                 Margin="0,6,0,0" KeyDown="txtDir1_KeyDown"
                 TextWrapping="NoWrap" Text="S:\iPhone"/>
        <Button Name="btnSel1" Content=" Seleccionar... " 
                Grid.Column="4" Grid.ColumnSpan="1"
                Margin="4,6,0,0" Click="BtnSel_Click" />
        <ListView Name="lvFics1" Grid.Row="2"
                  Grid.ColumnSpan="5" Grid.RowSpan="1" 
                  Margin="0,8,0,0">
            <ListView.View>
                <GridView >
                    <GridViewColumn Header="Archivo" Width="220"
                                    DisplayMemberBinding="{Binding Nombre}"/>
                    <GridViewColumn Header="Fecha" Width="Auto"
                                    DisplayMemberBinding="{Binding Fecha}"/>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</GroupBox>

El ListView (concretamente cada GridViewColumn) definen un enlace (Binding) a Nombre y Fecha, de esa forma podremos agregar a cada elemento del ListView un objeto definido por nosotros (ItemFic) con esas dos propiedades y se asignarán correctamente a cada una de las columnas del ListView.

Esta es la definición de las clases ItemFic y ItemDir, esta última la usaré para mostrar el nombre del directorio del ListView definido en el panel inferior.

El método llenar es el que se encarga de asignar los elementos a los ListView.

class ItemDir
{
    public string Nombre { get; set; }
}

class ItemFic : ItemDir
{
    public DateTime Fecha { get; set; }
}

/// <summary>
/// Llenar un listview con los ficheros del directorio
/// </summary>
private void llenar(ListView lvFiles, string dir)
{
    lvFiles.Items.Clear();
    var dirI = new sio.DirectoryInfo(dir);
    if (dirI.Exists == false)
        return;

    foreach (var fi in dirI.GetFiles())
    {
        var lvi = new ItemFic() { Nombre = fi.Name, Fecha = fi.LastWriteTime };
        lvFiles.Items.Add(lvi);
    }
}

Nota:
sio es un alias al espacio de nombres System.IO ya que Path también está definido en System.Windows.Shapes y así no tenemos conflictos de nombres, al menos si usas C#, ya que al crear un proyecto WPF se añade esa importación de espacios de nombres.

Cambiar el tamaño de la ventana principal y las letras

Para gestionar el cambio de tamaño de la ventana y las letras de cada control he añadido un par de menús a la aplicación.

Recuerda que para que los tamaños de las letras (FontSize) se hagan medio-automáticamente, tal como lo hago en esta aplicación, deben tener el valor predeterminado de las fuentes, es decir, NO añadas ningún valor a las fuentes de los controles o de los contenedores, si no, no funcionará.

Este es el código XAML de la definición de los menús.

<Menu x:Name="menu" Grid.Row="0" Grid.Column="0" 
      Grid.ColumnSpan="2" 
      Height="24" Margin="0,0,0,4">
    <MenuItem x:Name="mnuCambiarFuente" 
              Header="_Tamaño y Fuente">
        <MenuItem Header="Tamaño _Ventana">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Label Content="Cambiar tamaño" 
                       ToolTip="Puedes usar un valor negativo para reducir" />
                <TextBox x:Name="txtTamañoVentana" Text="0,2" 
                         Grid.Column="1" Width="40"
                         Margin="8,6,0,0"/>
                <Button x:Name="btnAplicar" Content=" Aplicar " 
                        Click="BtnAplicarVentana_Click"
                        Grid.Column="2" Margin="8,6,0,0" />
            </Grid>
        </MenuItem>
        <MenuItem Header="Tamaño _Fuente">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Label Content="Cambiar tamaño" 
                       ToolTip="Puedes usar un valor negativo para reducir" />
                <TextBox x:Name="txtTamañoFuente" Text="1,0" 
                         Grid.Column="1" Width="40"
                         Margin="8,6,0,0"/>
                <Button x:Name="btnAplicarFuente" Content=" Aplicar " 
                        Click="BtnAplicarFuente_Click"
                        Grid.Column="2" Margin="8,6,0,0" />
            </Grid>
        </MenuItem>
    </MenuItem>

 </Menu>

Aquí tienes el código de C# para cambiar el tamaño de las fuentes, se suma o sustrae el valor que indiquemos (si este último es negativo), y en el tamaño de la ventana principal añadimos (o restamos) el porcentaje indicado.

private double meHeight;
private double meWidth;
private double meFontSize;

private void BtnAplicarVentana_Click(object sender, RoutedEventArgs e)
{
    // Para cambiar el tamaño a partir del valor inicial
    if (meHeight == 0)
        meHeight = this.Height;
    if (meWidth == 0)
        meWidth = this.Width;

    double d = 0;
    double.TryParse(txtTamañoVentana.Text, out d);
    this.Height = nuevoTamaño(meHeight, d);
    this.Width = nuevoTamaño(meWidth, d);
}

private void BtnAplicarFuente_Click(object sender, RoutedEventArgs e)
{
    if (meFontSize == 0)
        meFontSize = this.FontSize;
    double d = 0;
    double.TryParse(txtTamañoFuente.Text, out d);
    this.FontSize = meFontSize + d;
}


private double nuevoTamaño(double actual, double incremento)
{
    return actual * incremento + actual;
}

Quitar el botón maximizar de la ventana usando API

Para terminar, te mostraré el código para quitar el botón de maximizar la ventana, ya que WPF no tiene opciones para ocultar ese botón, salvo que cambiemos el tipo de ventana, pero en este caso yo la tengo definida asignando a la propiedad ResizeMode el valor CanResizeWithGrip. Por tanto, puedo maximizar, minimizar, cambiar el tamaño, etc.

Pero siempre queda bien eso de que el usuario no pueda maximizar de golpe, si quiere la ventana más grande, que le cambie el tamaño poco a poco Winking smile

// --------------------------------------------------------------------------
// Código para quitar el botón de maximizar
// Adaptado de la versión de C# publicada en:
// https://stackoverrun.com/es/q/5101958
// 
[DllImport("user32.dll")]
private static extern int GetWindowLong(IntPtr hWnd, int nIndex);

[DllImport("user32.dll")]
private static extern int SetWindowLong(IntPtr hWnd, int nIndex, int dwNewLong);

private const int GWL_STYLE = -16;
private const int WS_MAXIMIZEBOX = 0x10000;

private void Window_SourceInitialized(object sender, EventArgs e)
{
    var hwnd = new WindowInteropHelper((Window)sender).Handle;
    var value = GetWindowLong(hwnd, GWL_STYLE);
    SetWindowLong(hwnd, GWL_STYLE, (int)(value & ~WS_MAXIMIZEBOX));
}

Los eventos, SourceInitialized y otros, están definidos en el código Xaml de la aplicación.

Height="500" Width="850"
MinHeight="460" MinWidth="830"
WindowStartupLocation="CenterScreen"
ResizeMode="CanResizeWithGrip"

SourceInitialized="Window_SourceInitialized"

Loaded="MainWindow_Loaded">

Y esto es todo lo que quería contarte usando los puntos y comas In love

Te recomiendo que te leas lo escrito en la primera parte, ya que aunque el código mostrado es para Visual Basic, las explicaciones, particularmente para el código XAML, te van a servir, seguro Smile

Y para que vayas a la otra página, allí está el enlace para descargar el zip con el código completo, tanto para Visual Basic como para C#.

Nos vemos.
Guillermo

Recomendaciones para adaptar los controles (y la fuente) en aplicaciones WPF

Nota: (02/Ene/2019)
Ya puedes ver la segunda parte de este artículo, principalmente con el código para C# y un par de cambios en el código XAML, así como un consejo sobre la diferencia en los valores de Padding y Margin entre el código XAML y el de las hojas de estilo CSS.
He puesto un ZIP (al final de esta página) con el código completo para Visual Basic y C#.

Pues eso… lo primero, lo primero: ¡FELIZ AÑO NUEVO! 🙂
Aunque esto lo estoy escribiendo el 31 de diciembre de 2018 (17:21), pero lo pondré para que se publique el 1 de enero de 2019… eso si es que me da tiempo a escribirlo entero hoy… guiño

Pero te digo lo que contendrá esto que acabas de empezar a leer: Unas indicaciones sobre cómo añadir los controles para que al cambiar el tamaño del formulario o ventana, éstos se adapten al nuevo tamaño, y de paso, veremos cómo cambiar también el tamaño de las fuentes y comprobaremos que como ocurría en las aplicaciones de Windows Forms (o casi) los controles también se adaptan al nuevo tamaño.

Lo más importante es: NO ASIGNAR FUENTES PERSONALIZADAS a los controles (al menos en el tipo de fuente), no, no te estoy gritando, es que quiero que quede claro, ya que esa ha sido una de mis pesadillas… y después resulta que todo es más fácil si no usaba mis propias fuentes… guiño

La batallita del Guille o los antecedentes

Para que no te lleves a engaños, te voy a explicar cómo yo lo estoy haciendo ahora y sobre todo pensando que siempre (o casi) he programado con los formularios usando WinForm de Visual Studio y con Visual Basic en un 99,99% de las aplicaciones que he empezado a hacer, después las convierto a C#, pero las empiezo con Visual Basic.

Cuando diseño el formulario, suelo poner los controles en sitios específicos, si viene al caso suelo usar controles TabControl y GroupBox y escasamente paneles y casi nunca TableLayoutPanel, que ya me he dado cuenta de que no existe el equivalente en WPF y por tanto, las veces que lo he usado para facilitar el paso de WinForms a WPF, pues… no me ha servido de mucho 🙂

Nota:
El TableLayoutPanel tiene como equivalencia el Grid de los controles de WPF.

Para facilitar la transición de WinForms a WPF/XAML he probado de todo, lo más cercano a lo que quería era usar Canvas y posicionar directamente los controles donde yo los quería, pero esto no vale… ya que lo que siempre he ido buscando es poder adaptar los controles al cambiar el tamaño del formulario.

Lo mejor que he encontrado es el control Grid, que si se tiene cuidado al añadir los controles dentro y se configuran (más o menos) bien las definiciones de filas y columnas (y el nombre de la fuente o lo que es lo mismo la propiedad FontFamily) se pueden conseguir cosas decentemente aceptables. Y eso es lo que te voy a explicar aquí… 🙂

Como verás, te estoy poniendo enlaces a las clases que menciono en la documentación de Microsoft y con referencia a .NET 4.7.2 (espero que tarden en romper los enlaces 🙂 )

Una aplicación WPF de ejemplo (y de paso útil)

El otro día pensé hacer una aplicación para copiar el contenido (las fotos) de los dos móviles que tengo y pensé en complicarme la vida haciendo la aplicación con WPF guiño

No voy a entrar en detalles, pero quise acceder al contenido de los móviles, pero no hubo forma, y eso que busqué cómo hacerlo, pero… no di con la tecla, así que… se me ocurrió crear dos carpetas en un disco externo de 5 TB que tengo y desde ahí copiarlas al portátil. El hacer este paso intermedio es porque yo guardo las fotos en una carpeta del año y dentro de esa carpeta las fotos las guardo según el día y el móvil usado. Por ejemplo, para las fotos hechas hoy día 31 de diciembre crearía una carpeta llamada 12 31 1 iP7 para el iPhone y otra llamada 12 31 2 P2XL para el Pixel 2. El 1 y el 2 es porque cuando voy creando carpetas del mismo día las voy enumerando, ya que cuando tenía la GoPro (R.I.P.) también las añadía a una carpeta. Ahora al hacer la aplicación que automatiza la creación de las carpetas he dejado como fijo el 1 para el iPhone de Apple y el 2 para el Pixel de Google.

El diseño empecé haciéndolo con Grid y creando 2 filas y dos columnas, con idea de en la parte superior izquierda poner un grupo de controles para el iPhone con el directorio donde están las fotos, un botón de seleccionar y un ListView mostrando las fotos a copiar; y en el de la derecha los mismos controles para el Pixel 2. Y en la parte inferior la selección de la fecha desde la que quiero empezar a copiar y el directorio donde almacenarlas, aparte de un ListView mostrando las carpetas creadas y algunas cosillas más, que te mostraré ahora cuando veas el formulario en tiempo de diseño.

El formulario en tiempo de diseño

Figura 1. La ventana en tiempo de diseño con WPF.
Figura 1. La ventana en tiempo de diseño con WPF.

Como puedes ver en la figura 1, están los controles que te he comentado, aparte el botón de Iniciar Copia, y las cajas de texto para indicar el formato de los nombres de los directorios según sean para el iPhone o para el Pixel 2. Además del habitual botón para Salir o cerrar la aplicación, cosas de la costumbre, ya que en realidad no es necesario, pero bueno…

Fíjate también que he añadido un menú llamado Tamaño y Fuente, que nos servirá para hacer las pruebas de cambiar el tamaño de la fuente y del formulario o ventana (me acostumbraré a decir ventana, ya que en WPF es una clase Window y no un Form como en WinForms).

En los tres paneles que hay en esa ventana he usado un control del tipo GroupBox. Cada uno de esos contenedores definen también un Grid. Y los controles están distribuidos en las columnas y filas de cada una de esas rejillas.

Uno de los problemas que me encontré fue que en WPF no existe el equivalente a FolderBrowserDialog de System.Windows.Forms. y se ve que no hay equivalencia, lo más que he encontrado es un control de usuario que hace las veces (o eso dice la página donde lo encontré, pero no he llegado a probarlo). Buscando más por internet, he leído que en el espacio de nombres Microsoft.Win32 existen clases para acceder a los diálogos comunes, al menos al de selección de ficheros, pero tampoco lo he comprobado (acabo de mirarlo y no, no hay para seleccionar directorios), aunque me lo he apuntado para ver cómo funciona y qué es lo que hay, pero eso será tema de otro artículo.

Para poder usar el FolderBrowserDialog debes añadir una referencia a System.Windows.Forms y si es necesario añadir una importación del espacio de nombres, yo he optado por añadir esa importación llamándola frm de esa forma estaré seguro que las clases y demás cosas que define no se mezclan con las clases que se recomiendan usar con las aplicaciones de WPF.

Esta sería la declaración de ese espacio de nombres (por ahora solo en VB ya que aún no tengo convertida la aplicación en C#, pero lo haré guiño)

' Para FolderBrowserDialog y OpenFileDialog
Imports frm = System.Windows.Forms

Y ya que estoy con esto, me vas a permitir que antes de ver todo el tema del diseño te muestre el código para seleccionar el directorio, ya que es interesante, porque como los tres botones Seleccionar hacen lo mismo, solo que interactúan con distintas cajas de texto, pues… ahí tienes un truco, que lo mismo ya lo conoces, pero… guiño

Private Sub BtnSel_Click(sender As Object, e As RoutedEventArgs) Handles _
                                    btnSel1.Click, btnSel2.Click, btnSelDest.Click
    Dim dir = ""
    If sender Is btnSel1 Then
        dir = txtDir1.Text
    ElseIf sender Is btnSel2 Then
        dir = txtDir2.Text
    Else
        dir = txtDirDest.Text
    End If

    Dim desc = If(sender Is btnSel1, " para la unidad 1",
                    If(sender Is btnSel2, " para la unidad 2", "de destino"))

    Dim fb As New frm.FolderBrowserDialog
    With fb
        .Description = "Selecciona el directorio" & desc
        .RootFolder = Environment.SpecialFolder.MyComputer
        .SelectedPath = dir
        .ShowNewFolderButton = False
        If .ShowDialog() = frm.DialogResult.OK Then
            dir = .SelectedPath
            If sender Is btnSel1 Then
                txtDir1.Text = dir
                My.Settings.dir1 = dir
                llenar(lvFics1, dir)
            ElseIf sender Is btnSel2 Then
                txtDir2.Text = dir
                My.Settings.dir2 = dir
                llenar(lvFics2, dir)
            Else
                My.Settings.dir3 = dir
                txtDirDest.Text = dir
            End If
        End If
    End With
End Sub

No te voy a explicar nada más, espero que sea fácil de comprender viendo el código.

Pasemos al tema del diseño.

Las cosas a tener en cuenta al diseñar usando el control Grid

Lo importante es no asignar estas cosas a los controles que pongamos dentro del Grid: FontName, Width ni Height. Dejar el valor predeterminado para HorizontalAlignment y VerticalAlignment que es Stretch. Ni al Grid tampoco.

Con este sencillo consejo conseguirás todo lo que deseas conseguir, ¡seguro! guiño

Seguramente te preguntarás: ¿Cómo posicionar los controles donde queramos?
Pues… usando Grid.Column y Grid.Row para indicar en que cuadrícula estará cada control y si viene al caso (por ejemplo para que la caja de textos o el ListView) ocupen más espacio usaremos Grid.ColumnSpan y Grid.RowSpan.

Además de la propiedad Margin, para que deje un poco de espacio donde lo necesitemos.

Veamos cómo está definido el Grid del panel superior izquierdo.

Este es el código XAML del diseñador de la ventana.

<GroupBox Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" 
          Header="Unidad 1" Margin="0">
    <Grid DockPanel.Dock="Top" Margin="0" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="4"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Label Content="Directorio:" Grid.ColumnSpan="1" Margin="0" />
        <TextBox Name="txtDir1" Grid.Row="0" Grid.Column="1" 
                 Grid.ColumnSpan="3" Grid.RowSpan="1"
                 Margin="0,6,0,0" TextWrapping="NoWrap" Text="S:\iPhone"/>
        <Button Name="btnSel1" Content=" Seleccionar... " 
                Grid.Column="4" Grid.ColumnSpan="1"
                Margin="8,6,0,0" />
        <ListView Name="lvFics1" Grid.Row="2"
                  Grid.ColumnSpan="5" Grid.RowSpan="1" 
                  Margin="0,8,0,0">
            <ListView.View>
                <GridView >
                    <GridViewColumn Header="Archivo" Width="220"
                                    DisplayMemberBinding="{Binding Nombre}"/>
                    <GridViewColumn Header="Fecha" Width="Auto"
                                    DisplayMemberBinding="{Binding Fecha}"/>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>

 </GroupBox>

El GruopBox está contenido en el Grid principal, el valor de Grid.Row = «1» es porque en la fila cero está el menú. Aquí le he puesto Grid.Column = «0» pero realmente no es necesario, ya que si no se indica qué fila o columna ocupa, será siempre cero. Lo mismo ocurre con Grid.ColumnSpan = «1», como mínimo espanea (¿existe ese palabro?) una columna o una fila.

Los controles de este GroupBox están contenidos en un Grid. Yo he definido 5 columnas y 3 filas. El poner 5 columnas, principalmente es para que el TextBox ocupe 3 y el Label de la izquierda y el Button de la derecha ocupen una columna cada uno. El ListView ocupa una fila completa (antes tenía más filas, pero no es necesario). La fila pequeña, con 4 de alto es para dejar un espacio entre los controles de arriba con la lista, pero esto también se podría haber solucionado con los márgenes, pero… bueno… ahí está 🙂

Con los Margin lo que logro es que tanto el botón como el TextBox no se hagan muy altos y se alineen mejor con la etiqueta.

Como puedes comprobar, el único Width (ancho) específico que he puesto es el de la primera columna del ListView. Pero más que nada para que al verlo en tiempo de diseño o al iniciar la aplicación y estando vacío se vea más espacioso, ya que al llenarse, se ajustará al texto que contenga.

En las figuras 2 y 3 tienes la diferencia de asignar Auto al tamaño de la columna (figura 2) y ponerlo como te muestre en este código con 220 de ancho (figura 3). En el panel derecho está en Auto y se ajusta al nombre de la imagen.

Figura 2. El ancho de las columnas del ListView se ajustan automáticamente al contenido.
Figura 2. El ancho de las columnas del ListView se ajustan automáticamente al contenido.
Figura 3. El ancho de la columna izquierda está puesto a 220 y el de la derecha en Auto.
Figura 3. El ancho de la columna izquierda está puesto a 220 y el de la derecha en Auto.

La cuestión es que prefiero darle como mínimo unos 200 o 220 pixeles de ancho guiño

Otro punto a resaltar en ese código es cómo se maneja el contenido del ListView, no voy a entrar en mucho detalle porque ya lo expliqué en mi sitio hace 6 años y 34 días (el 27 de diciembre de 2012) en este artículo: Ejemplo de ListView y equivalencia a subitems, solo decirte que he creado dos clases (dentro de la clase principal) para manejar dicho contenido.

Este es el código de las dos clases (por ahora en VB):

Class ItemDir
    Public Property Nombre As String
End Class

Class ItemFic
    Inherits ItemDir
    Public Property Fecha As Date
End Class

Y estas clases las uso de esta forma a la hora de asignar el contenido de los ListView ligados con los directorios de mas fotos y con el de las carpetas creadas, por eso hay dos clases, una para los directorios y la segunda para los ficheros. El código para mostrar las fotos está en el método llenar.

''' <summary>
''' Llenar un listview con los ficheros del directorio
''' </summary>
Private Sub llenar(lvFiles As ListView, dir As String)
    lvFiles.Items.Clear()
    Dim dirI = New DirectoryInfo(dir)
    If dirI.Exists = False Then Exit Sub

    For Each fi In dirI.GetFiles()
        Dim lvi = New ItemFic With {.Nombre = fi.Name, .Fecha = fi.LastWriteTime}
        lvFiles.Items.Add(lvi)
    Next
End Sub

Como ves, solo se añade el objeto creado a cada elemento del ListView y el Binding, concretamente el DisplayMemberBinding, se encarga del resto.

La parte inferior de la ventana es más de lo mismo. No te la voy a explicar al completo porque ya sería muy pesado, podrás ver el código completo cuando lo publique, aunque no sé si esperaré a que esté el de C# o publicaré primero el de Visual Basic y después el de C#.

Cambiar el tamaño de la ventana principal y las letras

En el menú he puesto dos opciones (ahora te enseño el código XAML) una para poder cambiar el tamaño de la ventana principal y el otro para cambiar el tamaño de las letras.

A dicho menú le he añadido una etiqueta, una caja de textos y un botón (esto también se puede hacer en los menús de WinForms).

Este es el código XAML de la definición del menú principal y los dos submenús:

<Menu x:Name="menu" Grid.Row="0" Grid.Column="0" 
      Grid.ColumnSpan="2" 
      Height="24" Margin="0,0,0,4">
    <MenuItem x:Name="mnuCambiarFuente" 
              Header="_Tamaño y Fuente">
        <MenuItem Header="Tamaño _Ventana">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Label Content="Cambiar tamaño" 
                       ToolTip="Puedes usar un valor negativo para reducir" />
                <TextBox x:Name="txtTamañoVentana" Text="0,2" 
                         Grid.Column="1" Width="40"
                         Margin="8,6,0,0"/>
                <Button x:Name="btnAplicar" Content=" Aplicar " 
                        Click="BtnAplicarVentana_Click"
                        Grid.Column="2" Margin="8,6,0,0" />
            </Grid>
        </MenuItem>
        <MenuItem Header="Tamaño _Fuente">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Label Content="Cambiar tamaño" 
                       ToolTip="Puedes usar un valor negativo para reducir" />
                <TextBox x:Name="txtTamañoFuente" Text="1,0" 
                         Grid.Column="1" Width="40"
                         Margin="8,6,0,0"/>
                <Button x:Name="btnAplicarFuente" Content=" Aplicar " 
                        Click="BtnAplicarFuente_Click"
                        Grid.Column="2" Margin="8,6,0,0" />
            </Grid>
        </MenuItem>
    </MenuItem>
</Menu>

Como ves, hay Grid hasta en la sopa 🙂

El guión bajo en el Header de los menús es para indicar que se resalte esa letra (la que le sigue) al pulsar la tecla Alt, es lo mismo que el ampersand (&) en las aplicaciones de WinForms.

Veamos el código para Visual Basic para cada uno de los botones:

Private meHeight As Double
Private meWidth As Double
Private meFontSize As Double

Private Sub BtnAplicarVentana_Click(sender As Object, e As RoutedEventArgs)
    ' Para cambiar el tamaño a partir del valor inicial
    If meHeight = 0 Then
        meHeight = Me.Height
    End If
    If meWidth = 0 Then
        meWidth = Me.Width
    End If

    Dim d As Double = 0
    Double.TryParse(txtTamañoVentana.Text, d)
    Me.Height = nuevoTamaño(meHeight, d)
    Me.Width = nuevoTamaño(meWidth, d)
End Sub

Private Sub BtnAplicarFuente_Click(sender As Object, e As RoutedEventArgs)
    If meFontSize = 0 Then
        meFontSize = Me.FontSize
    End If
    Dim d As Double = 0
    Double.TryParse(txtTamañoFuente.Text, d)
    Me.FontSize = meFontSize + d
End Sub

Como ves ninguno de los dos métodos de evento tienen la cláusula Handles, esto es porque en el código XAML ya hemos indicado qué método se usará para cada uno de los botones.

En el tamaño de la fuente simplemente añadimos el valor indicado al tamaño que ya tuviera, mientras que el alto y ancho de la ventana usamos un incremento porcentual (o casi).

Este es el código del método nuevoTamaño:

Private Function nuevoTamaño(actual As Double, incremento As Double) As Double
    Return actual * incremento + actual
End Function

En el código hay también unas llamadas al API de Windows para ocultar el botón Maximizar de la ventana, ya que de forma nativa WPF no tiene forma de ocultar ese botón, al menos si la ventana se puede cambiar de tamaño, que es el caso de la que usa este programa, que tiene el valor CanResizeWithGrip asignado a la propiedad ResizeMode.
Aunque como leí en uno de los foros que estuve consultando: ¿Para qué quieres quitar el botón maximizar si tu formulario puede cambiar de tamaño? Y tiene razón, pero… en fin… costumbres heredadas de los formulari0s de Windows Forms guiño

Este es el código para Visual Basic de esas API

'--------------------------------------------------------------------------
' Código para quitar el botón de maximizar
' Adaptado de la versión de C# publicada en:
' https://stackoverrun.com/es/q/5101958
' 
<DllImport("user32.dll")>
Private Shared Function GetWindowLong(ByVal hWnd As IntPtr,
                                      ByVal nIndex As Integer) As Integer
End Function

<DllImport("user32.dll")>
Private Shared Function SetWindowLong(ByVal hWnd As IntPtr, ByVal nIndex As Integer,
                                      ByVal dwNewLong As Integer) As Integer
End Function

Private Const GWL_STYLE As Integer = -16
Private Const WS_MAXIMIZEBOX As Integer = &H10000

Private Sub Window_SourceInitialized(ByVal sender As Object,
                                     ByVal e As EventArgs) Handles Me.SourceInitialized
    Dim hwnd = New WindowInteropHelper(CType(sender, Window)).Handle
    Dim value = GetWindowLong(hwnd, GWL_STYLE)
    SetWindowLong(hwnd, GWL_STYLE, CInt((value And Not WS_MAXIMIZEBOX)))
End Sub
'
'--------------------------------------------------------------------------

Y esto es todo.

Son las 22:55 del lunes 31 de Diciembre de 2018, pero… ya sabes lo pondré en automático para que se publique maña uno de enero de 2019 guiño

Y mañana o pasado pondré el enlace al código completo para Visual Basic y espero que también el de C#.

¡Feliz Año Nuevo!

Nos vemos.
Guillermo


El código completo del ejemplo
(solución para Visual Studio usando .NET 4.7.2)

El ZIP con el código completo (una solución de Visual Studio 2017 con los proyectos de Visual Basic y C#

El zip: Copiar_archivos_de_2_unidades.zip (214 KB)

MD5 Checksum: 2E3B3F34410F37D051DC5AED8FBBCE1A