微信公眾號：Dotnet9，網站：Dotnet9，問題或建議：請網站留言，
如果對您有所幫助：歡迎贊賞，
簡易音樂播放器主界面設計 - .NET CORE(C#) WPF開發
閱讀導航
- 本文背景
- 代碼實作
- 本文參考
- 原始碼
1. 本文背景
繼續 MaterialDesignThemes 開源控制元件庫學習，尤其是它的圖示組件，本文設計的音樂播放器主界面設計使用該組件較多，
2. 代碼實作
使用 .NET CORE 3.1 創建名為 “Player” 的WPF模板專案，添加1個Nuget庫：MaterialDesignThemes.3.1.0-ci981，
解決方案主要檔案目錄組織結構：
- Player
- App.xaml
- MainWindow.xaml
- MainWindow.xaml.cs
2.1 App.xaml檔案引入樣式
檔案【App.xaml】，在 StartupUri 中設定啟動的視圖【MainWindow.xaml】，并在【Application.Resources】節點增加 MaterialDesignThemes庫的樣式檔案：
<Application x:Class="Player.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Player"
StartupUri="MainWindow.xaml">
<Application.Resources>
<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.Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
2.2 MainWindow.xaml音樂播放器主表單
檔案【MainWindow.xaml】，設計主界面，原始碼如下：
<Window x:Class="Player.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
MouseLeftButtonDown="MoveWindow_MouseLeftButtonDown"
Title="播放器" Height="500" Width="300" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowStyle="None" Foreground="LightSteelBlue">
<Window.Resources>
<ResourceDictionary>
<Style x:Key="ScrollThumbs" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid x:Name="Grid">
<Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Fill="Transparent" />
<Border x:Name="Rectangle1" CornerRadius="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Background="{TemplateBinding Background}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Tag" Value=https://www.cnblogs.com/Dotnet9-com/p/"Horizontal">
</style>
簡單說明：
- 界面中按鈕使用開源控制元件庫MD的【PackIcon】組件，統一風格使用了自定義前景色【Foreground】，
- 串列控制元件【ListView】用于展示音樂播放串列，方便演示，每一項寫死的，實際使用需要封裝成模板，方便MVVM資料系結，
- 串列控制元件【ListView】的豎直滾動條樣式進行了修改，可看資源定義，改為了整體和黑色背景比較搭配的白色，
下面是后臺代碼：檔案【MainWindow.xaml.cs】，關閉表單、表單移動、上一首及下一首按鈕簡單點擊等事件處理，因為是演示事例，所以寫的簡單，
using System.Windows;
using System.Windows.Input;
namespace Player
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void ButtonFechar_Click(object sender, RoutedEventArgs e)
{
Application.Current.Shutdown();
}
private void Proxima_Click(object sender, RoutedEventArgs e)
{
if (c1.Offset >= 0)
{
c1.Offset -= 0.01;
c2.Offset -= 0.01;
}
else
{
c1.Offset = 1;
c2.Offset = 0.89;
}
}
private void Anterior_Click(object sender, RoutedEventArgs e)
{
if (c2.Offset <= 1)
{
c1.Offset += 0.01;
c2.Offset += 0.01;
}
else
{
c1.Offset = 0.11;
c2.Offset = 0;
}
}
private void MoveWindow_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
DragMove();
}
}
}
3.本文參考
- 視頻一：C# WPF Design UI: Music Player，配套原始碼：Player1，
- C# WPF開源控制元件庫《MaterialDesignInXAML》
4.原始碼
演示代碼已全部奉上，為了方便演示，代碼中的圖片使用本站外鏈，代碼可直接拷貝并按代碼結構組織編譯即可運行，
可運行Demo點擊即可下載： 【音樂播放器】，
除非注明，文章均由 Dotnet9 整理發布，歡迎轉載，
轉載請注明本文地址：https://dotnet9.com/7981.html
歡迎掃描下方二維碼關注 Dotnet9 的微信公眾號，本站會及時推送最新技術文章
時間如流水，只能流去不流回！
點擊《【閱讀原文】》，本站還有更多技術類文章等著您哦！！！
此刻順便為我點個《【再看】》可好？
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/8231.html
標籤：WPF
下一篇：EF CORE 操作大表的方案