{"id":22,"date":"2024-04-25T04:13:48","date_gmt":"2024-04-25T04:13:48","guid":{"rendered":"https:\/\/jlmota.net\/?p=22"},"modified":"2024-04-25T04:21:42","modified_gmt":"2024-04-25T04:21:42","slug":"formulario-de-inicio-con-wpf","status":"publish","type":"post","link":"https:\/\/jlmota.net\/index.php\/2024\/04\/25\/formulario-de-inicio-con-wpf\/","title":{"rendered":"Formulario de Inicio con WPF"},"content":{"rendered":"\n

Windows Presentation Foundation<\/strong> (WPF<\/strong>) es una tecnolog\u00eda de Microsoft, presentada como parte de Windows Vista. Permite el desarrollo de interfaces de interacci\u00f3n en Windows tomando caracter\u00edsticas de aplicaciones Windows y de aplicaciones web.<\/p>\n\n\n\n

WPF ofrece una amplia infraestructura y potencia gr\u00e1fica con la que es posible desarrollar aplicaciones visualmente atractivas, con facilidades de interacci\u00f3n que incluyen animaci\u00f3n, v\u00eddeo, audio, documentos, navegaci\u00f3n o gr\u00e1ficos 3D. Separa, con el lenguaje declarativo XAML y los lenguajes de programaci\u00f3n de .NET, la interfaz de interacci\u00f3n de la l\u00f3gica del negocio, propiciando una arquitectura Modelo Vista Controlador para el desarrollo de las aplicaciones.<\/p>\n\n\n\n\n\n\n\n

    \n
  1. Crear un proyecto nuevo con WPF y C#. Y estructurar las carpetas del proyecto de la siguiente manera.<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    2. En la carpeta View, crear una nueva pagina WPF llamada LoginView.xaml<\/strong> <\/p>\n\n\n\n

    3. Agregar el siguiente c\u00f3digo :<\/p>\n\n\n

    \n<Window x:Class="WPF_LoginForm.View.LoginView"\n        xmlns="http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation"\n        xmlns:x="http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml"\n        xmlns:d="http:\/\/schemas.microsoft.com\/expression\/blend\/2008"\n        xmlns:mc="http:\/\/schemas.openxmlformats.org\/markup-compatibility\/2006"\n        xmlns:local="clr-namespace:WPF_LoginForm.View"\n        mc:Ignorable="d"\n        Title="LoginView" Height="550" Width="800"\n        WindowStyle="None"\n        ResizeMode="NoResize"\n        WindowStartupLocation="CenterScreen"\n        Background="Transparent"\n        AllowsTransparency="True"\n        MouseDown="Window_MouseDown">\n\n    <Border CornerRadius="12">\n        <Border.Background>\n            <ImageBrush ImageSource="\/Images\/ITL.jpeg"\n                        Stretch="Fill"\/>\n        <\/Border.Background>\n\n        <Border CornerRadius="10"                    \n            BorderThickness="2"\n            Opacity="0.95">\n\n            <Border.BorderBrush>\n                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">\n                    <GradientStop Color="#462AD8" Offset="0"\/>\n                    <GradientStop Color="#DA34AE" Offset="0.75"\/>\n                    <GradientStop Color="#8A16C1" Offset="1"\/>\n                <\/LinearGradientBrush>\n            <\/Border.BorderBrush>\n\n            <Border.Background>\n                <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">\n                    <GradientStop Color="#060531" Offset="0"\/>\n                    <GradientStop Color="#1B1448" Offset="1"\/>\n                <\/LinearGradientBrush>\n            <\/Border.Background>\n\n            <Grid>\n                <Grid.RowDefinitions>\n                    <RowDefinition Height="30"\/>\n                    <RowDefinition\/>\n                <\/Grid.RowDefinitions>\n\n                <Grid Grid.Row="0">\n\n                    <Grid.ColumnDefinitions>\n                        <ColumnDefinition\/>\n                        <ColumnDefinition Width="25"\/>\n                        <ColumnDefinition Width="25"\/>\n                        <ColumnDefinition Width="5"\/>\n                    <\/Grid.ColumnDefinitions>\n\n                    <TextBlock Text="Acceso"\n                               Foreground="DarkGray"\n                               FontSize="10"\n                               FontFamily="Montserrat"\n                               Grid.Column="0"\n                               VerticalAlignment="Center"\n                               Margin="10,0,0,0"\/>\n\n                    <Button x:Name="btnMinimize"                           \n                            BorderThickness="0"\n                            Content="-"\n                            Foreground="White"\n                            FontSize="16"\n                            FontFamily="Montserrat"\n                            Cursor="Hand"\n                            Grid.Column="1"\n                            Click="btnMinimize_Click">\n\n                        <Button.Style>\n                            <Style TargetType="Button">\n                                <Setter Property="Background" Value="#28AEED"\/>\n                                <Style.Triggers>\n                                    <Trigger Property="IsMouseOver" Value="True">\n                                        <Setter Property="Background" Value="#278BEF"\/>\n                                    <\/Trigger>\n                                <\/Style.Triggers>\n                            <\/Style>\n                        <\/Button.Style>\n\n                        <Button.Template>\n                            <ControlTemplate TargetType="Button">\n                                <Border Width="18" Height="18"\n                                        CornerRadius="9"\n                                        Background="{TemplateBinding Background}">\n                                    <ContentPresenter VerticalAlignment="Center"\n                                                      HorizontalAlignment="Center"\/>\n                                <\/Border>\n                            <\/ControlTemplate>\n                        <\/Button.Template>\n\n                    <\/Button>\n\n                    <Button x:Name="btnClose"                          \n                            BorderThickness="0"\n                            Content="X"\n                            Foreground="White"\n                            FontSize="12"\n                            FontFamily="Montserrat"\n                            Cursor="Hand"\n                            Grid.Column="2"\n                            Click="btnClose_Click">\n\n                        <Button.Style>\n                            <Style TargetType="Button">\n                                <Setter Property="Background" Value="#DA34AE"\/>\n                                <Style.Triggers>\n                                    <Trigger Property="IsMouseOver" Value="True">\n                                        <Setter Property="Background" Value="#C62DAE"\/>\n                                    <\/Trigger>\n                                <\/Style.Triggers>\n                            <\/Style>\n                        <\/Button.Style>\n\n                        <Button.Template>\n                            <ControlTemplate TargetType="Button">\n                                <Border Width="18" Height="18"\n                                        CornerRadius="9"\n                                        Background="{TemplateBinding Background}">\n                                    <ContentPresenter VerticalAlignment="Center"\n                                                      HorizontalAlignment="Center"\/>\n                                <\/Border>\n                            <\/ControlTemplate>\n                        <\/Button.Template>\n                    <\/Button>\n                <\/Grid>\n\n                <StackPanel Width="220"\n                            Grid.Row="1"\n                            Orientation="Vertical"\n                            Margin="0,35,0,0">\n\n                    <Image Source="\/Images\/Logo.png"\n                           Width="100" Height="100"\/>\n\n                    <TextBlock Text="El Blog de Mota"\n                               Foreground="White"\n                               FontSize="25"\n                               FontWeight="Medium"\n                               FontFamily="Montserrat"\n                               HorizontalAlignment="Center"\/>\n\n                    <TextBlock Text="Aprendiendo a utilizar WPF con un acceso."\n                               Foreground="LightGray"\n                               FontSize="12"\n                               FontWeight="Medium"\n                               FontFamily="Montserrat"\n                               TextWrapping="Wrap"\n                               TextAlignment="Center"\n                               Margin="0,5,0,0"\/>\n\n\n                    <TextBlock Text="Usuario"\n                               Foreground="DarkGray"\n                               FontSize="12"\n                               FontWeight="Medium"\n                               FontFamily="Montserrat"                             \n                               Margin="0,35,0,0"\/>\n\n                    <TextBox x:Name="txtUser"\n                             FontSize="13"\n                             FontWeight="Medium"\n                             FontFamily="Montserrat"                            \n                             Foreground="White"\n                             CaretBrush="LightGray"\n                             BorderBrush="DarkGray"\n                             BorderThickness="0,0,0,2"\n                             Height="28"\n                             VerticalContentAlignment="Center"\n                             Margin="0,5,0,0"\n                             Padding="20,0,0,0">\n\n                        <TextBox.Background>\n                            <ImageBrush ImageSource="\/Images\/user-icon.png"\n                                        Stretch="None"\n                                        AlignmentX="Left"\/>\n                        <\/TextBox.Background>\n                    <\/TextBox>\n\n                    <TextBlock Text="Password"\n                               Foreground="DarkGray"\n                               FontSize="12"\n                               FontWeight="Medium"\n                               FontFamily="Montserrat"                             \n                               Margin="0,15,0,0"\/>\n\n                    <PasswordBox x:Name="txtPass"\n                             FontSize="13"\n                             FontWeight="Medium"\n                             FontFamily="Montserrat"                            \n                             Foreground="White"\n                             CaretBrush="LightGray"\n                             BorderBrush="DarkGray"\n                             BorderThickness="0,0,0,2"\n                             Height="28"\n                             VerticalContentAlignment="Center"\n                             Margin="0,5,0,0"\n                             Padding="20,0,0,0">\n\n                        <PasswordBox.Background>\n                            <ImageBrush ImageSource="\/Images\/key-icon.png"\n                                        Stretch="None"\n                                        AlignmentX="Left"\/>\n                        <\/PasswordBox.Background>\n                    <\/PasswordBox>\n\n                    <Button x:Name="btnLogin"                          \n                            BorderThickness="0"\n                            Content="Acceder"\n                            Foreground="White"\n                            FontSize="12"\n                            FontFamily="Montserrat"\n                            Cursor="Hand"                           \n                            Margin="0,50,0,0"\n                            Click="btnLogin_Click">\n\n                        <Button.Style>\n                            <Style TargetType="Button">\n                                <Setter Property="Background" Value="#462AD8"\/>\n                                <Style.Triggers>\n                                    <Trigger Property="IsMouseOver" Value="True">\n                                        <Setter Property="Background" Value="#28AEED"\/>\n                                    <\/Trigger>\n                                <\/Style.Triggers>\n                            <\/Style>\n                        <\/Button.Style>\n\n                        <Button.Template>\n                            <ControlTemplate TargetType="Button">\n                                <Border Width="150" Height="40"\n                                        CornerRadius="20"\n                                        Background="{TemplateBinding Background}">\n                                    <ContentPresenter VerticalAlignment="Center"\n                                                      HorizontalAlignment="Center"\/>\n                                <\/Border>\n                            <\/ControlTemplate>\n                        <\/Button.Template>\n                    <\/Button>\n\n                    <StackPanel Orientation="Horizontal"\n                                HorizontalAlignment="Center"\n                                Margin="0,15,0,0">\n\n                        <TextBlock Text="Olvidaste el password?"\n                               Foreground="DarkGray"\n                               FontSize="12"\n                               FontWeight="Medium"\n                               FontFamily="Montserrat"\/>\n\n                        <TextBlock Text="Reiniciar"\n                               Foreground="White"\n                               FontSize="12"\n                               FontWeight="Medium"\n                               FontFamily="Montserrat"\n                               Cursor="Hand"\n                               Margin="8,0,0,0"\/>\n\n                    <\/StackPanel>\n\n                <\/StackPanel>\n\n            <\/Grid>\n\n        <\/Border>\n        \n    <\/Border>\n\n<\/Window>\n\n<\/pre><\/div>\n\n\n
    4. Modificar el archivo App.xaml<\/strong> para que la aplicaci\u00f3n pueda ejecutar como pagina de inicio, la nueva ventana que acabamos de crear. En este caso modificamos la etiqueta StartupUri y la apuntamos a nuestro archivo LoginView.xaml<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Dejo el siguiente link para descargar el proyecto de GitHub.<\/p>\n\n\n\n
    https:\/\/github.com\/Instituto-Tecnologico-de-la-Laguna\/WPF-LoginForm.git<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    Windows Presentation Foundation (WPF) es una tecnolog\u00eda de Microsoft, presentada como parte de Windows Vista. Permite el desarrollo de interfaces de interacci\u00f3n en Windows tomando caracter\u00edsticas de aplicaciones Windows y de aplicaciones web. WPF ofrece una amplia infraestructura y potencia gr\u00e1fica con la que es posible desarrollar aplicaciones visualmente atractivas, con facilidades de interacci\u00f3n que incluyen animaci\u00f3n, v\u00eddeo, audio, documentos, navegaci\u00f3n o gr\u00e1ficos 3D. Separa, con el lenguaje […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-22","post","type-post","status-publish","format-standard","hentry","category-programacion"],"_links":{"self":[{"href":"https:\/\/jlmota.net\/index.php\/wp-json\/wp\/v2\/posts\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jlmota.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jlmota.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jlmota.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jlmota.net\/index.php\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":4,"href":"https:\/\/jlmota.net\/index.php\/wp-json\/wp\/v2\/posts\/22\/revisions"}],"predecessor-version":[{"id":28,"href":"https:\/\/jlmota.net\/index.php\/wp-json\/wp\/v2\/posts\/22\/revisions\/28"}],"wp:attachment":[{"href":"https:\/\/jlmota.net\/index.php\/wp-json\/wp\/v2\/media?parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jlmota.net\/index.php\/wp-json\/wp\/v2\/categories?post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jlmota.net\/index.php\/wp-json\/wp\/v2\/tags?post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}