TIM QQ
我們先來看一下TIM QQ長什么樣倾剿，整體可以將界面分為三個部分
TIM QQ
1. 準(zhǔn)備
- 閱讀本文假設(shè)你已經(jīng)有XAML布局的基礎(chǔ)，所以只對部分布局進行說明蚤霞。
- 界面上的圖標(biāo)均來自 Material Design Icons
選擇需要的圖標(biāo)后點擊View XAML
圖片.png
會顯示W(wǎng)PF的調(diào)用代碼东且，直接復(fù)制到項目中即可埃跷，WPF是支持矢量圖顯示的接癌。
圖片.png
- 本文中的控件使用了開源的MaterialDesignInXamlToolkit心赶，這是一款WPF的Material Design UI庫，也是WPF最流行的UI庫之一缺猛，可以輕松的做出漂亮的界面缨叫，到NuGet中搜索即可添加到項目椭符。
NuGet
在App.xaml文件中，添加以下代碼耻姥，應(yīng)用資源樣式
<SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#1C93EC" />Color表示所有控件的主題顏色销钝，不添加的話所有控件顏色默認(rèn)為紫色。
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
</ResourceDictionary.MergedDictionaries>
<SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#1C93EC" />
</ResourceDictionary>
在需要使用MaterialDesignInXamlToolkit控件的頁面引入命名空間
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
- 使用
Grid布局將頁面劃分為三個區(qū)域琐簇，感覺Grid是萬能布局蒸健，可以用它設(shè)計出大多數(shù)軟件90%的界面
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="63*" />
<RowDefinition Height="706*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="157*" />
<ColumnDefinition Width="389*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
</Grid>
<Grid Grid.Column="1">
</Grid>
</Grid>
</Grid>
三個區(qū)域
2. 圓形頭像
在WPF上顯示圓形圖片很簡單，使用Ellipse繪制圓形設(shè)置寬和高一致繪制正圓鸽嫂，在內(nèi)部使用Image筆刷填充圖片，本文中的頭像顯示方式均以此來實現(xiàn)征讲。
<Ellipse Width="50"
Height="50">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/github.png" />
</Ellipse.Fill>
</Ellipse>
3. 工具欄設(shè)計
工具欄的三個不同幾何圖形据某，使用Polygon來繪制，再將內(nèi)部填充不同的顏色诗箍，坐標(biāo)自行測試選擇適當(dāng)位置癣籽。
工具欄
第一個多邊形
<Polygon Points="0,0 700,0 756,65 0,65"
StrokeThickness="1">
<Polygon.Fill>
<SolidColorBrush Color="#1C93EC" />
</Polygon.Fill>
</Polygon>
第二個多邊形
<Polygon Points="700,0 780,0 740,50 "
StrokeThickness="1">
<Polygon.Fill>
<SolidColorBrush Color="#3E58C9" />
</Polygon.Fill>
</Polygon>
第三個多邊形
<Polygon Points="780,0 1100,0 1100,65 723,65 "
StrokeThickness="1">
<Polygon.Fill>
<SolidColorBrush Color="#3448A1" />
</Polygon.Fill>
</Polygon>
XAML代碼如下，簡書沒有折疊代碼功能啊滤祖，這段有點長筷狼。
<materialDesign:ColorZone Mode="PrimaryMid"
Name="NavBar"
Height="65"
MouseLeftButtonDown="NavBar_MouseLeftButtonDown"
materialDesign:ShadowAssist.ShadowDepth="Depth3">
<Grid>
<!--第三個幾何圖形-->
<Polygon Points="780,0 1100,0 1100,65 723,65 "
StrokeThickness="1">
<Polygon.Fill>
<SolidColorBrush Color="#3448A1" />
</Polygon.Fill>
</Polygon>
<!--第二個幾何圖形-->
<Polygon Points="700,0 780,0 740,50 "
StrokeThickness="1">
<Polygon.Fill>
<SolidColorBrush Color="#3E58C9" />
</Polygon.Fill>
</Polygon>
<!--第一個幾何圖形-->
<Polygon Points="0,0 700,0 756,65 0,65"
StrokeThickness="1">
<Polygon.Fill>
<SolidColorBrush Color="#1C93EC" />
</Polygon.Fill>
</Polygon>
<Ellipse Cursor="Hand"
HorizontalAlignment="Left"
Margin="10 5"
Width="50"
Height="50">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/github.png" />
</Ellipse.Fill>
</Ellipse>
<Grid HorizontalAlignment="Center"
Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Button Width="60"
Height="60"
Background="{x:Null}"
BorderBrush="{x:Null}"
materialDesign:ShadowAssist.ShadowDepth="Depth1"
Padding="0">
<Viewbox Width="30"
Height="30">
<Canvas Width="24"
Height="24">
<Path Data="M17,12V3A1,1 0 0,0 16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z"
Fill="White" />
</Canvas>
</Viewbox>
</Button>
</Grid>
<Grid Grid.Column="1">
<Button Width="60"
Height="60"
Background="{x:Null}"
BorderBrush="{x:Null}"
materialDesign:ShadowAssist.ShadowDepth="Depth1"
Padding="0">
<Viewbox Width="30"
Height="30">
<Canvas Width="24"
Height="24">
<Path Data="M16.5,12A2.5,2.5 0 0,0 19,9.5A2.5,2.5 0 0,0 16.5,7A2.5,2.5 0 0,0 14,9.5A2.5,2.5 0 0,0 16.5,12M9,11A3,3 0 0,0 12,8A3,3 0 0,0 9,5A3,3 0 0,0 6,8A3,3 0 0,0 9,11M16.5,14C14.67,14 11,14.92 11,16.75V19H22V16.75C22,14.92 18.33,14 16.5,14M9,13C6.67,13 2,14.17 2,16.5V19H9V16.75C9,15.9 9.33,14.41 11.37,13.28C10.5,13.1 9.66,13 9,13Z"
Fill="White" />
</Canvas>
</Viewbox>
</Button>
</Grid>
<Grid Grid.Column="2">
<Button Width="60"
Height="60"
Background="{x:Null}"
BorderBrush="{x:Null}"
materialDesign:ShadowAssist.ShadowDepth="Depth1"
Padding="0">
<Viewbox Width="30"
Height="30">
<Canvas Width="24"
Height="24">
<Path Data="M19,16A3,3 0 0,0 22,13A3,3 0 0,0 19,10H17.5V9.5A5.5,5.5 0 0,0 12,4C9.5,4 7.37,5.69 6.71,8H6A4,4 0 0,0 2,12A4,4 0 0,0 6,16V11H18V16H19M19.36,8.04C21.95,8.22 24,10.36 24,13A5,5 0 0,1 19,18H18V22H6V18A6,6 0 0,1 0,12C0,8.91 2.34,6.36 5.35,6.04C6.6,3.64 9.11,2 12,2C15.64,2 18.67,4.6 19.36,8.04M8,13V20H16V13H8M9,18H15V19H9V18M15,17H9V16H15V17M9,14H15V15H9V14Z"
Fill="White" />
</Canvas>
</Viewbox>
</Button>
</Grid>
</Grid>
<Grid HorizontalAlignment="Right"
Width="150">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Button Height="60"
Background="{x:Null}"
BorderBrush="{x:Null}"
materialDesign:ShadowAssist.ShadowDepth="Depth1"
Padding="0">
<Viewbox Width="25"
Height="25">
<Canvas Width="24"
Height="24">
<Path Data="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"
Fill="White" />
</Canvas>
</Viewbox>
</Button>
</Grid>
<Grid Grid.Column="1">
<Button Height="60"
Background="{x:Null}"
BorderBrush="{x:Null}"
materialDesign:ShadowAssist.ShadowDepth="Depth1"
Padding="0">
<Viewbox Width="25"
Height="25">
<Canvas Width="24"
Height="24">
<Path Data="M20,14H4V10H20"
Fill="White" />
</Canvas>
</Viewbox>
</Button>
</Grid>
<Grid Grid.Column="2">
<Button Height="60"
Background="{x:Null}"
BorderBrush="{x:Null}"
materialDesign:ShadowAssist.ShadowDepth="Depth1"
Padding="0">
<Viewbox Width="25"
Height="25">
<Canvas Width="24"
Height="24">
<Path Data="M4,4H20V20H4V4M6,8V18H18V8H6Z"
Fill="White" />
</Canvas>
</Viewbox>
</Button>
</Grid>
<Grid Grid.Column="3">
<Button Height="60"
Background="{x:Null}"
BorderBrush="{x:Null}"
materialDesign:ShadowAssist.ShadowDepth="Depth1"
Padding="0">
<Viewbox Width="25"
Height="25">
<Canvas Width="24"
Height="24">
<Path Data="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
Fill="White" />
</Canvas>
</Viewbox>
</Button>
</Grid>
</Grid>
</Grid>
</materialDesign:ColorZone>
4. 好友列表設(shè)計
好友列表使用了ListView，效果圖中的好友都是靜態(tài)的數(shù)據(jù)匠童，列表綁定會在下一節(jié)講到埂材。
好友列表
<Grid Background="#FAFAFA"
Grid.Column="0">
<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Cursor="Hand">
</ListView>
<materialDesign:PopupBox Style="{StaticResource MaterialDesignMultiFloatingActionPopupBox}"
PlacementMode="TopAndAlignCentres"
ToolTipService.Placement="Left"
ToolTip="TIM QQ"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Margin="20">
</materialDesign:PopupBox>
</Grid>
ListView中Item代碼如下
<ListViewItem Height="60"
Padding="0">
<StackPanel Orientation="Horizontal"
Margin="10 0">
<Ellipse Cursor="Hand"
Width="50"
Height="50">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/head2.jpg" />
</Ellipse.Fill>
</Ellipse>
<StackPanel Orientation="Vertical"
VerticalAlignment="Center"
Margin="5 0">
<TextBlock FontSize="15"
Foreground="Black"
Text="糖寶" />
<TextBlock Margin="0 2 0 0"
FontSize="12"
Text="Hello world" />
</StackPanel>
</StackPanel>
</ListViewItem>
5. 名片設(shè)計
名片頁面是不是和TIM QQ的幾乎一模一樣~
名片
XAML代碼如下
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Image Stretch="UniformToFill" Source="Images/head1.jpg" />
</Grid>
<Grid Grid.Row="1">
<Button Style="{StaticResource MaterialDesignFloatingActionButton}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="0 -30 5 0"
BorderBrush="{x:Null}"
ToolTip="修改資料">
<materialDesign:PackIcon Kind="Pencil"
Height="24"
Width="24" />
</Button>
<StackPanel Orientation="Vertical">
<TextBlock Text="Go to hell!"
HorizontalAlignment="Center"
FontSize="35"
Margin="0 20 0 0" />
<StackPanel Orientation="Horizontal"
Margin="80 5 0 0 "
>
<TextBlock Text="賬號 "
Foreground="#B7B7B7" />
<TextBlock Text="vaemc520@qq.com" />
</StackPanel>
<StackPanel Orientation="Horizontal"
Margin="80 5 0 0 ">
<TextBlock Text="昵稱 "
Foreground="#B7B7B7" />
<TextBlock Text="Go to hell!" />
</StackPanel>
<StackPanel Orientation="Horizontal"
Margin="80 5 0 0 ">
<TextBlock Text="手機 "
Foreground="#B7B7B7" />
<TextBlock Text="183XXXXXXXX" />
</StackPanel>
<StackPanel Orientation="Horizontal"
Margin="80 5 0 0 ">
<TextBlock Text="郵箱 "
Foreground="#B7B7B7" />
<TextBlock Text="vaemc520@qq.com" />
</StackPanel>
<StackPanel Orientation="Horizontal"
Margin="80 5 0 0 ">
<TextBlock Text="職業(yè) "
Foreground="#B7B7B7" />
<TextBlock Text="計算機/互聯(lián)網(wǎng)/通信" />
</StackPanel>
<StackPanel Orientation="Horizontal"
Margin="80 5 0 0 ">
<TextBlock Text="空間 "
Foreground="#B7B7B7" />
<TextBlock Text="Go to hell! 的空間" />
</StackPanel>
</StackPanel>
</Grid>
6. 最終效果
最終效果
歡迎Star https://github.com/vaemc/WpfTimQQ
7. 總結(jié)
接觸到了WPF以后感覺用WinForm托控件真的好LOW,并且用WPF可以輕松的設(shè)計出好看的界面，以前經(jīng)常寫安卓也發(fā)現(xiàn)這倆玩意布局竟如此的雷同汤求，然后就慢慢的過度到了WPF俏险。
下一節(jié)將會以此項目為基礎(chǔ)來講訴WPF MVVM框架的實現(xiàn)，歡迎關(guān)注~
