WPF實現訊息中心

一、概要

本文將講解基於 WPF 實現一個訊息中心的功能，比如常見的軟體當中會經常收到服務端推送的「新聞」、「公告」等訊息。這個時候就需要對這個需求進行分析了。

功能分析如下：

• 訊息內容顯示。
• 訊息管理增、刪、批量刪除。
• 訊息分類（通知類訊息、交互類型訊息例如可跳轉到某個連接或程式內的模組）
• 訊息處理（接受、刪除、忽略）

二、實現

1. 訊息內容顯示 這裡考慮自定義的控制項為 Listbox，訊息本身是一個多項的內容且需要操作每一項。

  <ListBox
    Grid.Row="1"
    MaxHeight="335"
    Background="{x:Null}"
    BorderThickness="0"
    ItemContainerStyle="{DynamicResource ListBoxItemStyle}"
    ItemsSource="{Binding MessageItem}"
    ScrollViewer.HorizontalScrollBarVisibility="Hidden">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Vertical" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate DataType="{x:Type localModel:MessageItemModel}">
            <Border
                Height="30"
                BorderBrush="#FFBDBDBD"
                BorderThickness="0,0,0,0.6">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="40" />
                    </Grid.ColumnDefinitions>
                    <DockPanel>
                        <Label
                            MaxWidth="70"
                            Content="{Binding Path=Name}"
                            Foreground="Red"
                            ToolTip="{Binding Path=Name}" />
                        <Label
                            MaxWidth="130"
                            Content="{Binding Path=Content}"
                            Foreground="White"
                            ToolTip="{Binding Path=Content}" />
                    </DockPanel>
                    <CheckBox
                        Grid.Column="1"
                        FlowDirection="RightToLeft"
                        IsChecked="{Binding Path=CheckBoxState}" />
                </Grid>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

2. 訊息管理增、刪、批量刪除

主要容器定下來之後那麼接下來每一項訊息就是自定義 ListboxItem 即可，針對每一條訊息要有具體的處理。

例如：通知類訊息，只需要確定按鈕。

交互類型訊息，需要確認、刪除、忽略

 <DataTemplate x:Key="SelectedTemplate" DataType="{x:Type localModel:MessageItemModel}">
     <Border BorderBrush="#FFBDBDBD" BorderThickness="0,0,0,0.6">
         <StackPanel>
             <TextBox
                 MaxWidth="240"
                 MaxHeight="200"
                 Padding="0,5,0,0"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center"
                 Background="Transparent"
                 BorderThickness="0"
                 FontSize="14"
                 Foreground="White"
                 IsReadOnly="True"
                 Text="{Binding Path=Content}"
                 TextAlignment="Center"
                 TextWrapping="WrapWithOverflow"
                 ToolTip="{Binding Path=Content}"
                 VerticalScrollBarVisibility="Auto" />
             <StackPanel
                 Margin="5,5,5,9"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center"
                 Orientation="Horizontal">
                 <Button
                     Width="60"
                     Height="25"
                     Margin="5"
                     Command="{Binding DataContext.ClickAcceptCommand, RelativeSource={RelativeSource AncestorType=ListBox}}"
                     CommandParameter="{Binding}"
                     Content="接受"
                     Style="{StaticResource BlueButtonStyle}"
                     Visibility="{Binding Path=InvitationType, Converter={StaticResource BooleanToVisibilityConverter}}" />
                 <Button
                     Width="60"
                     Height="25"
                     Margin="5"
                     Command="{Binding DataContext.ClickRefuseCommand, RelativeSource={RelativeSource AncestorType=ListBox}}"
                     CommandParameter="{Binding}"
                     Content="忽略"
                     Style="{StaticResource BlueButtonStyle}"
                     Visibility="{Binding Path=InvitationType, Converter={StaticResource BooleanToVisibilityConverter}}" />
                 <Button
                     Width="60"
                     Height="25"
                     Margin="5"
                     Command="{Binding DataContext.ClickAgreeCommand, RelativeSource={RelativeSource AncestorType=ListBox}}"
                     CommandParameter="{Binding}"
                     Content="確認"
                     Style="{StaticResource BlueButtonStyle}"
                     Visibility="{Binding Path=NoticeType, Converter={StaticResource BooleanToVisibilityConverter}}" />
             </StackPanel>
         </StackPanel>
     </Border>
 </DataTemplate>

3. 訊息分類

這裡就是在 Model 層定義好具體的枚舉即可。

/// <summary>
/// 訊息處理結果
/// </summary>
public enum SysMessageResult
{
    /// <summary>
    /// 未處理
    /// </summary>
    Unhandled = 0,
    /// <summary>
    /// 同意
    /// </summary>
    Processed = 1
}

/// <summary>
/// 訊息類型
/// </summary>
public enum SysMessageType
{
    /// <summary>
    /// 通知類型
    /// </summary>
    NoticeType = 0,
    /// <summary>
    /// 其他類型
    /// </summary>
    OtherType = 1
}

4. 訊息處理

訊息處理指的是，「確定」、「接受」、「忽略」這三個按鈕對訊息內容處理的邏輯，如果小夥伴需要可根據自己的需要修改。我這裡定義如下：

• 確定：通常處理通知訊息，處理僅僅是從訊息列表中移除該項不做其他行為。
• 接受：是處理交互類型的按鈕，處理從訊息列表中移除該項且觸發其他業務處理行為。
• 忽略：處理所有類型訊息，只是不顯示在 UI 中但還會存在於訊息列表中下次或空閒時間處理訊息。