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>

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