WPF实现消息中心

一、概要

本文将讲解基于WPF实现一个消息中心的功能，比如常见的软件当中会经常收到服务端推送的“新闻”、“公告”等消息。这个时候就需要对这个需求进行分析了。

功能分析如下：

• 消息内容显示。
• 消息管理增、删、批量删除。
• 消息分类（通知类消息、交互类型消息例如可跳转到某个连接或程序内的模块）
• 消息处理（接受、删除、忽略）

二、实现

源码地址：JusterZhu/2021PlanJ (github.com)

1.消息内容显示

这里考虑自定义的控件为Listbox，消息本身是一个多项的内容且需要操作每一项。

1. <ListBox
2. Grid.Row="1"
3. MaxHeight="335"
4. Background="{x:Null}"
5. BorderThickness="0"
6. ItemContainerStyle="{DynamicResource ListBoxItemStyle}"
7. ItemsSource="{Binding MessageItem}"
8. ScrollViewer.HorizontalScrollBarVisibility="Hidden">
9. <ListBox.ItemsPanel>
10. <ItemsPanelTemplate>
11. <VirtualizingStackPanel Orientation="Vertical" />
12. </ItemsPanelTemplate>
13. </ListBox.ItemsPanel>
14. <ListBox.ItemTemplate>
15. <DataTemplate DataType="{x:Type localModel:MessageItemModel}">
16. <Border
17. Height="30"
18. BorderBrush="#FFBDBDBD"
19. BorderThickness="0,0,0,0.6">
20. <Grid>
21. <Grid.ColumnDefinitions>
22. <ColumnDefinition Width="1*" />
23. <ColumnDefinition Width="40" />
24. </Grid.ColumnDefinitions>
25. <DockPanel>
26. <Label
27. MaxWidth="70"
28. Content="{Binding Path=Name}"
29. Foreground="Red"
30. ToolTip="{Binding Path=Name}" />
31. <Label
32. MaxWidth="130"
33. Content="{Binding Path=Content}"
34. Foreground="White"
35. ToolTip="{Binding Path=Content}" />
36. </DockPanel>
37. <CheckBox
38. Grid.Column="1"
39. FlowDirection="RightToLeft"
40. IsChecked="{Binding Path=CheckBoxState}" />
41. </Grid>
42. </Border>
43. </DataTemplate>
44. </ListBox.ItemTemplate>
45. </ListBox>

2.消息管理增、删、批量删除

主要容器定下来之后那么接下来每一项消息就是自定义ListboxItem即可，针对每一条消息要有具体的处理。

例如：

1. 通知类消息，只需要确定按钮。
2. 交互类型消息，需要确认、删除、忽略
   1. <DataTemplate x:Key="SelectedTemplate" DataType="{x:Type localModel:MessageItemModel}">
   2. <Border BorderBrush="#FFBDBDBD" BorderThickness="0,0,0,0.6">
   3. <StackPanel>
   4. <TextBox
   5. MaxWidth="240"
   6. MaxHeight="200"
   7. Padding="0,5,0,0"
   8. HorizontalAlignment="Center"
   9. VerticalAlignment="Center"
   10. Background="Transparent"
   11. BorderThickness="0"
   12. FontSize="14"
   13. Foreground="White"
   14. IsReadOnly="True"
   15. Text="{Binding Path=Content}"
   16. TextAlignment="Center"
   17. TextWrapping="WrapWithOverflow"
   18. ToolTip="{Binding Path=Content}"
   19. VerticalScrollBarVisibility="Auto" />
   20. <StackPanel
   21. Margin="5,5,5,9"
   22. HorizontalAlignment="Center"
   23. VerticalAlignment="Center"
   24. Orientation="Horizontal">
   25. <Button
   26. Width="60"
   27. Height="25"
   28. Margin="5"
   29. Command="{Binding DataContext.ClickAcceptCommand, RelativeSource={RelativeSource AncestorType=ListBox}}"
   30. CommandParameter="{Binding}"
   31. Content="接受"
   32. Style="{StaticResource BlueButtonStyle}"
   33. Visibility="{Binding Path=InvitationType, Converter={StaticResource BooleanToVisibilityConverter}}" />
   34. <Button
   35. Width="60"
   36. Height="25"
   37. Margin="5"
   38. Command="{Binding DataContext.ClickRefuseCommand, RelativeSource={RelativeSource AncestorType=ListBox}}"
   39. CommandParameter="{Binding}"
   40. Content="忽略"
   41. Style="{StaticResource BlueButtonStyle}"
   42. Visibility="{Binding Path=InvitationType, Converter={StaticResource BooleanToVisibilityConverter}}" />
   43. <Button
   44. Width="60"
   45. Height="25"
   46. Margin="5"
   47. Command="{Binding DataContext.ClickAgreeCommand, RelativeSource={RelativeSource AncestorType=ListBox}}"
   48. CommandParameter="{Binding}"
   49. Content="确认"
   50. Style="{StaticResource BlueButtonStyle}"
   51. Visibility="{Binding Path=NoticeType, Converter={StaticResource BooleanToVisibilityConverter}}" />
   52. </StackPanel>
   53. </StackPanel>
   54. </Border>
   55. </DataTemplate>

3.消息分类

这里就是在Model层定义好具体的枚举即可。

1. /// <summary>
2. /// 消息处理结果
3. /// </summary>
4. public enum SysMessageResult
5. {
6. /// <summary>
7. /// 未处理
8. /// </summary>
9. Unhandled = 0,
10. /// <summary>
11. /// 同意
12. /// </summary>
13. Processed = 1
14. }
16. /// <summary>
17. /// 消息类型
18. /// </summary>
19. public enum SysMessageType
20. {
21. /// <summary>
22. /// 通知类型
23. /// </summary>
24. NoticeType = 0,
25. /// <summary>
26. /// 其他类型
27. /// </summary>
28. OtherType = 1
29. }

4.消息处理

消息处理指的是，“确定”、“接受”、“忽略”这三个按钮对消息内容处理的逻辑，如果小伙伴需要可根据自己的需要修改。 我这里定义如下：

• 确定：通常处理通知消息，处理仅仅是从消息列表中移除该项不做其他行为。
• 接受：是处理交互类型的按钮，处理从消息列表中移除该项且触发其他业务处理行为。
• 忽略：处理所有类型消息，只是不显示在UI中但还会存在于消息列表中下次或空闲时间处理消息。