2. 程式人生 > >WPF系列教程——(一)仿TIM QQ界面 - 簡書

WPF系列教程——(一)仿TIM QQ界面 - 簡書

阿新 • • 發佈：2019-04-01
item blank owas themes list 點擊 tooltip 3.4 區域

原文: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文件中，添加以下代碼，應用資源樣式
    <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#1C93EC" /> Color表示所有控件的主題顏色，不添加的話所有控件顏色默認為紫色。
 <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布局將頁面劃分為三個區域，感覺Grid是萬能布局，可以用它設計出大多數軟件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>
技術分享圖片 三個區域

2. 圓形頭像

在WPF上顯示圓形圖片很簡單，使用Ellipse繪制圓形設置寬和高一致繪制正圓，在內部使用Image筆刷填充圖片，本文中的頭像顯示方式均以此來實現。

<Ellipse Width="50"
             Height="50">
                <Ellipse.Fill>
                   <ImageBrush  ImageSource="Images/github.png" />
                </Ellipse.Fill>
</Ellipse>

3. 工具欄設計

工具欄的三個不同幾何圖形，使用Polygon來繪制，再將內部填充不同的顏色，坐標自行測試選擇適當位置。

技術分享圖片 工具欄
第一個多邊形

<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. 好友列表設計

好友列表使用了ListView，效果圖中的好友都是靜態的數據，列表綁定會在下一節講到。


技術分享圖片 好友列表 
     <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. 名片設計

名片頁面是不是和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="[email protected]" />
                                </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="[email protected]" />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal"
                                            Margin="80 5 0 0 ">
                                    <TextBlock Text="職業  "
                                               Foreground="#B7B7B7" />
                                    <TextBlock Text="計算機/互聯網/通信" />
                                </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. 總結

接觸到了WPF以後感覺用WinForm托控件真的好LOW,並且用WPF可以輕松的設計出好看的界面，以前經常寫安卓也發現這倆玩意布局竟如此的雷同，然後就慢慢的過度到了WPF。
下一節將會以此項目為基礎來講訴WPF MVVM框架的實現，歡迎關註~

WPF系列教程——(一)仿TIM QQ界面 - 簡書

相關推薦

WPF系列教程——(一)仿TIM QQ界面 - 簡書

item blank owas themes list 點擊 tooltip 3.4 區域 原文:WPF系列教程——(一)仿TIM QQ界面 - 簡書 TIM QQ 我們先來看一下TIM QQ長什麽樣，整體可以將界面分為三

H5仿微信界面教程(一)

並且 ace font 界面 badge alt access oppo show 前言 先來張圖,仿微信界面，界面如下，並不完全一模一樣，只能說有些類似，希望大家見諒。 1 用到的知識點 jQuery WeUI 是WeUI的一個jQuery實現版本，除了實現了官方插件

【Python3.6+Django2.0+Xadmin2.0系列教程一】環境搭建及項目創建

添加 tran div 先來 ans 好的項目 tty 文件 mac 由於工作需要，接觸了大半年時間的Django+xadmin框架，一直沒空對這塊對進行相關的梳理。最近在同事的慫恿下，就在這分享下筆者的學習及工作經驗吧。 好了，話不多說，下面開始進入正題： 環境

webpack4 系列教程(一): 打包JS

func app lob blog pac exp 運行 conf github webpack 本身就是為了打包js所設計，作為第一節，介紹怎麽打包js。 1. 檢驗webpack規範支持 webpack支持es6, CommonJS, AMD。 創建vendor文件

spring boot系列教程一

1.spring boot簡介 Spring Boot 的優點快速開發，特別適合構建微服務系統，另外給我們封裝了各種經常使用的套件，比如mybatis、hibernate、redis、mongodb等。 2.spring Hello World（maven方式） <parent>

Java開發公眾號系列教程(一)：微信js-sdk上傳照片相容IOS和安卓裝置

很多開發者朋友在進行微信公眾號開發時，遇到微信js-sdk上傳手機相簿照片時IOS裝置無法正常預覽的情況，今天筆者結合多年的開發經驗，把相容IOS的解決方案分享給廣大微信開發者朋友。 微信最新版本JSSDK文件 地址https://mp.weixin.qq.com/advanced/wiki

Elasticsearch系列教程(一)：安裝

Elasticsearch簡介 Elasticsearch是一個高度可擴充套件的開源全文搜尋和分析引擎。它允許您快速，近實時地儲存，搜尋和分析大量資料。它通常用作底層引擎/技術，為具有複雜搜尋功能和要求的應用程式提供支援。 Elasticsearch可用於以下場景： 您執行線上網上商店

Java開發公眾號系列教程(一)：微信js-sdk上傳手機相簿照片相容IOS和安卓裝置

