高仿QQ即時聊天軟件開發系列之二登陸窗口界面

繼上一篇高仿QQ即時聊天軟件開發系列之一開端以後，開始作登陸窗口

廢話很少說，先看效果，只有界面

可能還有一些細節地方沒有作，例如那個LOGO嘛，不要在乎這些細節

GIF雖短，但是這作起來真難，好吧由於我沒玩過WPF因此難，由於感受作出來以後也就那樣

總體佈局

總體是上下分，下面是左中右分

 1 <Grid>
 2         <Grid.RowDefinitions>
 3             <RowDefinition Height="27"><!--用於放窗口右上角關閉、最小化按鈕--></RowDefinition>
 4             <RowDefinition Height="153"><!--和上一行共同用於放LOGO--></RowDefinition>
 5             <RowDefinition Height="150"><!--窗口下半部分--></RowDefinition>
 6         </Grid.RowDefinitions>
 7         <Grid.ColumnDefinitions>
 8             <ColumnDefinition Width="340"><!--佔地方--></ColumnDefinition>
 9             <ColumnDefinition><!--放最小化關閉按鈕--></ColumnDefinition>
10         </Grid.ColumnDefinitions>
11        <Grid Background="#EBF2F9" Grid.Row="2" Grid.ColumnSpan="2">
12             <Grid.RowDefinitions>
13                 <RowDefinition Height="10"></RowDefinition>
14                 <RowDefinition Height="80"><!--窗口左下方的圖片--></RowDefinition>
15                 <RowDefinition><!--登陸按鈕--></RowDefinition>
16             </Grid.RowDefinitions>
17             <Grid.ColumnDefinitions>
18                 <ColumnDefinition Width="30"></ColumnDefinition>
19                 <ColumnDefinition Width="80">
20                     <!--窗口左下方的圖片-->
21                 </ColumnDefinition>
22                 <ColumnDefinition><!--用戶名密碼輸入框--></ColumnDefinition>
23                 <ColumnDefinition Width="80"><!--註冊帳號找回密碼--></ColumnDefinition>
24                 <ColumnDefinition Width="30"></ColumnDefinition>
25             </Grid.ColumnDefinitions>
26       </Grid>
27 </Grid>

總體佈局

無邊框

這個很簡單，只需設置WindowStyle就行

1 <Window xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"  xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit" 
2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4     x:Class="XC.LoginWindow"
5         Title="LoginWindow" Height="330" WindowStyle="None" ResizeMode="NoResize" Width="421" Icon="Resources/images/app_big.ico" WindowStartupLocation="CenterScreen" MouseDown="Window_MouseDown" Name="login" Loaded="login_Loaded">
6 </Window>

無邊框

右上角關閉最小化按鈕、可拖動效果

代碼都比較簡單，認真看一下都能看懂，不過多解釋

 1 <StackPanel Panel.ZIndex="1" Grid.Column="1" Orientation="Horizontal" FlowDirection="RightToLeft">
 2             <Button Name="btnClose" Click="btnClose_Click" Width="30" Style="{DynamicResource styleBtnClose}"></Button>
 3             <Button Name="btnMin" Click="btnMin_Click" Width="30" Style="{DynamicResource styleBtnMin}"></Button>
 4         </StackPanel>
 5 <Style x:Key="styleBtnClose" TargetType="Button">
 6             <Setter Property="Template">
 7                 <Setter.Value>
 8                     <ControlTemplate>
 9                         <StackPanel>
