【wpf】利用wpf寫的一個登入介面--美感為零的程式設計師傷不起
阿新 • • 發佈：2019-02-17
【前言】
上次用swing來搞客戶端，連續幾天無法攻克技術難題---說是難題是因為 我感覺swing的機制高深莫測，是菜鳥殺手。所以將客戶端的技術換成了wpf，以後可能會用java做服務端，看來現代社會多種語言多種技術構成一個解決方案是必須的，話說假如swing難度低一點的話我也不用同時用兩種語音了，因為假如要開發效率上去的話，工具類，元件等等都必不可少，可以說我將同一個工具類用兩個不同的版本重寫過。
【正文】
好吧，先看看這個登入介面的效果，大家莫怪，這個UI是從網上copy下來的。
ok，得益於wpf的機制，客戶端無意外拿下來，但是由於對wpf還是不熟，所以有很多效果，動畫都沒做出來。過一段時間可能就熟了。下面上程式碼：
【xaml程式碼】
<Window x:Class="EasisERP.Login" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="400" Background="#00000000" WindowStyle="None" ResizeMode="NoResize" AllowsTransparency="True" BorderThickness="1"> <Grid Background="#a1C6C6C6" Opacity="1"> <Grid.RowDefinitions> <RowDefinition Height="360*" /> </Grid.RowDefinitions> <Border ClipToBounds="True" Margin="10" Grid.Row="0" Grid.Column="0" BorderBrush="Black" BorderThickness="0" CornerRadius="0 0 7 7"> <Grid Grid.Row="0" Grid.Column="0" Margin="0"> <Grid.RowDefinitions> <RowDefinition Height="43" /> <RowDefinition Height="200*" /> </Grid.RowDefinitions> <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="322" /> <ColumnDefinition Width="32" /> </Grid.ColumnDefinitions> <Grid.Background> <ImageBrush ImageSource="Images/login_title_bg.png"></ImageBrush> </Grid.Background> <Label Grid.Row="0" Grid.Column="0" Content="請登入" HorizontalContentAlignment="Left" VerticalContentAlignment="Center" Padding="20 0 0 0" FontSize="16" Foreground="White"></Label> <Button Grid.Row="0" Grid.Column="1" Width="25" Height="25" HorizontalAlignment="Center" VerticalAlignment="Center" Name="btn_close" Click="btn_close_Click"> <Button.Template> <ControlTemplate> <Label Name="tips_close" MouseEnter="tips_close_MouseEnter" MouseLeave="tips_close_MouseLeave" Foreground="White" FontSize="18" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Cursor="Hand"> <Label.Background> <ImageBrush ImageSource="Images/cancel.png"></ImageBrush> </Label.Background> </Label> </ControlTemplate> </Button.Template> </Button> </Grid> <Grid HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="0" VerticalAlignment="Stretch" Background="#FFededed"> <Grid.RowDefinitions> <RowDefinition Height="60*" /> <RowDefinition Height="60*" /> <RowDefinition Height="60*" /> </Grid.RowDefinitions> <Label Grid.Row="0" Grid.Column="0" Width="334" Height="50"> <Label.Background> <ImageBrush ImageSource="Images/UIDA登入_03.gif"></ImageBrush> </Label.Background> <TextBox Margin="45 0 0 0" Width="280" Height="50" Padding="20 0 0 0" HorizontalAlignment="Stretch" VerticalAlignment="Center" HorizontalContentAlignment="Left" FontSize="24" VerticalContentAlignment="Center" Background="{x:Null}" BorderThickness="0" Text="" > <!--textbox的樣式--> <!--textbox樣式結束--> </TextBox> </Label> <Label Grid.Row="1" Grid.Column="0" Width="334" Height="50"> <Label.Background> <ImageBrush ImageSource="Images/UIDA登入_06.gif"></ImageBrush> </Label.Background> <PasswordBox Margin="45 0 0 0" Width="280" Height="50" Padding="20 0 0 0" HorizontalAlignment="Stretch" VerticalAlignment="Center" HorizontalContentAlignment="Left" FontSize="24" VerticalContentAlignment="Center" Background="{x:Null}" BorderThickness="0" > <!--textbox的樣式--> <!--textbox樣式結束--> </PasswordBox> </Label> <Button Cursor="Hand" Name="btn_login" Opacity="1" Grid.Column="0" Grid.Row="2" Click="login_Click" Foreground="#FF7C7C03" Height="50" Width="320" MouseEnter="btn_login_MouseEnter" MouseLeave="btn_login_MouseLeave"> <Button.Template> <ControlTemplate TargetType="{x:Type Button}"> <Border ClipToBounds="True" CornerRadius="5"> <Label Name="tips_for_login" Content="登 錄" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="24" Foreground="White" > <Label.Background> <ImageBrush ImageSource="Images/未標題-1_03.gif"></ImageBrush> </Label.Background> </Label> </Border> </ControlTemplate> </Button.Template> </Button> </Grid> </Grid> </Border> </Grid> </Window>
【對應的後臺程式碼】
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Shapes; using System.Windows.Navigation; namespace EasisERP { /// <summary> /// Login.xaml 的互動邏輯 /// </summary> public partial class Login : Window { public Login() { InitializeComponent(); _init(); } public void _init() { this.WindowStartupLocation=WindowStartupLocation.CenterScreen; } private void login_Click(object sender, RoutedEventArgs e) { MessageBox.Show("暫未處理"); } private void tips_close_MouseEnter(object sender, MouseEventArgs e) { Label lb_1 = (Label)sender; try { ImageBrush ib1 = new ImageBrush(new BitmapImage(new Uri(BaseUriHelper.GetBaseUri(this), "Images/cancel_1.png"))); ib1.Stretch = Stretch.Fill; lb_1.Background = ib1; } catch (Exception ef) { MessageBox.Show("出現錯誤！："+ef.ToString()); } } private void tips_close_MouseLeave(object sender, MouseEventArgs e) { Label lb_1 = (Label)sender; try { ImageBrush ib1 = new ImageBrush(new BitmapImage(new Uri(BaseUriHelper.GetBaseUri(this), "Images/cancel.png"))); ib1.Stretch = Stretch.Fill; lb_1.Background = ib1; } catch (Exception ef) { MessageBox.Show("出現錯誤！：" + ef.ToString()); } } private void btn_close_Click(object sender, RoutedEventArgs e) { this.Close(); } private void btn_login_MouseEnter(object sender, MouseEventArgs e) { Button btn_login = (Button)sender; Label lb1 = (Label)btn_login.Template.FindName("tips_for_login", btn_login); lb1.Foreground = new SolidColorBrush(Colors.Red); } private void btn_login_MouseLeave(object sender, MouseEventArgs e) { Button btn_login = (Button)sender; Label lb1 = (Label)btn_login.Template.FindName("tips_for_login", btn_login); lb1.Foreground = new SolidColorBrush(Colors.White); } } }
【別急，我將相關資源圖片及專案檔案打包上來】
執行環境：vs20210sp1.