很多開發者朋友在進行微信公眾號開發時，遇到微信js-sdk上傳手機相簿照片時IOS裝置無法正常預覽的情況，今天筆者結合多多年的開發經驗，把相容IOS的解決方案分享給廣大微信開發者朋友。 一、首先申明一點筆者本案例用的微信JSSDK版本是1.2.0的，官方文件給出的最

NGUI系列教程一

首先匯入NGUI package，這裡我們選用的是2.6.3版本的NGUI。在unity工程視窗中點選右鍵選擇 Importpackage àcustom package，選擇你下載的NGUI外掛，匯入完成後效果如圖: １．選擇選單NGUIàOpen the UI W

熊大UWB系列教程一： DW1000 超寬頻系統簡介及最小系統搭建

對超寬頻感興趣的朋友，請關注熊大的微信公眾號，熊大將在上面釋出超寬頻教程，行業資訊，技術應用。幫助你更好的瞭解、學習、使用超寬頻技術。 熊大DW1000系列教程一： DW1000 超寬頻系統簡介及最小系統搭建 DW1000是decawave公司於20

網頁播放器開發系列教程(一)

（今天的教程我只是把開頭和提綱列出來了，我會陸續補充完善開發教程，希望大家陸續關注） 各位朋友大家好，我是相信神話，從今天開始，我把最近開發的一個網頁播放器，開發過程記錄下來，希望與此感興趣的朋友的朋友一起學習研究。也請大家多幫忙指教。 一、寫在前面 有些東西寫在前面，一邊大家總體掌握開發的情況。這個播

Cocoapods系列教程(一)——入門

開場 對於這個東西估計絕大多數的童鞋應該都不陌生了，不過這裡還是稍微對大家嘮嘮嗑，可能對於那些沒用過的童鞋也有可能是一種幫助呢，我們要一視同仁對吧。 對於Cocoapods是個什麼東西估計大家多少聽過了，可能有些童鞋沒有用過，但是多少也聽過了。如果沒聽過

Visual Studio 2008系列教程(一):VS 2008安裝詳解！

前天得知Visual Studio 2008的正式版釋出了！所以到www.Microsoft.com去看了一下，確定VS2008是真的釋出了。不知道他會給我們帶來什麼驚喜呢？我們大家一起來體驗一下吧！想要用VS 2008的話，肯定就先要將它下載下來然後安裝上(呵呵，好像是費話

史上最詳細的Android Studio系列教程(一)

本文為個人原創，歡迎轉載，但請務必在明顯位置註明出處！ 背景 相信大家對Android Studio已經不陌生了，Android Studio是Google於2013 I/O大會針對Android開發推出的新的開發工具，目前很多開源專案都已經在採用，Google的更新速度也很快，明顯能感覺到這是A

Magento 1.x 入門之系列教程一

Magento 1.x 入門教程一 Magento 是一套專業開源的電子商務系統，也是目前主流的外貿網站購物系統，是基於 PHP 語言開發的，資料庫使用的是 Mysql，且瀏覽介面很適合歐美使用者的使用習慣。Magento 設計得非常靈活，具有模組化架構體系和

Maven 教程：IDEA開發環境中maven 專案配置JDK9，JDK10，JDK11，JDK12..等EA版本的配置方法 系列教程一

在Maven中配置使用的JDK，一般有兩種方法，筆者會對如下的兩種方法進行 分別的介紹。 筆者就以JDK10作為介紹,其他正常的JDK版本的配置也是一樣的。這裡使用JDK10 只是為了作一個通用的示範，使得大家舉一反三。後面會貼出其他版本的配置資訊。供大家拷貝

從零開始學習ExtJs6系列教程一【Hello World】

我們在學校裡學習任何一門語言都是從"Hello World"開始，這裡我們也不例外。 那麼我們的教程就從 Hello World 講起。 helloWorld.js Ext.onReady(func

如何在C#中引入CPLEX的dll（CPLEX系列-教程一）

++ cep target array release raw req console 6.0 以前寫在CSDN上的文章。轉到博客園之後，打算把這個教程移過來，順便完善後面的教程。主要是在Asp.Net+EF6裏面使用cplex,完成一個最優生產計劃的決策。當時在查找如何在

WPF系列教程——(三)使用Win10 Edge瀏覽器內核 - 簡書

com free 空間 style mage esp image webp nuget 原文:WPF系列教程——(三)使用Win10 Edge瀏覽器內核 - 簡書 在需要顯示一些 H5網站的時候自帶的WebBrowser總是

springboot 系列教程一：基礎專案搭建

使用 spring boot 有什麼好處 其實就是簡單、快速、方便！平時如果我們需要搭建一個 spring web 專案