实现QQ页面

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

TIM QQ

1. 准备
   阅读本文假设你已经有XAML布局的基础，所以只对部分布局进行说明。
   界面上的图标均来自 Material Design Icons
   选择需要的图标后点击View XAML
   会显示WPF的调用代码，直接复制到项目中即可，WPF是支持矢量图显示的。
   本文中的控件使用了开源的MaterialDesignInXamlToolkit，这是一款WPF的Material Design UI库，也是WPF最流行的UI库之一，可以轻松的做出漂亮的界面，到NuGet中搜索即可添加到项目。
   NuGet

在App.xaml文件中，添加以下代码，应用资源样式
Color表示所有控件的主题颜色，不添加的
使用Grid布局将页面划分为三个区域，感觉Grid是万能布局，可以用它设计出大多数软件90%的界面

<Grid.RowDefinitions>


</Grid.RowDefinitions>

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

<Ellipse.Fill>

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

第一个多边形

<Polygon.Fill>

</Polygon.Fill>

第二个多边形

<Polygon.Fill>

</Polygon.Fill>

第三个多边形

<Polygon.Fill>

</Polygon.Fill>