10                             <Image Name="imgNormal" Source="Resources/images/sysbtn_close_normal.png" Visibility="Visible"></Image>
11                             <Image Name="imgHover" Source="Resources/images/sysbtn_close_hover.png" Visibility="Collapsed"></Image>
12                             <Image Name="imgDown" Source="Resources/images/sysbtn_close_down.png" Visibility="Collapsed"></Image>
13                         </StackPanel>
14                         <ControlTemplate.Triggers>
15                             <Trigger Property="Button.IsMouseOver" Value="True">
16                                 <Trigger.Setters>
17                                     <Setter Property="Visibility" TargetName="imgNormal" Value="Collapsed"></Setter>
18                                     <Setter Property="Visibility" TargetName="imgHover" Value="Visible"></Setter>
19                                 </Trigger.Setters>
20                             </Trigger>
21                             <Trigger Property="Button.IsPressed" Value="True">
22                                 <Trigger.Setters>
23                                     <Setter Property="Visibility" TargetName="imgHover" Value="Collapsed"></Setter>
24                                     <Setter Property="Visibility" TargetName="imgDown" Value="Visible"></Setter>
25                                 </Trigger.Setters>
26                             </Trigger>
27                         </ControlTemplate.Triggers>
28                     </ControlTemplate>
29                 </Setter.Value>
30             </Setter>
31         </Style>
32         <Style x:Key="styleBtnMin" TargetType="Button">
33             <Setter Property="Template">
34                 <Setter.Value>
35                     <ControlTemplate>
36                         <StackPanel>
37                             <Image Name="imgNormal" Source="Resources/images/sysbtn_min_normal.png" Visibility="Visible"></Image>
38                             <Image Name="imgHover" Source="Resources/images/sysbtn_min_hover.png" Visibility="Collapsed"></Image>
39                             <Image Name="imgDown" Source="Resources/images/sysbtn_min_down.png" Visibility="Collapsed"></Image>
40                         </StackPanel>
41                         <ControlTemplate.Triggers>
42                             <Trigger Property="Button.IsMouseOver" Value="True">
43                                 <Trigger.Setters>
44                                     <Setter Property="Visibility" TargetName="imgNormal" Value="Collapsed"></Setter>
45                                     <Setter Property="Visibility" TargetName="imgHover" Value="Visible"></Setter>
46                                 </Trigger.Setters>
47                             </Trigger>
48                             <Trigger Property="Button.IsPressed" Value="True">
49                                 <Trigger.Setters>
50                                     <Setter Property="Visibility" TargetName="imgHover" Value="Collapsed"></Setter>
51                                     <Setter Property="Visibility" TargetName="imgDown" Value="Visible"></Setter>
52                                 </Trigger.Setters>
53                             </Trigger>
54                         </ControlTemplate.Triggers>
55                     </ControlTemplate>
56                 </Setter.Value>
57             </Setter>
58         </Style>

 1  private void btnClose_Click(object sender, RoutedEventArgs e)
 2         {
 3             Close();
 4         }
 5 
 6         private void btnMin_Click(object sender, RoutedEventArgs e)
 7         {
 8             WindowState = System.Windows.WindowState.Minimized;
 9         }
10 
11         private void Window_MouseDown(object sender, MouseButtonEventArgs e)
12         {
13             if(e.LeftButton== MouseButtonState.Pressed)
14             {
15                 DragMove();
16             }
17         }

密碼輸入框

作到這個地方的時候，我就一直在想，微軟你就不能支持一下placeholder效果嗎？

爲了能實現placeholder效果，瘋狂谷歌，選擇了一種看起來最簡單的方案

1 <Border CornerRadius="0,0,4,4" Grid.Row="1"  BorderBrush="#B5B5B5" BorderThickness="1,1,1,1">
2                     <PasswordBox Margin="1" KeyUp="pbPassword_KeyUp" Name="pbPassword" BorderBrush="Transparent" Grid.Row="1" VerticalContentAlignment="Center" Background="{DynamicResource burshPassword}">
3                     </PasswordBox>
4                 </Border>
5 <VisualBrush x:Key="burshPassword" AlignmentX="Left" AlignmentY="Center" Stretch="None">
6             <VisualBrush.Visual>
7                 <Label Content="密碼" Foreground="Gray" />
8             </VisualBrush.Visual>
9         </VisualBrush>

最終代碼就這麼幾行，可當時找這個方案差點沒氣死

解釋一下，那Border是用於讓密碼框的邊框爲圓角，CornerRadius是指定圓角的半徑，密碼框只須要下邊兩個角是圓角，因此像代碼中那樣寫。

重點在Background，這個是實現placeholder的關鍵。代碼中爲Background指定了一個動態資源，Key爲brushPassword，而下面定義了這個資源也就是VisualBrush，這個東東能夠把一個控件顯示成爲另外一個控件的背景，像上面那樣，把Label控件顯示成爲了PasswordBox的背景，而後Label上寫個「密碼」，設置一下顏色，placeholder效果就實現了

