WPF【11_10】WPF实战-重构与美化(配置Material UI框架)

11-16 【UI美化】配置Material UI框架

三种比较主流的 UI 设计规范，分别是：
苹果的扁平化 UI 设计、安卓或者说谷歌 的 Material Design 以及微软的 Metro 风格。

这三种风格都极具特色，不过我们接下来将会使用的是 Material Design 。在 WPF 中有一个基于 Material UI 风格的开源框架，我们可以直接使用。
“WPF_CMS”项目右击 - Manage NuGet Packages... - 搜索“MaterialDesign”找到：MaterialDesignThemes ，安装完之后，找到文档页面看看，找到：
Getting Started
Checkout the Super Quick Start 【点击】这里就是要处理的安装步骤了，接下来编辑 App.xaml 

拷贝下面到 <Application.Resources> 标签内：
<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
        <materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepPurple" SecondaryColor="Lime" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

此时，VS会报错，点击“更改意义(波浪线提示)”会自动加入：
<Application …………
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

运行项目，UI 一下子就变了。我们的按钮变了，字体也变了，甚至是我们在点击切换客户的时候，客户列表也能产生 Material UI 特有的波纹效果了。

接下来我们学习如何使用这个 UI 框架来美化用户界面。
回到项目我们首先来修改主页的 UI ，打开 MainWindow.xaml 先来修改 Window 元素的属性，首先是主页背景变透明
<Window x:Class="WPF_CMS.MainWindow"
    …………
    xmlns:MaterialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    mc:Ignorable="d"
    Title="CMS客户管理系统" Height="600" Width="900" Background="Transparent" AllowsTransparency="True" WindowStyle="None" WindowStartupLocation="CenterScreen" FontFamily="Cambria">

接下来我们需要给这个页面添加一点点底色和边框，添加边框使用 <Border> 元素，我们用 Border 把整个页面内容全部包裹起来，底色设置为白色，四个角加上圆弧形的设计，CornerRadius="30" 。

运行一下项目看看效果，页面运行起来整体效果稍微好看一点。

接下来我们来更换内容 UI ，首先我们把这个各种的按钮给它改小一点，位置稍微修理一下。
接下来处理客户信息，为了让这个内容显得更加立体我们可以选择使用 Material Design 的卡片组件，把整个客户信息都包裹起来，找到客户信息的部分第二个是 StackPanel ，使用 <MaterialDesign:Card > 这个元素。

用这个 <MaterialDesign:Card > 元素包裹整个 StackPanel ，并且把 StackPanel 的 【Grid.Row="1" Grid.Column="1"】 向上移动一个级别，程序报错没有关系，请使用 Visual Studio 的建议：添加 Material Design 的主题命名空间。

回到 card 元素继续补充一点属性 【Width="250" Height="440" Margin="10"】 
好了，运行一下代码我们看看效果，可以看到在加上 card 元素以后我们的客户信息界面变得立体了。

同样的方法我们来更新一下客户预约的 UI ，…… 客户详情页面还是比较丑的，那么我们加上一张贴图吧。
……客户详情的 StackPanel 中我们加上一个 Border 如下：
<StackPanel >
    <Border Margin="10" CornerRadius="20" Background="#FFFFEEFA">
        <Image Source="/Images/cartoon.png" Stretch="Uniform" Height="150" />
    </Border>

添加好图片以后还要更新：姓名、身份证和地址的输入框。 Material UI 已经帮我们处理好文本框的样式了，我们直接使用就可以。
接下来我们可以删掉所有的这个 TextBox ，等会我们会利用 Material Design 来把这个文字标签和输入框整合到一起去。
更新一下姓名的 TextBox 如下：
<TextBox 
    Name="NameTextBox" 
    Margin="10" 
    Style="{StaticResource MaterialDesignOutlinedTextBox}"
    MaterialDesign:HintAssist.Hint="姓名"
    Text="{Binding SelectedCustomer.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

使用类似的方法我们来处理：身份证和住址 的 TextBox 。

11-17 【UI美化】预约日历：自定义依赖属性

首先我们来注释掉这一行预约列表，然后添加一个日历 Calendar 元素。
<Calendar Name="AppointmentCalender" Height="320" Width="300"></Calendar>

运行一下看看效果整体的效果还是不错的，使用日历可以让整个预约列表看起来更加直观、更加友好。
接下来我们希望能在日历上显示客户的预约日期，如果日历上某一天客户已经有预约了，那么这一天需要显示在日历上并且变为灰色，而且这一天不可以再进行选择。

