WPF登入介面樣例

ggtc發表於2024-04-06

XAML檔案內容如下

WPF登入介面樣例
  1 <Window x:Class="ERP.Views.Login"
  2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6         xmlns:local="clr-namespace:ERP.Views"
  7         mc:Ignorable="d"
  8         WindowStyle="None"
  9         ResizeMode="NoResize"
 10         WindowStartupLocation="CenterScreen"
 11         MouseDown="Window_MouseDown"
 12         Background="Transparent"
 13         AllowsTransparency="True"
 14         Title="Login" Height="550" Width="800">
 15     <Border CornerRadius="12">
 16         <Border.Background>
 17             <ImageBrush ImageSource="/resource/login_background.png" Stretch="None"/>
 18         </Border.Background>
 19         <Border CornerRadius="10" BorderThickness="1" Opacity="0.9">
 20             <Border.BorderBrush>
 21                 <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
 22                     <GradientStop Color="#462ad8" Offset="0"/>
 23                     <GradientStop Color="#da34a1" Offset="0.75"/>
 24                     <GradientStop Color="#8a16c1" Offset="1"/>
 25                 </LinearGradientBrush>
 26             </Border.BorderBrush>
 27             <Border.Background>
 28                 <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
 29                     <GradientStop Color="#060531" Offset="0"/>
 30                     <GradientStop Color="#1b1448" Offset="0.75"/>
 31                 </LinearGradientBrush>
 32             </Border.Background>
 33             <Grid>
 34                 <Grid.RowDefinitions>
 35                     <RowDefinition Height="30"/>
 36                     <RowDefinition/>
 37                 </Grid.RowDefinitions>
 38                 <Grid>
 39                     <Grid.ColumnDefinitions>
 40                         <ColumnDefinition/>
 41                         <ColumnDefinition Width="25"/>
 42                         <ColumnDefinition Width="25"/>
 43                         <ColumnDefinition Width="5"/>
 44                     </Grid.ColumnDefinitions>
 45                     <TextBlock Text="登入"  
 46                                Foreground="#cccccc" 
 47                                FontSize="10"
 48                                FontFamily="Montserrat" 
 49                                Grid.Column="0" 
 50                                VerticalAlignment="Center"
 51                                Margin="10 0 0 0"/>
 52                     <Button x:Name="btnMinimize" 
 53                             Grid.Column="1" 
 54                             Content="-" 
 55                             FontSize="16" 
 56                             Foreground="White" 
 57                             FontFamily="Montserrat" 
 58                             Cursor="Hand"
 59                             Click="btnMinimize_Click">
 60                         <Button.Style>
 61                             <Style TargetType="Button">
 62                                 <Setter Property="Background" Value="#28aeed"/>
 63                                 <Style.Triggers>
 64                                     <Trigger Property="IsMouseOver" Value="True">
 65                                         <Setter Property="Background" Value="#278bef"/>
 66                                     </Trigger>
 67                                 </Style.Triggers>
 68                             </Style>
 69                         </Button.Style>
 70                         <Button.Template>
 71                             <ControlTemplate TargetType="Button">
 72                                 <Border Width="18" Height="18" CornerRadius="9" Background="{TemplateBinding Background}">
 73                                     <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
 74                                 </Border>
 75                             </ControlTemplate>
 76                         </Button.Template>
 77                     </Button>
 78                     <Button x:Name="btnClose" 
 79                             Grid.Column="2" 
 80                             Content="X" 
 81                             FontSize="16" 
 82                             Foreground="White" 
 83                             FontFamily="Montserrat" 
 84                             Cursor="Hand"
 85                             Click="btnClose_Click">
 86                         <Button.Style>
 87                             <Style TargetType="Button">
 88                                 <Setter Property="Background" Value="#da34ae"/>
 89                                 <Style.Triggers>
 90                                     <Trigger Property="IsMouseOver" Value="True">
 91                                         <Setter Property="Background" Value="#c62dae"/>
 92                                     </Trigger>
 93                                 </Style.Triggers>
 94                             </Style>
 95                         </Button.Style>
 96                         <Button.Template>
 97                             <ControlTemplate TargetType="Button">
 98                                 <Border Width="18" Height="18" CornerRadius="9" Background="{TemplateBinding Background}">
 99                                     <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