但這還不夠，由於這樣的話就算用戶輸入了字符，那個背景仍然會存在，因此

 1 private void pbPassword_KeyUp(object sender, KeyEventArgs e)
 2         {
 3             if (string.IsNullOrEmpty(pbPassword.Password))
 4             {
 5                 pbPassword.Background = (VisualBrush)Resources["burshPassword"];
 6             }
 7             else
 8             {
 9                 pbPassword.Background = null;
10             }
11         }

隱藏背景

這代碼就簡單多了，很少解釋。這樣，一個很簡單的placeholder方案就出來了。在谷歌上面找的其餘方案看着就暈了，不過下面這個還真的要暈過去。

用戶名/郵箱輸入組合框

這個是登陸框的重頭戲，由於ComboBox竟然不支持Background屬性，設置了半天一點效果都沒有，我#@*&$^#@，吐槽完畢，詳見另外一篇文章高仿QQ即時聊天軟件開發系列之三登陸窗口用戶選擇下拉框 

登陸按鈕

 1 <Button Name="btnLogin" Click="btnLogin_Click" Content="登陸" Grid.Column="2" Grid.Row="3" Style="{DynamicResource styleBtnLogin}" Margin="0,13,0,0"></Button>
 2         <Style x:Key="styleBtnLogin" TargetType="Button">
 3             <Setter Property="Template">
 4                 <Setter.Value>
 5                     <ControlTemplate>
 6                         <StackPanel>
 7                             <Grid Name="imgNormal">
 8                                 <TextBlock Text="登  錄" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" Panel.ZIndex="1">
 9                                 </TextBlock>
10                                 <Image Panel.ZIndex="0" Source="Resources/images/button_login_normal.png" Visibility="Visible"></Image>
11                             </Grid>
12                             <Grid Name="imgHover" Visibility="Collapsed">
13                                 <TextBlock Text="登  錄" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" Panel.ZIndex="1">
14                                 </TextBlock>
15                                 <Image Panel.ZIndex="0" Source="Resources/images/button_login_hover.png" Visibility="Visible"></Image>
16                             </Grid>
17                             <Grid Name="imgDown" Visibility="Collapsed">
18                                 <TextBlock Text="登  錄" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" Panel.ZIndex="1">
19                                 </TextBlock>
20                                 <Image Panel.ZIndex="0" Source="Resources/images/button_login_down.png" Visibility="Visible"></Image>
21                             </Grid>
22                         </StackPanel>
23                         <ControlTemplate.Triggers>
24                             <Trigger Property="Button.IsMouseOver" Value="True">
25                                 <Trigger.Setters>
26                                     <Setter Property="Visibility" TargetName="imgNormal" Value="Collapsed"></Setter>
27                                     <Setter Property="Visibility" TargetName="imgHover" Value="Visible"></Setter>
28                                 </Trigger.Setters>
29                             </Trigger>
30                             <Trigger Property="Button.IsPressed" Value="True">
31                                 <Trigger.Setters>
32                                     <Setter Property="Visibility" TargetName="imgHover" Value="Collapsed"></Setter>
33                                     <Setter Property="Visibility" TargetName="imgDown" Value="Visible"></Setter>
34                                 </Trigger.Setters>
35                             </Trigger>
36                         </ControlTemplate.Triggers>
37                     </ControlTemplate>
38                 </Setter.Value>
39             </Setter>
40         </Style>

登陸按鈕

其餘

<StackPanel Grid.Column="3" Grid.Row="1">
                <TextBlock Margin="0,8,0,0" Height="30" VerticalAlignment="Center">           
                    <Hyperlink TextDecorations="None">
                       註冊帳號
                    </Hyperlink>
                </TextBlock>
                <TextBlock  Height="30">           
                    <Hyperlink TextDecorations="None">
                       找回密碼
                    </Hyperlink>
                </TextBlock>
            </StackPanel>

 

好了，整個界面就是這樣了，除了用戶組合框有點難（其實我感受是特別難）之外，其餘的都沒什麼。圖片啥的到QQ安裝路徑找rdb文件解包吧