Hola, esta vez les mostraré como crear un formulario de inicio de sesión con apariencia muy elegante y moderna utilizando WPF y C-Sharp. Ya hace tiempo atrás me han estado pidiendo que realice tutoriales con WPF, y ya ha llegado el momento de hacerlo, porqué creo que ya les he enseñado lo suficiente sobre Windows Form. Bueno en resumen, crearemos una ventana con esquinas redondeadas, color de borde y color de fondo gradiente y transparente con una imagen de trasfondo. Tambien crearemos botones circulares y con forma de pastilla, cuadros de texto con estilo subrayado e ícono, y entre otras cosas.
Tutorial
Código
<Window x:Class="WPF_LoginForm.View.LoginView"
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_LoginForm.View"
mc:Ignorable="d"
Title="LoginView" Height="550" Width="800"
WindowStyle="None"
ResizeMode="NoResize"
WindowStartupLocation="CenterScreen"
Background="Transparent"
AllowsTransparency="True"
MouseDown="Window_MouseDown">
<Border CornerRadius="12">
<Border.Background>
<ImageBrush ImageSource="/Images/back-image.jpg"
Stretch="None"/>
</Border.Background>
<Border CornerRadius="10"
BorderThickness="2"
Opacity="0.95">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#462AD8" Offset="0"/>
<GradientStop Color="#DA34AE" Offset="0.75"/>
<GradientStop Color="#8A16C1" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#060531" Offset="0"/>
<GradientStop Color="#1B1448" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="5"/>
</Grid.ColumnDefinitions>
<TextBlock Text="LOG IN"
Foreground="DarkGray"
FontSize="10"
FontFamily="Montserrat"
Grid.Column="0"
VerticalAlignment="Center"
Margin="10,0,0,0"/>
<Button x:Name="btnMinimize"
BorderThickness="0"
Content="-"
Foreground="White"
FontSize="16"
FontFamily="Montserrat"
Cursor="Hand"
Grid.Column="1"
Click="btnMinimize_Click">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="#28AEED"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#278BEF"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Width="18" Height="18"
CornerRadius="9"
Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnClose"
BorderThickness="0"
Content="X"
Foreground="White"
FontSize="12"
FontFamily="Montserrat"
Cursor="Hand"
Grid.Column="2"
Click="btnClose_Click">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="#DA34AE"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#C62DAE"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Width="18" Height="18"
CornerRadius="9"
Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<StackPanel Width="220"
Grid.Row="1"
Orientation="Vertical"
Margin="0,35,0,0">
<Image Source="/Images/Logo.png"
Width="100" Height="100"/>
<TextBlock Text="RJ CODE"
Foreground="White"
FontSize="25"
FontWeight="Medium"
FontFamily="Montserrat"
HorizontalAlignment="Center"/>
<TextBlock Text="Learning to code is useful no matter what your career ambitions are."
Foreground="LightGray"
FontSize="12"
FontWeight="Medium"
FontFamily="Montserrat"
TextWrapping="Wrap"
TextAlignment="Center"
Margin="0,5,0,0"/>
<TextBlock Text="Username"
Foreground="DarkGray"
FontSize="12"
FontWeight="Medium"
FontFamily="Montserrat"
Margin="0,35,0,0"/>
<TextBox x:Name="txtUser"
FontSize="13"
FontWeight="Medium"
FontFamily="Montserrat"
Foreground="White"
CaretBrush="LightGray"
BorderBrush="DarkGray"
BorderThickness="0,0,0,2"
Height="28"
VerticalContentAlignment="Center"
Margin="0,5,0,0"
Padding="20,0,0,0">
<TextBox.Background>
<ImageBrush ImageSource="/Images/user-icon.png"
Stretch="None"
AlignmentX="Left"/>
</TextBox.Background>
</TextBox>
<TextBlock Text="Password"
Foreground="DarkGray"
FontSize="12"
FontWeight="Medium"
FontFamily="Montserrat"
Margin="0,15,0,0"/>
<PasswordBox x:Name="txtPass"
FontSize="13"
FontWeight="Medium"
FontFamily="Montserrat"
Foreground="White"
CaretBrush="LightGray"
BorderBrush="DarkGray"
BorderThickness="0,0,0,2"
Height="28"
VerticalContentAlignment="Center"
Margin="0,5,0,0"
Padding="20,0,0,0">
<PasswordBox.Background>
<ImageBrush ImageSource="/Images/key-icon.png"
Stretch="None"
AlignmentX="Left"/>
</PasswordBox.Background>
</PasswordBox>
<Button x:Name="btnLogin"
BorderThickness="0"
Content="LOG IN"
Foreground="White"
FontSize="12"
FontFamily="Montserrat"
Cursor="Hand"
Margin="0,50,0,0"
Click="btnLogin_Click">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="#462AD8"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#28AEED"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Width="150" Height="40"
CornerRadius="20"
Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center"
Margin="0,15,0,0">
<TextBlock Text="Forgot Password?"
Foreground="DarkGray"
FontSize="12"
FontWeight="Medium"
FontFamily="Montserrat"/>
<TextBlock Text="Reset"
Foreground="White"
FontSize="12"
FontWeight="Medium"
FontFamily="Montserrat"
Cursor="Hand"
Margin="8,0,0,0"/>
</StackPanel>
</StackPanel>
</Grid>
</Border>
</Border>
</Window>