100                                 </Border>
101                             </ControlTemplate>
102                         </Button.Template>
103                     </Button>
104                 </Grid>
105                 <StackPanel Width="250"
106                             Margin="0 35 0 0"
107                             Grid.Row="1">
108                     <Image Source="/resource/login_logo.png"
109                            Width="100"
110                            Height="100"/>
111                     <TextBlock Text="ERP"
112                         Foreground="White"
113                         FontSize="25"
114                         FontWeight="Medium"
115                         FontFamily="Montserrat"
116                         HorizontalAlignment="Center"
117                         />
118                     <TextBlock
119                         Text="ERP系統,最佳化流程,精準決策,引領企業邁向數字化管理新時代!"
120                         Foreground="LightGray"
121                         FontSize="12"
122                         FontWeight="Medium"
123                         FontFamily="Montserrat"
124                         TextWrapping="Wrap"
125                         TextAlignment="Center"
126                         Margin="0 5 0 0"
127                         />
128                     <TextBlock Text="使用者名稱"
129                         Foreground="DarkGray"
130                         FontSize="12"
131                         FontWeight="Medium"
132                         FontFamily="Montserrat"
133                         Margin="0 35 0 0"
134                         />
135                     <TextBox x:Name="txtUser"
136                              FontSize="13"
137                              FontWeight="Medium"
138                              FontFamily="Montserrat"
139                              Foreground="White"
140                              CaretBrush="LightGray"
141                              BorderBrush="DarkGray"
142                              BorderThickness="0 0 0 1"
143                              Height="28"
144                              VerticalContentAlignment="Center"
145                              Margin="0 5 0 0"
146                              Padding="35 0 0 0"
147                         >
148                         <TextBox.Background>
149                             <ImageBrush ImageSource="/resource/登入.png"
150                                         Stretch="Uniform"
151                                         AlignmentX="Left"/>
152                         </TextBox.Background>
153                     </TextBox>
154                     <TextBlock Text="密碼"
155                         Foreground="DarkGray"
156                         FontSize="12"
157                         FontWeight="Medium"
158                         FontFamily="Montserrat"
159                         Margin="0 15 0 0"
160                         />
161                     <PasswordBox x:Name="txtPassword"
162                              FontSize="13"
163                              FontWeight="Medium"
164                              FontFamily="Montserrat"
165                              Foreground="White"
166                              CaretBrush="LightGray"
167                              BorderBrush="DarkGray"
168                              BorderThickness="0 0 0 1"
169                              Height="28"
170                              VerticalContentAlignment="Center"
171                              Margin="0 5 0 0"
172                              Padding="35 0 0 0"
173                         >
174                         <PasswordBox.Background>
175                             <ImageBrush ImageSource="/resource/登入密碼.png"
176                                         Stretch="Uniform"
177                                         AlignmentX="Left"/>
178                         </PasswordBox.Background>
179                     </PasswordBox>
180                     <Button x:Name="btnLogin" 
181                             Content="登入"
182                             FontSize="16" 
183                             Foreground="White" 
184                             FontFamily="Montserrat" 
185                             Cursor="Hand"
186                             Margin="0,50,0,0"
187                             Click="Button_Click">
188                             <Button.Style>
189                                 <Style TargetType="Button">
190                                     <Setter Property="Background" Value="#462ad8"/>
191                                     <Style.Triggers>
192                                         <Trigger Property="IsMouseOver" Value="True">
193                                             <Setter Property="Background" Value="#28aeed"/>
194                                         </Trigger>
195                                     </Style.Triggers>
196                                 </Style>
197                             </Button.Style>
198                         <Button.Template>
199                             <ControlTemplate TargetType="Button">
200                                 <Border Width="150" Height="40" CornerRadius="20" Background="{TemplateBinding Background}">
201                                     <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
202                                 </Border>
203                             </ControlTemplate>
204                         </Button.Template>
205                     </Button>
206                     <StackPanel Orientation="Horizontal"
207                                 HorizontalAlignment="Center"
208                                 Margin="0,15,0,0">
209                         <TextBlock Text="忘記了密碼?" 
210                                    Foreground="DarkGray"
211                                    FontSize="12"
212                                    FontWeight="Medium"
213                                    FontFamily="Montserrat"
214                                    Cursor="Hand"/>
215                         <TextBlock Text="重置密碼"
216                                    Foreground="White"
217                                    FontSize="12"
218                                    FontWeight="Medium"
219                                    FontFamily="Montserrat"
220                                    Cursor="Hand"
221                                    Margin="8,0,0,0"/>
222                     </StackPanel>
223                 </StackPanel>
224             </Grid>
225         </Border>
226     </Border>
227 </Window>
View Code

效果圖

資源

背景圖

logo

圖示

相關文章