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>
修改后，未编译时代码显示依然报错，重新构建(编译)一下代码就可以了。