¡Barra Personalizada y Fondo Animado en WPF .NET!

Introducción

En este tutorial, aprenderás a de algo aburrido a algo visualmente atractivo en solo cinco minutos creando una Barra Personalizada y Fondo Animado en WPF .NET, sin necesidad de utilizar librerías externas. Mejorarás la estética de tu aplicación con una barra personalizada y un fondo animado.

Configuración Inicial del Proyecto WPF

Primero, debes crear un nuevo proyecto WPF en Visual Studio. Una vez creado, el entorno de desarrollo te proporcionará una ventana básica. A partir de aquí, puedes empezar a personalizarla arrastrando elementos desde el cuadro de herramientas o usando la búsqueda para encontrar elementos específicos como imágenes, etiquetas, cuadros de texto y botones.

Diseño y Estructura de la Interfaz

Puedes organizar estos elementos dentro de un StackPanel. A cada elemento le puedes asignar propiedades específicas desde el panel de propiedades. Por ejemplo, para una imagen, puedes asignarle un logo, y para las etiquetas, puedes elegir un color predeterminado.

Ejemplo de estructura básica en XAML:

<StackPanel>
    <Image Source="logo.png"/>
    <Label Content="Username" Foreground="Black"/>
    <TextBox x:Name="txtUsername"/>
    <Label Content="Password" Foreground="Black"/>
    <TextBox x:Name="txtPassword"/>
    <Button Content="Login"/>
</StackPanel>

Eliminación de la Barra de Navegación Predeterminada

Ahora vamos a empezar a crear una barra Personalizada y Fondo Animado en WPF .NET. Para crear una interfaz más limpia, puedes eliminar la barra de navegación predeterminada configurando la propiedad WindowStyle de la ventana a None y ajustando la propiedad ResizeMode a NoResize. Esto eliminará los bordes y controles estándar de la ventana, permitiendo que la aplicación tenga un borde personalizado.

<Window WindowStyle="None" ResizeMode="NoResize">

Creación de una Barra Personalizada

Puedes agregar un Border que actúe como una barra de título personalizada. Sitúa este Border en la parte superior de la ventana usando un Grid con definiciones de fila.

Ejemplo de Grid con barra personalizada:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Border Background="LightBlue" Grid.Row="0"/>
    <StackPanel Grid.Row="1">
        <!-- Contenidos de la ventana -->
    </StackPanel>
</Grid>

Añadiendo Funcionalidad a la Barra

Para que la barra personalizada permita mover y cerrar la ventana, necesitas implementar métodos en el code-behind de C#. Puedes añadir eventos de arrastre para mover la ventana y un botón para cerrarla.

Ejemplo de métodos en C#:

private void DragWindow(object sender, MouseButtonEventArgs e)
{
    this.DragMove();
}

private void CloseWindow(object sender, RoutedEventArgs e)
{
    this.Close();
}

Personalización Visual con Estilos y Animaciones

Para darle un toque único a tu aplicación, puedes aplicar un estilo degradado al fondo de la ventana y crear botones con estilos personalizados que cambien de color al interactuar con ellos.

Ejemplo de estilo degradado en XAML:

<Window.Resources>
    <LinearGradientBrush x:Key="BackgroundBrush" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="Blue" Offset="0.0"/>
        <GradientStop Color="Pink" Offset="1.0"/>
    </LinearGradientBrush>
</Window.Resources>

Ejemplo de estilo para un botón:

<Style x:Key="CloseButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="Red"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="DarkRed"/>
        </Trigger>
    </Style.Triggers>
</Style>

Conclusión

Siguiendo estos pasos, puedes mejorar significativamente la interfaz de usuario de tus aplicaciones WPF en solo unos minutos. Estas técnicas no solo hacen que tu aplicación sea más atractiva visualmente, sino que también mejoran la experiencia del usuario al proporcionar una interfaz limpia y funcional.

Código completo

<Window x:Class="WpfEjemplo.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:WpfEjemplo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" WindowStyle="None" ResizeMode="NoResize">
    <Window.Resources>
        <Storyboard x:Key="GradientAnimation" RepeatBehavior="Forever">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].Color"
                                 Storyboard.TargetName="LoginPanel"
                                 Duration="0:0:4">
                <LinearColorKeyFrame KeyTime="0:0:1" Value="#FF1E90FF"/>
                <LinearColorKeyFrame KeyTime="0:0:2" Value="#FFDB7093"/>
                <LinearColorKeyFrame KeyTime="0:0:3" Value="#FFDB7093"/>
                <LinearColorKeyFrame KeyTime="0:0:4" Value="#FF1E90FF"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].Color"
                                 Storyboard.TargetName="LoginPanel"
                                 Duration="0:0:4">
                <LinearColorKeyFrame KeyTime="0:0:1" Value="#FFDB7093"/>
                <LinearColorKeyFrame KeyTime="0:0:2" Value="#FF1E90FF"/>
                <LinearColorKeyFrame KeyTime="0:0:3" Value="#FF1E90FF"/>
                <LinearColorKeyFrame KeyTime="0:0:4" Value="#FFDB7093"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Style x:Key="CloseButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="#66770010"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                                Padding="{TemplateBinding Padding}">
                            <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      Content="{TemplateBinding Content}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <!-- Cambio de color en el hover -->
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#80770010"/>
                            </Trigger>
                            <!-- Cambio de color cuando el botón es presionado -->
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" Value="#99770010"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="LoginButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="#66007ACC"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="BorderBrush" Value="#66707070"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Padding" Value="5"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                                Padding="{TemplateBinding Padding}">
                            <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      Content="{TemplateBinding Content}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <!-- Cambio de color en el hover -->
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#80707ACC"/>
                            </Trigger>
                            <!-- Cambio de color cuando el botón es presionado -->
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" Value="#99007ACC"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource GradientAnimation}" />
        </EventTrigger>
    </Window.Triggers>
    <Grid x:Name="LoginPanel">
        <Grid.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="#FF1E90FF" Offset="0.0"/>
                <GradientStop Color="#FFDB7093" Offset="1.0"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <!-- Espacio para la barra de título -->
            <RowDefinition Height="*"/>
            <!-- Espacio para el resto del contenido -->
        </Grid.RowDefinitions>
        <Border Background="#1900008B" Height="30" MouseLeftButtonDown="DragWindow" Grid.Row="0">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Content="X" Width="30" Height="30" Click="CloseWindow" Style="{StaticResource CloseButtonStyle}" />
                <!-- Añadir más botones o elementos si es necesario -->
            </StackPanel>
        </Border>
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1">
            <Image Source="/logotipo-de-github.png" Height="100" Margin="10"/>
            <Label Content="User" Foreground="#FF4256C8"/>
            <TextBox Width="200" Padding="3" FontSize="14" Foreground="#FF4256C8" Background="#33FFFFFF" BorderBrush="#66ABADB3"/>
            <Label Content="Password" Foreground="#FF4256C8"/>
            <PasswordBox Width="200" Margin="5" Padding="3" FontSize="14" Foreground="#FF4256C8" Background="#33FFFFFF" BorderBrush="#66ABADB3"/>
            <Button Content="Login" Width="200" Margin="5" Padding="5"  ClickMode="Press" Style="{StaticResource LoginButtonStyle}"/>

        </StackPanel>

    </Grid>
</Window>

Para ver este proceso en acción y obtener más consejos útiles, asegúrate de ver el video completo en YouTube. ¡No te pierdas esta guía visual que te ayudará a llevar tus aplicaciones WPF .NET al siguiente nivel!