微信公眾號：Dotnet9，網站：Dotnet9，問題或建議：請網站留言，
如果對您有所幫助：歡迎贊賞，
C# WPF 一個設計界面
今天正月初三，大家在家呆著挺好，不要忘了自我充電，
武漢人民加油，今早又有噩耗，24號（8號）一路走好，
閱讀導航
- 本文背景
- 代碼實作
- 本文參考
- 原始碼
1. 本文背景
一個不錯的界面設計
2. 代碼實作
使用 .NET Framework 4.8 創建名為 “Dashboard1” 的WPF模板專案，添加3個Nuget庫：MaterialDesignThemes.3.1.0-ci981、MaterialDesignColors.1.2.3-ci981和ModernUICharts.WPF.Beta.0.9.1，ModernUICharts 庫用于繪制統計圖，此庫沒有 .NET CORE 版本，所以專案是創建的 .NET Framework 版本，
解決方案主要檔案目錄組織結構：
- Dashboard1
- App.xaml
- MainWindow.xaml
- MainWindow.xaml.cs
2.1 引入樣式
檔案【App.xaml】，在 StartupUri 中設定啟動的視圖【MainWindow.xaml】，并在【Application.Resources】節點增加 MaterialDesignThemes庫的樣式檔案：
<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>
2.2 演示表單
檔案【MainWindow.xaml】，布局代碼、統計圖MVVM系結代碼都在此檔案中，原始碼如下：
<Window x:Class="Dashboard1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:MetroChart="clr-namespace:De.TorstenMandelkow.MetroChart;assembly=De.TorstenMandelkow.MetroChart"
mc:Ignorable="d" Height="600" Width="1024" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowStyle="None">
<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>
視窗布局代碼也不多，就是布局和資料系結，下面是后臺代碼：檔案【MainWindow.xaml.cs】，ViewModel系結、關閉表單、表單移動等事件處理，因為是演示事例，所以寫的簡單，
using System.Collections.Generic;
using System.Windows;
using System.Windows.Input;
namespace Dashboard1
{
/// <summary>
/// MainWindow.xaml的邏輯互動
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
Consumo consumo = new Consumo();
DataContext = new ConsumoViewModel(consumo);
}
private void ButtonFechar_Click(object sender, RoutedEventArgs e)
{
Application.Current.Shutdown();
}
private void GridBarraTitle_MouseDown(object sender, MouseButtonEventArgs e)
{
DragMove();
}
}
internal class ConsumoViewModel
{
public List<Consumo> Consumo { get; private set; }
public ConsumoViewModel(Consumo consumo)
{
Consumo = new List<Consumo>();
Consumo.Add(consumo);
}
}
internal class Consumo
{
public string Title { get; private set; }
public int Percent { get; private set; }
public Consumo()
{
Title = "電量消耗";
Percent = CalcularPercent();
}
private int CalcularPercent()
{
return 47; //消費百分比的計算
}
}
}
3.本文參考
- 視頻一：C# WPF Material Design UI: Dashboard，配套原始碼：Dashboard1，
- C# WPF開源控制元件庫《MaterialDesignInXAML》
4.原始碼
演示代碼已全部貼上，另可參考原作者配套視頻及原始碼學習，見【3.本文參考】
可運行Demo下載
除非注明，文章均由 Dotnet9 整理發布，歡迎轉載，
轉載請注明本文地址：https://dotnet9.com/7806.html
歡迎掃描下方二維碼關注 Dotnet9 的微信公眾號，本站會及時推送最新技術文章
時間如流水，只能流去不流回！
點擊《【閱讀原文】》，本站還有更多技術類文章等著您哦！！！
此刻順便為我點個《【再看】》可好？
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/8198.html
標籤：WPF