android仿tim主界面,WPF系列教程——(一)仿TIM QQ界面

TIM QQ

我们先来看一下TIM QQ长什么样，整体可以将界面分为三个部分

TIM QQ

1. 准备

阅读本文假设你已经有XAML布局的基础，所以只对部分布局进行说明。

界面上的图标均来自 Material Design Icons

选择需要的图标后点击View XAML

图片.png

会显示WPF的调用代码，直接复制到项目中即可，WPF是支持矢量图显示的。

图片.png

本文中的控件使用了开源的MaterialDesignInXamlToolkit，这是一款WPF的Material Design UI库，也是WPF最流行的UI库之一，可以轻松的做出漂亮的界面，到NuGet中搜索即可添加到项目。

NuGet

在App.xaml文件中，添加以下代码，应用资源样式

Color表示所有控件的主题颜色，不添加的话所有控件颜色默认为紫色。

在需要使用MaterialDesignInXamlToolkit控件的页面引入命名空间

xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

使用Grid布局将页面划分为三个区域，感觉Grid是万能布局，可以用它设计出大多数软件90%的界面

三个区域

2. 圆形头像

在WPF上显示圆形图片很简单，使用Ellipse绘制圆形设置宽和高一致绘制正圆，在内部使用Image笔刷填充图片，本文中的头像显示方式均以此来实现。

Height="50">

3. 工具栏设计

工具栏的三个不同几何图形，使用Polygon来绘制，再将内部填充不同的颜色，坐标自行测试选择适当位置。

工具栏

第一个多边形

StrokeThickness="1">

第二个多边形

StrokeThickness="1">

第三个多边形

StrokeThickness="1">

XAML代码如下，简书没有折叠代码功能啊，这段有点长。

Name="NavBar"

Height="65"

MouseLeftButtonDown="NavBar_MouseLeftButtonDown"

materialDesign:ShadowAssist.ShadowDepth="Depth3">

StrokeThickness="1">

StrokeThickness="1">

StrokeThickness="1">

HorizontalAlignment="Left"

Margin="10 5"

Width="50"

Height="50">

Width="200">

Height="60"

Background="{x:Null}"

BorderBrush="{x:Null}"

materialDesign:ShadowAssist.ShadowDepth="Depth1"

Padding="0">

Height="30">

Height="24">

Fill="White" />

Height="60"

Background="{x:Null}"

BorderBrush="{x:Null}"

materialDesign:ShadowAssist.ShadowDepth="Depth1"

Padding="0">

Height="30">

Height="24">

Fill="White" />

Height="60"

Background="{x:Null}"

BorderBrush="{x:Null}"

materialDesign:ShadowAssist.ShadowDepth="Depth1"

Padding="0">

Height="30">

Height="24">

Fill="White" />

Width="150">

Background="{x:Null}"

BorderBrush="{x:Null}"

materialDesign:ShadowAssist.ShadowDepth="Depth1"

Padding="0">

Height="25">

Height="24">

Fill="White" />

Background="{x:Null}"

BorderBrush="{x:Null}"

materialDesign:ShadowAssist.ShadowDepth="Depth1"

Padding="0">

Height="25">

Height="24">

Fill="White" />

Background="{x:Null}"

BorderBrush="{x:Null}"

materialDesign:ShadowAssist.ShadowDepth="Depth1"

Padding="0">

Height="25">

Height="24">

Fill="White" />

Background="{x:Null}"

BorderBrush="{x:Null}"

materialDesign:ShadowAssist.ShadowDepth="Depth1"

Padding="0">

Height="25">

Height="24">

Fill="White" />

4. 好友列表设计

好友列表使用了ListView，效果图中的好友都是静态的数据，列表绑定会在下一节讲到。

好友列表

Grid.Column="0">

Cursor="Hand">

PlacementMode="TopAndAlignCentres"

ToolTipService.Placement="Left"

ToolTip="TIM QQ"

HorizontalAlignment="Right"

VerticalAlignment="Bottom"

Margin="20">

ListView中Item代码如下

Padding="0">

Margin="10 0">

Width="50"

Height="50">

VerticalAlignment="Center"

Margin="5 0">

Foreground="Black"

Text="糖宝" />

FontSize="12"

Text="Hello world" />

5. 名片设计

名片页面是不是和TIM QQ的几乎一模一样~

名片

XAML代码如下

HorizontalAlignment="Right"

VerticalAlignment="Top"

Margin="0 -30 5 0"

BorderBrush="{x:Null}"

ToolTip="修改资料">

Height="24"

Width="24" />

HorizontalAlignment="Center"

FontSize="35"

Margin="0 20 0 0" />

Margin="80 5 0 0 "

>

Foreground="#B7B7B7" />

Margin="80 5 0 0 ">

Foreground="#B7B7B7" />

Margin="80 5 0 0 ">

Foreground="#B7B7B7" />

Margin="80 5 0 0 ">

Foreground="#B7B7B7" />

Margin="80 5 0 0 ">

Foreground="#B7B7B7" />

Margin="80 5 0 0 ">

Foreground="#B7B7B7" />

6. 最终效果

最终效果

7. 总结

接触到了WPF以后感觉用WinForm托控件真的好LOW,并且用WPF可以轻松的设计出好看的界面，以前经常写安卓也发现这俩玩意布局竟如此的雷同，然后就慢慢的过度到了WPF。

下一节将会以此项目为基础来讲诉WPF MVVM框架的实现，欢迎关注~