【愚公系列】2023年10月 WPF+上位机+工业互联 005-常用框架页面布局案例

已于 2023-11-02 23:54:15 修改
阅读量4.6w 收藏 16
点赞数 9
分类专栏： 朝夕教育-WPF+上位机+工业互联 文章标签： wpf
于 2021-09-08 01:18:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aa2528877987/article/details/120170267
版权
本文介绍了WPF中常用的后台框架模板，如MaterialDesignInXamlToolkit、MahApps.Metro和DevExpress WPF Controls，它们为开发者提供了现代化UI和快速构建应用的工具。文章通过实际效果图和源码展示了如何利用这些框架手写后台模板，同时表达了对读者的感谢，并邀请读者支持创作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述

🏆 作者简介，愚公搬代码
🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，阿里云专家博主，腾讯云优秀博主，掘金优秀博主，51CTO博客专家等。
🏆《近期荣誉》：2022年CSDN博客之星TOP2，2022年华为云十佳博主等。
🏆《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

文章目录

🚀前言

后台框架模板是一种基于特定技术栈及架构思路开发的、可用于快速搭建后台系统的模板。它提供了一系列预定义的功能、UI样式和组件，可以作为开发者快速搭建后台系统的起点。通常情况下，后台框架模板会包含以下组件：用户管理、权限管理、数据管理、统计分析、日志处理等。常见的后台框架模板包括Laravel Admin、Ant Design Pro、vue-element-admin等。

WPF是一种Microsoft .NET框架的应用程序开发技术，它提供了一种基于 XAML 语言的创新性的用户界面体验。在WPF上开发管理系统，可以采用MVVM等模式进行设计。而针对WPF管理系统开发，也有一些后台框架模板可以参考。以下是几个常见的WPF管理系统后台框架模板：

  1. MaterialDesignInXamlToolkit：这是一个开源的WPF UI框架，提供了现代化的UI元素及控件，可以用于快速构建美观的应用程序界面。

  2. MahApps.Metro：这是一个WPF UI框架，提供了许多现代化的UI样式及控件，可以用于快速构建美观的应用程序界面，同时对于响应式布局也有较好的支持。

  3. DevExpress WPF Controls：这是一个商业级别的WPF UI框架，提供了许多内置的UI样式、控件及工具，可以用于构建高性能、美观的应用程序界面。

这些框架模板都提供了一些基本的UI样式、控件、模板和MVVM设计模式等工具，可以帮助开发者快速搭建WPF管理系统。

本文主要是用到前面知识手写后台框架模板：

🚀一、常用框架页面布局案例

🔎1.实际效果图

在这里插入图片描述

🔎2.源码

