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中但还会存在于消息列表中下次或空闲时间处理消息。