在 WPF 中有一个内部元素叫做 BlackoutDates 可以满足我们的需求，我们可以试试看。
<Calendar Name="AppointmentCalender" Height="320" Width="300">
    <Calendar.BlackoutDates>
        <CalendarDateRange Start="3/1/2022" End="3/7/2022" />
    </Calendar.BlackoutDates>
</Calendar>

如上面的，那么 3 月 1 号到 3 月 7 号之间的日期全部都会被灰掉，无法再进行选择。

不过问题来了 WPF 中这个默认的 BlackoutDates 是不支持 MVVM 数据绑定的，也就是说我们不能通过 ViewModel 来对 BlackoutDates 进行动态的变化。
比如说我们回到代码在 Calendar 的元素中使用 BlackoutDates (如下)，
<Calendar Name="AppointmentCalender" Height="320" Width="300" BlackoutDates="{Binding Appointments, Mode=TwoWay}">
</Calendar>

那么这个时候 Visual Studio 会报错它会告诉我们 【The property "BlackoutDates" does not have an accessible setter.】

也就是说 BlackoutDates 的属性是无法更改的，它是只读的。这是微软官方给我们的解释，在得知到这个情况以后我不由得对微软产品的品控产生了怀疑。

因为
第一，从业务的角度来说微软没有任何理由把这个 BlackoutDates 设置为只读属性；
第二，这么常用的一个功能居然没有官方的解决方案来处理数据的绑定；
第三，这种情况是一个非常普遍的现象，WPF 中很多原生的组件都有这样类似的问题，无法进行 ViewModel 的绑定。比如说日历组件中的 SelectedDates 多选日期，也同样是因为这个原因无法进行数据绑定。所以难怪有人说微软东西不好用，它的产品设计不完善确实令人很头痛。

但是天无绝人之路解决的办法还是有的，我们有两种方案：
第一种也是最简单的就是对于日历组件我们可以放弃 MVVM ，直接在 View 中访问数据库，通过 View 来控制 UI 的显示，
比如在 MainWindow.cs 文件中通过 UI 调用的方式来设置 BlackoutDays ：

private void AddAppointment_Click(object sender, RoutedEventArgs e)
{
    AppointmentCalender.BlackoutDays = ……
}

但是这绝对不是我们希望的，我们还是希望能够统一使用 MVVM 的架构来处理所有的业务。

对于一个程序员来说，只要是技术层面的问题总是会有解决方案的。
还记得“9-7 【操作】依赖属性与数据处理”学到的【DependencyProperty】吗？

其实在这里我们就可以通过一个自定义的属性依赖来解决数据绑定的问题，那么有了这个方向我们实现起来就有希望了。
不过对于程序员来说除了具备问题分析能力和扎实技术水平以外，我们还需要具备另外两个辅助的能力：就是问题的搜索能力和阅读理解能力。

在实际工作中会发现有很多的代码问题在中文圈子里可能找不到答案，那么这个时候请一定要善于利用手边的各种搜索工具，不仅要能搜索中文，同样也要能进行简单的英文搜索。

搜索关键词 "WPF Blackout Dates Binding" ，一般来说我们在实际工作中所遇到的问题99% 都能在这个叫做 stackoverflow.com 的网站上得到解决的思路。这个 StackOverflow 汇集了全世界几乎所有的程序员各种稀奇古怪的问题。建议一定要学会善于利用这个网站。
https://stackoverflow.com/questions/1638128/how-to-bind-blackoutdates-in-wpf-toolkit-calendar-control

页面这里有三个答案，
其中第一条有 18 个认同，那这就代表至少有 18 个人通过这个问题解决了类似的实际问题。
不过先不要着急我们继续看看其他的答案，第二个答案有 8 个认同，而答案的第一句话 【Here is an improved version for 某某某 answer】 这是对上面第一个答案的改进，那它改进的内容是什么呢？ 
抓重点【allow to work with ObservableCollection<DateTime>】中使用 DateTime 来进行日历的绑定，那这不就正是我们需要的答案吗。

或许这个答案值得我们一试，复制代码，在根目录下创建一个新文件夹“ArrachedProperties”这里将会存放我们自定义的依赖属性，在文件夹中新建一个文件命名为 CalendarAttachedProperties.cs ，把代码一字不落全部粘贴进来。

好了我们先不要去考虑代码的正确性，只要不报错就是好代码。不过还有个小问题需要修改一下我们找到【添加 calendar.BlackoutDates.Clear();】：