<Window x:Class="Zhaoxi.AppLayout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Zhaoxi.AppLayout"
        mc:Ignorable="d" FontFamily="Microsoft YaHei" FontWeight="ExtraLight"
        Title="MainWindow" Height="650" Width="1100"
        WindowStyle="None" AllowsTransparency="True" WindowStartupLocation="CenterScreen" Background="Transparent">
    <Border Background="#F7F9FA" CornerRadius="5" Margin="5" MouseLeftButtonDown="WinMove_ButtonDown">
        <Border.Effect>
            <DropShadowEffect BlurRadius="10" ShadowDepth="0" Direction="0" Opacity="0.3" Color="Gray"/>
        </Border.Effect>

        <DockPanel>
            <StackPanel DockPanel.Dock="Left" Background="White" Width="220" >
                <TextBlock Text="Food Delivery" FontSize="20" FontWeight="Bold"
                           HorizontalAlignment="Center" Margin="0,30"/>
                <Border Height="30" BorderBrush="Chocolate" BorderThickness="2,0,0,0" Margin="10">
                    <TextBlock Text="Dashboard" VerticalAlignment="Center" HorizontalAlignment="Center"
                               FontSize="16" Foreground="Chocolate"/>
                </Border>
                <Border Height="30"  Margin="10">
                    <TextBlock Text="Restaurants" VerticalAlignment="Center" HorizontalAlignment="Center"
                               FontSize="16" Foreground="#444"/>
                </Border>
                <Border Height="30"  Margin="10">
                    <TextBlock Text="Customers" VerticalAlignment="Center" HorizontalAlignment="Center"
                               FontSize="16" Foreground="#444"/>
                </Border>
            </StackPanel>

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="80"/>
                    <RowDefinition Height="140"/>
                </Grid.RowDefinitions>

                <Grid Background="White" Margin="1,0,0,0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="&#xe745;" FontFamily="./Assets/Fonts/#iconfont" FontSize="26" Margin="20,0"
                               Foreground="#777" VerticalAlignment="Center" HorizontalAlignment="Center"/>

                    <Border Grid.Column="1" Margin="0,5" BorderBrush="#CCC" BorderThickness="1" CornerRadius="20">
                        <Grid>
                            <Border Width="20" Height="20" Background="#EEE" CornerRadius="10" HorizontalAlignment="Left" Margin="10,0,0,0"/>
                            <TextBlock Text="Search for Restaurants and Cusiones" VerticalAlignment="Center" Margin="40,0,0,0" Foreground="#999"/>
                        </Grid>
                    </Border>

                    <TextBlock Text="&#xe637;" FontFamily="./Assets/Fonts/#iconfont" Grid.Column="2" 
                               VerticalAlignment="Center" HorizontalAlignment="Center" Margin="20,0"
                               FontSize="26" Foreground="#777"/>

                    <StackPanel Grid.Column="3" Orientation="Horizontal" Margin="0,0,10,0">
                        <Border Width="35" Height="35" Background="#EEE" CornerRadius="17" Margin="10,0"/>
                        <TextBlock Text="Adminstrator" VerticalAlignment="Center"/>
                    </StackPanel>
                </Grid>

                <Grid HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Row="1" Width="280" Margin="20,0,0,0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Border BorderBrush="#EEE" BorderThickness="0,0,0,1" Grid.ColumnSpan="3"/>
                    <TextBlock Text="Today" Foreground="#444" FontWeight="Bold" Margin="0,15"/>
                    <TextBlock Text="Today" Grid.Column="1" TextAlignment="Center" Foreground="#999" Margin="0,15"/>
                    <TextBlock Text="Today" Grid.Column="2" TextAlignment="Right" Foreground="#999" Margin="0,15"/>
                </Grid>

                <UniformGrid Grid.Row="2" Columns="5" Margin="20">
                    <Border Background="White" CornerRadius="5" Padding="5" Margin="5">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition Height="2*"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="Total Sales" Foreground="#999" VerticalAlignment="Center"/>
                            <TextBlock Text="2,00,000" Grid.Row="1" VerticalAlignment="Center" FontSize="14" FontWeight="Bold"/>
                            <TextBlock Text="+5%" Foreground="Green" Grid.Row="2" VerticalAlignment="Center"/>
                            <TextBlock Text="Details" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Row="2"/>
                        </Grid>
                    </Border>
                    <Border Background="White" CornerRadius="5" Padding="5" Margin="5">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition Height="2*"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="Total Sales" Foreground="#999" VerticalAlignment="Center"/>
                            <TextBlock Text="2,00,000" Grid.Row="1" VerticalAlignment="Center" FontSize="14" FontWeight="Bold"/>
                            <TextBlock Text="+5%" Foreground="Green" Grid.Row="2" VerticalAlignment="Center"/>
                            <TextBlock Text="Details" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Row="2"/>
                        </Grid>
                    </Border>
                    <Border Background="White" CornerRadius="5" Padding="5" Margin="5">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition Height="2*"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="Total Sales" Foreground="#999" VerticalAlignment="Center"/>
                            <TextBlock Text="2,00,000" Grid.Row="1" VerticalAlignment="Center" FontSize="14" FontWeight="Bold"/>
                            <TextBlock Text="+5%" Foreground="Green" Grid.Row="2" VerticalAlignment="Center"/>
                            <TextBlock Text="Details" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Row="2"/>
                        </Grid>
                    </Border>
                    <Border Background="White" CornerRadius="5" Padding="5" Margin="5">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition Height="2*"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="Total Sales" Foreground="#999" VerticalAlignment="Center"/>
                            <TextBlock Text="2,00,000" Grid.Row="1" VerticalAlignment="Center" FontSize="14" FontWeight="Bold"/>
                            <TextBlock Text="+5%" Foreground="Green" Grid.Row="2" VerticalAlignment="Center"/>
                            <TextBlock Text="Details" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Row="2"/>
                        </Grid>
                    </Border>
                    <Border Background="White" CornerRadius="5" Padding="5" Margin="5">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition Height="2*"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="Total Sales" Foreground="#999" VerticalAlignment="Center"/>
                            <TextBlock Text="2,00,000" Grid.Row="1" VerticalAlignment="Center" FontSize="14" FontWeight="Bold"/>
                            <TextBlock Text="+5%" Foreground="Green" Grid.Row="2" VerticalAlignment="Center"/>
                            <TextBlock Text="Details" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Row="2"/>
                        </Grid>
                    </Border>
                </UniformGrid>
            </Grid>
        </DockPanel>
    </Border>
