Hero Card

回到我們的情景，使用者可能會查某一家飯店，那這個時候我們要返回這家飯店的圖片，以及讓使用者點了可以到官網的按鈕。

要達成這個目標，首先我們先增加一個新的判斷：

...
if (activity.Text == "查飯店")
{
	// 返回飯店的圖片以及可以打開官網的按鈕
}
else
{
	// 已經有姓名直接輸出 姓名 + 輸入内容
	await context.PostAsync($"{name}: {activity.Text}");
}
...

上面的code還是延續我們之前的sample程式碼，只是本來echo使用者輸入的内容，現在變成特定文字會做特定事情，其餘保留。

再來是建立出一個要被回復出去的IMessageActivity，并且組出我們要的HeroCard，最後把結果輸出

// 建立一個回復
var returnMessage = activity.CreateReply();

// 建立一個HeroCard
var herocard = new HeroCard()
{
	Title = "xxx飯店",
	Text = "5星級高級大飯店",
	Images = new List<CardImage>()
	{
		   new CardImage("https://cdn.pixabay.com/photo/2016/02/10/13/32/hotel-1191709_1280.jpg")
	},
	Buttons = new List<CardAction>()
	{
		new CardAction("openUrl", "官網", "http://www.google.com")
	}
};

returnMessage.Attachments =new List<Attachment>() { herocard.ToAttachment() };

// 送出
await context.PostAsync(returnMessage);

從上面的測試結果，可以看出如果我們整個串起來，從詢問名字到請問使用者用途，整體起來開始有點feel了。

然後我們的HeroCard也讓他看起來便的更加漂亮，除了有圖片，還可以點下去開啓官網

Receipt Card

假設今天使用者想要訂房，我們可能會顯示會需要多少錢，這個時候就可以使用Receipt Card。

else if(activity.Text == "訂房")
{
	var returnMessage = activity.CreateReply();

	var receiptCard = new ReceiptCard()
	{
		Title = "訂房費用",
		Total = "NT$ 120",
		Tax = "NT$ 20",
		Items = new List<ReceiptItem>()
		   {
			   new ReceiptItem()
			   {
					Title = "1大房",
					Price = "90",
					Quantity = "1",
					Image = new CardImage("https://cdn.pixabay.com/photo/2014/08/11/21/40/wall-416062__180.jpg")
			   },
			   new ReceiptItem()
			   {
				   Title = "飲料",
				   Price = "10",
				   Quantity = "1",
				   Image = new CardImage("https://cdn.pixabay.com/photo/2014/09/26/19/51/coca-cola-462776_1280.jpg")
			   }
		   }
	};

	returnMessage.Attachments = new List<Attachment>() { receiptCard.ToAttachment() };

	await context.PostAsync(returnMessage);
}

上面的程式碼其實和HeroCard沒什麽兩樣，差異只在於他們自己有的特定欄位，但是光看名稱應該就蠻好理解。

Adaptive Card

内建的一些卡片樣式其實很夠大部分使用情景了。但是，如果今天你想要自己刻畫呈現的内容怎麽辦？

例如說我希望，查飯店的時候，左邊是飯店的一些資訊，右邊則是飯店圖片的縮圖，透過内建的卡片樣式是做不到。這個時候就需要Adaptive Card。

要使用Adaptive Card，先安裝的套件，直接使用nuget：Install-Package Microsoft.AdaptiveCards

今天我想達到的效果是，左邊是飯店資訊，右邊是飯店的圖片，然後有鏈接可以點去官網，在Adaptive Card我們可以透過使用ColumnSet做到

以下是完整的程式碼：

...
else if(activity.Text == "查飯店v2")
{
	var returnMessage = activity.CreateReply();

	var card = new AdaptiveCard();
	var columSet = new ColumnSet();
	columSet.Columns.Add(new Column()
	{
		Size = "1",
		Items = new List<CardElement>()
		 {
			 new TextBlock()
			 {
				  Text = "豪華大飯店",
				  Weight = TextWeight.Bolder,
				  Size = TextSize.ExtraLarge
			 },
			 new TextBlock()
			 {
				 Text = "4.2 ★★★☆ (120) ",
				 IsSubtle = true,
				   Wrap = false
			 }
		 }
	});

	columSet.Columns.Add(new Column()
	{
		Size = "1",
		Items = new List<CardElement>()
		{
			new Image()
			{
				Url = "https://cdn.pixabay.com/photo/2016/02/10/13/32/hotel-1191709_1280.jpg",
				Size = ImageSize.Auto
			}
		}
	});

	card.Body.Add(columSet);

	card.Actions.Add(new OpenUrlAction()
	{
		Title = "官網",
		Url = "http://wwww.google.com"
	});

	returnMessage.Attachments.Add(new Attachment()
	{
		Content = card,
		ContentType = AdaptiveCard.ContentType
	});

	await context.PostAsync(returnMessage);
}
...

上面的程式碼相較於之前的長很多，但是如果仔細看會發現很多都是在設定排版相關的資訊。如果直接和下圖的結果對照應該就能夠看出感覺：