WPF中DataTemplateSelector的簡單應用

DataTemplateSelector中文叫資料模板選擇器，根據資料模型內的屬性值選擇不同的資料模板，多用於容器如listbox中，達到同一個DataContext卻展示的樣式不同的效果。

在這裡我將舉一個聊天效果展示的例子。

首先我們需要在有listbox的介面新增兩個簡單的DataTemplate

看得出來我們的樣式差不多，繫結的資料也是一樣，那麼接下來就要實現一個DataTemplateSelector，我們自定義的ChatMessageDataTemplateSelector需要繼承DataTemplateSelector，並重寫SelectTemplate()方法

public class ChatMessageDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate LeftMessageTemplate { get; set; }
    public DataTemplate RightMessageTemplate { get; set; }
    public override DataTemplate SelectTemplate(object item,DependencyObject container)
    {
        Message message = item as Message; //CombinedEnity為繫結資料物件
        bool isSendByMe = message.IsSendByMe;
        if (isSendByMe)//是否為我傳送的，我傳送的則是右側訊息樣式，他人傳送則為左側樣式。
        {
            return RightMessageTemplate;
        }
        else
        {
            return LeftMessageTemplate;
        }
    }
}
 

在介面中，我們需要在ListBox的ItemTemplateSelector屬性中定義：

<ListBox x:Name="Message" Grid.Row="1" HorizontalAlignment="Stretch">
    <ListBox.ItemTemplateSelector>
         <local:ChatMessageDataTemplateSelector LeftMessageTemplate="{StaticResource LeftMessage}"
                                                RightMessageTemplate="{StaticResource RightMessage}">
         </local:ChatMessageDataTemplateSelector>
    </ListBox.ItemTemplateSelector>
</ListBox>
 

最後，我們給ListBox加上Items，Item的Model是一個Message類：

public class Message
{
    /// <summary>
    /// 團隊ID
    /// </summary>
    public string TeamId { get; set; }
    /// <summary>
    /// 成員使用者名稱
    /// </summary>
    public string UserName { get; set; }
    /// <summary>
    /// 成員暱稱
    /// </summary>
    public string NickName { get; set; }
    /// <summary>
    /// 訊息時間
    /// </summary>
    public string SendTime { get; set; }
    /// <summary>
    /// 訊息內容
    /// </summary>
    public string Content { get; set; }
    /// <summary>
    /// 是否為我傳送的
    /// </summary>
    public bool IsSendByMe { get; set; }
}

由此，我們就可以根據每一個Item的Model中的IsSendByMe來判斷我們需要展示哪個樣式啦。我們還可以增加更多的樣式，在ChatMessageDataTemplateSelector做選擇就好。

ps：具體的聊天服務，是用signalr實現前後端極其簡單https://docs.microsoft.com/en-us/aspnet/signalr/。