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中但還會存在于消息清單中下次或空閑時間處理消息。