private static void CalendarBindings_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
    ObservableCollection<DateTime> blackoutDates = sender as ObservableCollection<DateTime>;

    Calendar calendar = _calendars.First(c => c.Tag == blackoutDates);
    if (e.Action == NotifyCollectionChangedAction.Reset)
    {
        calendar.BlackoutDates.Clear();
    }

    if (e.Action == NotifyCollectionChangedAction.Add)
    {
        foreach (DateTime date in e.NewItems)
        {
            calendar.BlackoutDates.Add(new CalendarDateRange(date));
        }
    }
}

接下来我们回到 MainViewModel ，前面我们说到填充 Appointments 这个列表所需要的是 DateTime 时间，而不再是 ViewModel 了。所以我们需要改一下：

public ObservableCollection<AppointmentViewModel> Appointments { get; set; } = new();
改为
public ObservableCollection<DateTime> Appointments { get; set; } = new();

在 LoadAppointments 这个方法中，同样也需要修改一下。

回到 MainWindow.xaml 文件现在我们就可以进行数据绑定了。
但在数据绑定之前需要在 Window 根元素下引入刚刚所创建的文件的命名空间，引入命名空间的语法与引入 Material Design 的语法结构类似，使用 xmlns 加上冒号然后输入一个自己喜欢的名称来表示这个命名空间，可以叫做 alex 如下：
<Window x:Class="WPF_CMS.MainWindow"
    …………
    xmlns:MaterialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:alex="clr-namespace:WPF_CMS.ArrachedProperties"
    mc:Ignorable="d"
    …………>
<Border Background="White" CornerRadius="30">
    <Grid>
        …………
        <Calendar Name="AppointmentCalender" Height="320" Width="300"></Calendar>
        …………
    </Grid>
</Border>
</Window>

好了命名空间引入完毕，接下来回到日历控件，那么现在我们就可以像使用普通属性一样来使用刚刚创建的自定义依赖属性来绑定视图模型了。输入命名空间 alex: 如下：
        <Calendar Name="AppointmentCalender" Height="320" Width="300" alex:CalendarAttachedProperties.RegisterBlackoutDates="{Binding Appointments, Mode=OneWay}" SelectedDate="{Binding SelectedDate, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"></Calendar>

报错不要紧，我们 Ctrl + B 构建一下项目就可以了。好的现在报错消失代码完成，我们运行一下试试看。选择客户xxx现在的感觉就很好了，预约列表切换成了预约日历，界面更加直观、更加友好，而且客户xxx他的预约日期全部都以灰色的形式显示在日历上了。

接下来，最后一个功能添加客户预约。因为我们已经使用了这样一个日历组件了，所以接下来我们就不再需要 DatePicker 了。我们只需要在日历上选定一个日期，点击预约就可以了。

那么开始改造吧，为了能够对应日历的日期选择，我们首先应该在视图模型中添加一个日期类一个私有的 DateTime 成员变量，变量名称 _selectedDate ；对应私有成员变量我们还需要有一个外部可以使用的 DateTime 属性 SelectedDate，Set 时我们需要注意一下需要对它做一个判断，尤且仅当日期发生变化的时候我们才会执行页面的更新逻辑。
……当属性变化的时候我们需要触发 UI 组件的更新，所以 UpdateSourceTrigger=PropertyChanged 。

接下来删掉 DatePicker ，也删掉添加新预约的 Textbox ，最后进入这个 AddAppointment_Click ，首先咱们删掉 DateTime 的参数，因为这个参数将会来自视图模型，然后进入 AddAppointment 方法，同样因为 SelectedDate 来自 ViewModel ，所以我们把参数删掉而在创建新预约的过程中我们需要把视图模型的 ViewModel 传进来。不过注意这个 SelectedDate 实际上是一个可空类型，所以请回到 SelectedDate 我们给它加上问号，让它变成一个可空类型。

public class MainViewModel : INotifyPropertyChanged
{
    …………
    private DateTime? _selectedDate;
    public DateTime? SelectedDate { 
        get => _selectedDate; 
        set
        {
            if(_selectedDate != value)
            {
                _selectedDate = value;
                RaisePropertyChanged(nameof(SelectedDate));
            }
        } 
    }
    …………

    public void AddAppointment()
    {
        if (SelectedCustomer == null)
        {
            return;
        }

        using (var db = new AppDbContext())
        {
            var newAppointment = new Appointment()
            {
                Time = SelectedDate.Value,
                CustomerId = SelectedCustomer.Id
            };
            db.Appointments.Add(newAppointment);
            db.SaveChanges();
        }
        SelectedDate = null;
        LoadAppointments(SelectedCustomer.Id);
    }
}