WPF【11_3】WPF实战-重构与美化(可复用的UI组件)

11-7 【UI】美化主页面

04:40

既然要使用到图片,肯定要把图片设为静态资源保存到项目中。图片复制到VS项目中后,右击图片 - Properties,找到 Build Action: Resource ,这个图片就可以被WPF程序打包了。

UI重新布局:

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="240"/>

<ColumnDefinition Width="280"/>

<ColumnDefinition />

</Grid.ColumnDefinitions>

<!--header-->

<Border Grid.ColumnSpan="3" Background="#7f3089">

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

<Image Height="90" Margin="5" Source="/Images/logo.jpg"/>

<TextBlock Text="WPF客户管理系统" FontSize="40" VerticalAlignment="Center" Foreground="#ffffff"/>

</StackPanel>

</Border>

<StackPanel Grid.Row="1" Grid.Column="0">

<Button Content="添加客户"/>

<ListView />

</StackPanel>

<StackPanel Grid.Row="1" Grid.Column="1">

<TextBlock Text="姓名" Margin="10 10 10 0"/>

<TextBox Margin="10" />

<TextBlock Text="身份证" Margin="10 10 10 0"/>

<TextBox Margin="10" />

<TextBlock Text="地址" Margin="10 10 10 0"/>

<TextBox Margin="10" />

<Button Content="保存" Margin="10 10 10 30" VerticalAlignment="Bottom" HorizontalAlignment="Left" />

</StackPanel>

<StackPanel Grid.Row="1" Grid.Column="2">

<ListView />

<TextBlock Text="添加新预约" />

<DatePicker Margin="10" />

<Button Content="预约" />

</StackPanel>

</Grid>

11-8 【UI】组件化布局

如何把上节的 <!--header--> 提取出来,通过 UserControl 封装为可复用的UI组件。

在文件夹""右击 - Add - New Item ,左侧选择 WPF - User Control (WPF) ,命名为:HeaderControl

--\Controls\HeaderControl.xaml

<UserControl x:Class="WPF_CMS.Controls.HeaderControl"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:local="clr-namespace:WPF_CMS.Controls"

mc:Ignorable="d"

d:DesignHeight="450" d:DesignWidth="800">

<Border Background="#7f3089">

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

<Image Height="90" Margin="5" Source="/Images/logo.jpg"/>

<TextBlock Text="WPF客户管理系统" FontSize="40" VerticalAlignment="Center" Foreground="#ffffff"/>

</StackPanel>

</Border>

</UserControl>

--\WPF_CMS\MainWindow.xaml

<Window x:Class="WPF_CMS.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:WPF_CMS"

xmlns:controls="clr-namespace:WPF_CMS.Controls"

mc:Ignorable="d"

Title="MainWindow" Height="450" Width="800">

<Grid>

............

<!--header-->

<controls:HeaderControl Grid.ColumnSpan="3"/>

............

</Grid>

</Window>

修改后,未编译时代码显示依然报错,重新构建(编译)一下代码就可以了。

相关推荐
李少兄20 小时前
记一次 Spring Boot 项目中 Redis 工具类的重构实践
spring boot·redis·重构
de之梦-御风20 小时前
【源码项目】简单实现的WPF浏览器,有兴趣的可以自己扩展(带源码)
wpf
c#上位机20 小时前
wpf之数据类型转换
c#·wpf·mvvm
清风徐来Groot1 天前
WPF之布局
wpf
张人玉1 天前
WPF 控件速查 PDF 笔记(可直接落地版)
笔记·microsoft·wpf
ALex_zry1 天前
构建通用并发下载工具:用Golang重构wget脚本的实践分享
开发语言·重构·golang
“抚琴”的人1 天前
C# 取消机制(CancellationTokenSource/CancellationToken)
开发语言·c#·wpf·1024程序员节·取消机制
紫薯馍馍1 天前
Adobe Photoshop 2025(Ps2025)下载安装教程
ui·adobe·photoshop
数字冰雹1 天前
数字孪生技术 重构 智能仓储新生态
人工智能·重构
兰亭妙微2 天前
2026年UX/UI五大趋势:AI、AR与包容性设计将重新定义用户体验
开发语言·ui·1024程序员节·界面设计·设计趋势