前言

最近在找工作，發現沒有任何的WPF可以拿的出手的工作經驗，打算仿照網易云搭建一個WPF版本的。

項目地址

WPF仿網易云 Gitee倉庫

項目Nuget包搭建

不管有沒有用，先把Nuget裝好

項目初始化

我項目初始化用過，我們先簡單的項目初始化一下，知識點有點多。我使用的是Prism的BlankApp項目

WPF 零基礎入門筆記（1）：WPF靜態頁面，布局+樣式+觸發器

WPF 零基礎入門筆記（2）：控件模板+數據模版

WPF 零基礎入門筆記（3）：數據綁定詳解

WPF Material Design UI框架：部分常用控件簡單使用

WPF Live Charts2 自學筆記

.NET SqlSuger 簡單介紹，超快開發數據庫

WPF Prims框架詳解

WPF CommunityToolkit.Mvvm

.NET Core 依賴注入 Microsoft.Extensions.DependencyInjection

項目架構

• Models:實體類
• Services:服務類
• Utils:工具類
• View:視圖
• ViewModels:視圖數據
• ViewStyles:視圖樣式
• App.xaml:項目入口

App.xaml引入MateralDesign資源包

<prism:PrismApplication x:Class="BlankApp1.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:BlankApp1"xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"xmlns:prism="http://prismlibrary.com/"><Application.Resources><ResourceDictionary><!--添加MD 資源包--><ResourceDictionary.MergedDictionaries><materialDesign:BundledTheme BaseTheme="Light"PrimaryColor="Pink"SecondaryColor="Lime" /><ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" /></ResourceDictionary.MergedDictionaries></ResourceDictionary></Application.Resources>
</prism:PrismApplication>

項目初步分析

這個適合使用DogPanel。

將標題欄去掉

WPF-隱藏窗體標題欄和邊框

<Window .......WindowStyle="None"AllowsTransparency="True">

DockPanel初步布局

<Window x:Class="BlankApp1.Views.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:MD="http://materialdesigninxaml.net/winfx/xaml/themes"xmlns:prism="http://prismlibrary.com/"prism:ViewModelLocator.AutoWireViewModel="True"xmlns:Views="clr-namespace:BlankApp1.Views"WindowStyle="None"AllowsTransparency="True"Title="{Binding Title}"Height="600"Width="800"><Window.Resources><Style x:Key="ContentBorder"TargetType="Border"><Setter Property="BorderBrush"Value="Black" /><Setter Property="BorderThickness"Value="3" /></Style></Window.Resources><DockPanel LastChildFill="True"><Border DockPanel.Dock="Bottom"Height="70"Style="{StaticResource ContentBorder}" /><Border DockPanel.Dock="Left"Width="100"Style="{StaticResource ContentBorder}" /><Border DockPanel.Dock="Top"Height="60"Style="{StaticResource ContentBorder}" /><Border Style="{StaticResource ContentBorder}"Background="Pink"Height="auto" /></DockPanel>
</Window>

資源字典

我們寫樣式的時候，有時候樣式寫的特別多，這樣就需要字典引入。這里不得不吐槽，資源字典是沒有代碼提示的，必須純手打

<!--窗口控件就是Windows.Resource-->
<UserControl.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="/項目名;component/文件完整路徑"/></ResourceDictionary.MergedDictionaries></ResourceDictionary>
</UserControl.Resources>

舉例

比如我這個資源文件

引入代碼

    <UserControl.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="/BlankApp1;component/ViewStyles/TitleStyle.xaml"/></ResourceDictionary.MergedDictionaries></ResourceDictionary></UserControl.Resources>

記得引入了之后要重新生成一下解決方案，WPF需要重新編譯才能識別。

結尾

今天不早了，寫完這篇博客已經23:30了，明天有空再接著更新。