</Window>

🚀感谢：给读者的一封信

亲爱的读者，

我在这篇文章中投入了大量的心血和时间，希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验，我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助，我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担，但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章，是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命，也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作，请扫描下面二维码，您的支持将不胜感激。同时，如果您有任何反馈或建议，也欢迎与我分享。

在这里插入图片描述

再次感谢您的阅读和支持！

最诚挚的问候， “愚公搬代码”

从 WPF 到 MAUI：跨平台 UI 开发的进化之路
candy的博客
03-28 737
WPF 到 MAUI 的发展，体现了微软在 UI 开发领域的不断创新和进步。WPF 为 Windows 桌面应用开发提供了强大的支持，而 MAUI 则满足了开发者对于跨平台应用开发的需求。两者之间既有继承关系，又存在明显的技术差异。对于 WPF 开发者来说，通过学习和实践，可以顺利过渡到 MAUI 开发，利用 MAUI 的跨平台优势，为不同的平台创建高质量的应用程序。随着技术的不断发展，MAUI 有望成为跨平台 UI 开发的主流框架。
【朝夕教育】2023年07月 WPF+上位机+工业互联 001-桌面应用开发思维转变
微软MVP Eleven
07-08 1万+
桌面应用程序是指在个人计算机（PC）或笔记本电脑（Laptop）等设备本地运行的应用程序，与网络或云服务无关。这些应用程序通常需要在操作系统上安装并占用计算机的一部分资源。具体桌面应用程序的框架有很多种，以下是一些常见的框架：Java框架：Java桌面应用程序可以使用JavaFX或Swing框架。JavaFX提供了一个现代化的图形用户界面和矢量图形操作，而Swing则提供了一个传统的图形用户界面和大量的组件类库。.NET框架：.NET桌面应用程序主要使用Windows Forms或WPF框架。
WPF 上位机开发模板
最新发布
让每一个想学习编程的人，都能学会，都能看懂，看了都有收获!
04-26 1168
WPF上位机开发模板，集成了基础操作菜单、海康视觉实时图像界面、串口通讯、网口通讯、主流PLC通讯、数据存储、图片存储、参数配置、权限管理、第三方webapi接口接入、数据追溯与查询等功能。
【愚公系列】2023年10月 WPF+上位机+工业互联 002-WPF布局控件
时光隧道
09-07 4万+
WPF布局是指在Windows Presentation Foundation（WPF）中定义和管理用户界面元素的方式。WPF提供了不同类型的布局容器，如Grid、StackPanel、WrapPanel和DockPanel等，使得开发人员能够轻松地创建灵活和可扩展的用户界面。WPF布局可通过XAML标记语言或代码实现。它提供了一种分离界面和逻辑的方式，使得开发人员能够更容易地管理用户界面的外观和行为。控件功能Canvas。
【愚公系列】2023年10月 WPF+上位机+工业互联 032-图形3D与事件（基础概念和3D视口）
热门推荐
时光隧道
09-22 4万+
3D坐标系统是一个用于描述三维物体位置和方向的数学模型。它由三个坐标轴组成：x，y和z，每个轴对应一个数值来表示物体在该轴上的位置。这三个数值组成了一个三元组，表示物体在三维空间中的位置。在三维坐标系统中，物体的位置可以用一个点来表示。这个点的坐标由三个数值组成，分别表示物体在x，y和z轴上的位置。例如，(0,0,0)表示物体的位置在坐标原点，(1,2,3)表示物体的位置在x轴上为1，y轴上为2，z轴上为3。三维坐标系统还可以用于描述物体的方向。例如，一个向量可以表示从一个点指向另一个点的方向。
【愚公系列】2023年12月 WPF+上位机+工业互联 072-MVVM模式之动作管理器ActionManager
时光隧道
10-14 4万+
行为管理器是一种计算机程序或系统，用于监视和控制计算机系统用户的行为，以确保他们的行为符合组织的政策和规定。该系统可以监视用户的计算机使用情况，如网站访问、文件共享和打印任务等，并向管理员提供报告。行为管理器可以帮助组织保持数据安全，减少员工滥用计算机系统的风险，并确保员工遵守公司规定。此外，它也可以帮助管理员更好地了解公司员工的计算机使用情况，以便更好地管理他们的工作和提高生产力。
【朝夕教育】2023年07月 WPF+上位机+工业互联 011-依赖属性、属性变化、属性转换、属性继承
微软MVP Eleven
07-21 244
WPF中的属性类型有：Dependency Property（依赖属性）：用于实现数据绑定和样式，可以被继承和覆盖，支持属性继承和值转换。Attached Property（附加属性）：可以用于指定子元素的布局和行为，可以被继承和覆盖，不支持属性继承和值转换。CLR Property（CLR属性）：常规的.NET属性，可以用于实现数据绑定和代码逻辑，不支持属性继承和值转换，也不支持附加属性。Routed Event（路由事件）：用于处理事件的传递和处理，支持事件路由、事件冒泡和事件隧道。
【愚公系列】2023年12月 WPF+上位机+工业互联 074-UI动画特效案例
时光隧道
09-02 2万+
以下是一些常见的 UI 动画特效案例：过度效果：当用户从一个界面切换到另一个界面时，可以使用过度效果来使界面更加流畅和自然。例如，可以使用淡入淡出、滑动、旋转、缩放等过度效果来实现。点击效果：当用户点击某个按钮或者区域时，可以使用点击效果来增强用户的点击反馈感。例如，可以添加水波纹、边框变化等效果来提醒用户已经点击了该区域。滚动效果：当用户滑动一个页面时，可以使用滚动效果来增强用户的交互感。例如，可以使用弹性效果、惯性滚动效果、图片放大效果等效果来吸引用户的注意力，提高用户体验。动态效果：当用户进行某些操作
【愚公系列】2023年10月 WPF+上位机+工业互联 010-模板选择器
时光隧道
07-07 6631
WPF中的模板（template）是一种定义控件外观和行为的方式。模板包含控件结构和样式，允许您自定义控件的外观和行为。模板可以包含多个元素，例如文本、图像、图形、动画等。模板通常使用XAML（可扩展应用程序标记语言）编写，并可以在应用程序中定义和重用。通过使用模板，您可以创建自定义控件，或者修改现有控件的外观和行为，以满足特定需求。WPF中模板处理包括以下步骤：定义模板：在XAML中定义模板，包括控件和其他元素的结构、样式和行为。应用模板：将模板应用到控件样式中，使用控件的Template属性。
【愚公系列】2023年10月 WPF+上位机+工业互联 036-图形3D与事件（材质）
时光隧道
07-30 1万+
在3D世界中，材质是指一种物体的表面质感和外观特征的属性。它定义了物体的颜色、纹理、光泽、透明度、反射率等视觉特征，使得物体看起来更加真实且具有质感。在三维建模软件中，用户可以选择不同的材质来为建模的物体添加不同的表面属性，从而实现更加逼真的渲染效果。常见的材质类型包括漫反射材质、镜面反射材质、玻璃材质、金属材质等。
【愚公系列】2023年10月 WPF+上位机+工业互联 008-子项容器模板
时光隧道
07-05 6499
WPF中的模板（template）是一种定义控件外观和行为的方式。模板包含控件结构和样式，允许您自定义控件的外观和行为。模板可以包含多个元素，例如文本、图像、图形、动画等。模板通常使用XAML（可扩展应用程序标记语言）编写，并可以在应用程序中定义和重用。通过使用模板，您可以创建自定义控件，或者修改现有控件的外观和行为，以满足特定需求。WPF中模板处理包括以下步骤：定义模板：在XAML中定义模板，包括控件和其他元素的结构、样式和行为。应用模板：将模板应用到控件样式中，使用控件的Template属性。
wpf做的运动控制器上位机
10-12
wpf做的运动控制器上位机
【愚公系列】2023年10月 WPF+上位机+工业互联 004-特殊容器
时光隧道
09-07 4万+
WPF布局是指在Windows Presentation Foundation（WPF）中定义和管理用户界面元素的方式。WPF提供了不同类型的布局容器，如Grid、StackPanel、WrapPanel和DockPanel等，使得开发人员能够轻松地创建灵活和可扩展的用户界面。WPF布局可通过XAML标记语言或代码实现。它提供了一种分离界面和逻辑的方式，使得开发人员能够更容易地管理用户界面的外观和行为。控件功能Canvas。
【朝夕教育】2023年09月 WPF+上位机+工业互联 070-MVVM模式中CommandManager、预置命令、RouteCommand、RoutedUICommand
微软MVP Eleven
09-20 225
CommandManager是一个Unity内置的工具，用于管理和执行命令。它可以用来注册、执行和撤销命令，以及在需要时保存和恢复场景状态。CommandManager还可以与Unity的序列化系统结合使用，以便将命令序列化为文件，使其能够在场景之间传输和共享。预置命令是CommandManager中的一种特殊类型的命令，它被保存在项目中作为资源。预置命令可以方便地用于执行常见的、重复的任务，而无需编写大量的自定义代码。例如，一个预置命令可以用于设置场景中的一些常见属性，如摄像机位置、光照强度等。
【朝夕教育】2023年08月 WPF+上位机+工业互联 021-图形控件
微软MVP Eleven
08-03 428
图形控件是界面设计中的基本元素之一，它是指一组用于显示和组织信息的可视化组件，如按钮、文本框、滑块、下拉框、复选框等，用户可以通过它们的交互操作来完成任务。图形控件通常以图标或字符的形式呈现出来，便于用户理解和操作。在现代GUI界面设计中，图形控件是构建用户友好、可操作的界面的必要组成部分。WPF中的图形控件主要有：1、Rectangle（矩形）：用于绘制矩形形状，可设置宽度、高度和圆角半径等属性。2、Ellipse（椭圆）：用于绘制椭圆形状，可设置宽度和高度属性。
【朝夕教育】2023年07月 WPF+上位机+工业互联 002-WPF布局控件
微软MVP Eleven
07-09 1万+
WPF布局是指在Windows Presentation Foundation（WPF）中定义和管理用户界面元素的方式。WPF提供了不同类型的布局容器，如Grid、StackPanel、WrapPanel和DockPanel等，使得开发人员能够轻松地创建灵活和可扩展的用户界面。WPF布局可通过XAML标记语言或代码实现。它提供了一种分离界面和逻辑的方式，使得开发人员能够更容易地管理用户界面的外观和行为。以下是WPF布局控件的全面列表：这边布局只是讲几个案例，具体布局使用可以看WPF控件专题WPF无边框设计是
【朝夕教育】2023年09月 WPF+上位机+工业互联 071-MVVM模式之窗口管理器WindowManager
微软MVP Eleven
09-20 267
WPF中的窗口管理器是一种框架，它负责管理WPF应用程序中的窗口。它提供了一组API，用于创建、打开、关闭和管理窗口。窗口管理器可以帮助应用程序实现更好的用户体验，使用户能够轻松地管理和导航窗口。WPF中的窗口管理器主要有以下特点：窗口的层次结构：窗口管理器提供了一种层次结构，使得所有窗口都可以被组织成一个树形结构，使得窗口之间可以互相嵌套、包含和管理。窗口的状态管理：窗口管理器可以跟踪窗口的状态，例如打开、关闭、最大化、最小化和激活。这些状态可以被用于决定窗口的行为和外观。
【朝夕教育】2023年07月 WPF+上位机+工业互联 009-数据模板
微软MVP Eleven
07-19 211
WPF中的模板（template）是一种定义控件外观和行为的方式。模板包含控件结构和样式，允许您自定义控件的外观和行为。模板可以包含多个元素，例如文本、图像、图形、动画等。模板通常使用XAML（可扩展应用程序标记语言）编写，并可以在应用程序中定义和重用。通过使用模板，您可以创建自定义控件，或者修改现有控件的外观和行为，以满足特定需求。WPF中模板处理包括以下步骤：定义模板：在XAML中定义模板，包括控件和其他元素的结构、样式和行为。应用模板：将模板应用到控件样式中，使用控件的Template属性。
【朝夕教育】2023年09月 WPF+上位机+工业互联 069-MVVM模式中的命令
微软MVP Eleven
09-19 194
命令是计算机操作系统中用户输入的指令，它们告诉计算机要执行的操作和任务。命令可以通过命令行界面或图形用户界面（GUI）输入并执行。在计算机领域，命令可以用于许多不同的任务，包括文件操作、网络连接、系统管理和安全等。一些常见的命令包括cd（改变目录）、ls（列出文件）、mkdir（创建目录）和rm（删除文件）。序号描述1播放媒体2暂停播放媒体3停止播放媒体4切换播放媒体和暂停播放媒体5增加媒体音量6减少媒体音量7静音媒体音量8取消静音媒体音量9开/关媒体静音10。
wpf 上位机黑白简约界面
03-29
### 关于WPF上位机黑白简约风格UI设计 在WPF上位机开发中，为了实现黑白简约风格的UI设计，可以利用现有的UI库（如Telerik UI for WPF[^1] 和 MaterialDesign[^2]）或者自定义样式来满足需求。以下是具体的设计思路和技术要点： #### 1. 使用MaterialDesign库实现简约风格 MaterialDesign 是一种现代设计语言，强调清晰的层次结构和简洁的视觉效果。可以通过引入 `MaterialDesignThemes` NuGet包，在项目中快速启用该风格。 安装完成后，可以在 App.xaml 中加载主题资源文件： ```xml <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:,,,/MaterialDesignIcons.Wpf;component/Themes/materialdesignicons.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> ``` 通过调整颜色方案为黑色背景和白色文字，即可轻松实现黑白配色的效果。 #### 2. 自定义控件样式 如果希望完全控制界面的外观而不依赖第三方库，则需要手动创建样式并应用于各个控件。例如，以下是一个简单的按钮样式的定义： ```xml <Style TargetType="Button"> <Setter Property="Background" Value="#FF37474F"/> <Setter Property="Foreground" Value="White"/> <Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> ``` 上述代码实现了深灰色背景、白色字体的按钮样式，适用于黑白简约风的应用场景。 #### 3. 结合实际案例学习 对于初学者而言，《超级详细的C# WPF上位机温湿度读取案例》[^3] 提供了一个完整的实践机会。虽然此教程主要关注功能实现，但它也展示了如何合理布局控件以及优化用户体验。可以根据其中的理念进一步探索黑白简约风格的具体实现方式。 另外，由于 C# WPF 的强大数据绑定能力和 MVVM 支持[^4]，开发者能够更方便地分离逻辑层与表现层，从而专注于打造美观大方的用户界面。 #### 4. 调整布局策略 参考《【愚公系列】2023年10月 WPF+上位机+工业互联》[^5] 所提到的内容可知，良好的布局规划同样至关重要。适当运用 Margin、HorizontalAlignment 和 VerticalAlignment 属性可以使各组件排列整齐有序；而借助 Grid 或 DockPanel 等容器类控件则有助于构建灵活多变的整体框架。 --- ### 示例代码片段 下面展示了一段基于黑白简约风格的基础窗口 XAML 定义： ```xml <Window x:Class="MinimalistApp.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Black & White Minimalist Design" Height="450" Width="800" Background="#FF1E1E1E"> <Grid> <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="20"> <TextBlock Text="Welcome to the Minimalist Interface!" FontSize="24" Foreground="White"/> <Button Content="Click Me" Style="{StaticResource CustomButtonStyle}" Padding="20,10" FontWeight="Bold"/> </StackPanel> </Grid> </Window> ``` 在此基础上继续扩展其他功能模块即可形成最终成品。 ---
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

愚公搬代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值