C# WPF 一个设计界面

微信公众号：Dotnet9，网站：Dotnet9，问题或建议：请网站留言，
如果对您有所帮助：欢迎赞赏。

C# WPF 一个设计界面

今天正月初三，大家在家呆着挺好，不要忘了自我充电。

武汉人民加油，今早又有噩耗，24号（8号）一路走好。

阅读导航

1. 本文背景
2. 代码实现
3. 本文参考
4. 源码

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库的样式文件：

2.2 演示窗体

文件【MainWindow.xaml】，布局代码、统计图MVVM绑定代码都在此文件中，源码如下：

窗口布局代码也不多，就是布局和数据绑定，下面是后台代码：文件【MainWindow.xaml.cs】，ViewModel绑定、关闭窗体、窗体移动等事件处理，因为是演示事例，所以写的简单。

using System.Collections.Generic;
using System.Windows;
using System.Windows.Input;

namespace Dashboard1
{
    /// 

    /// MainWindow.xaml的逻辑交互
    /// 
    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 { get; private set; }

        public ConsumoViewModel(Consumo consumo)
        {
            Consumo = new List();
            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.本文参考

1. 视频一：C# WPF Material Design UI: Dashboard，配套源码：Dashboard1。
2. C# WPF开源控件库《MaterialDesignInXAML》

4.源码

演示代码已全部贴上，另可参考原作者配套视频及源码学习，见【3.本文参考】

可运行Demo下载

---

除非注明，文章均由 Dotnet9 整理发布，欢迎转载。

转载请注明本文地址：https://dotnet9.com/7806.html

欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章

---

时间如流水，只能流去不流回！

点击《【阅读原文】》，本站还有更多技术类文章等着您哦！！！

此刻顺便为我点个《【再看】》可好？